JAMstack: The What, The Why and The How
JAMstack stands for Javascript, API, and Markup.
Javascript (), often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.
API: An application programming interface (API) is a computing interface exposed by a particular software program, library, operating system, or internet service, to allow third parties to use the functionality of that software application.
Markup: A markup language is not a programming language. It's a series of special markings, interspersed with plain text, which if removed or ignored, leave the plain text as a complete whole.
And the idea behind it is that you can build highly reactive, SEO-tuned, content-aware web applications with these three technologies (and HTML + CSS of course).
To be fair, a fourth part also is important: A Static site generator like Gatsby.js or Jekyll. At least that is required to unleash the full power of the JAMStack.
What the heck is JAMstack?
The term JAMstack is related to Javascript and modern web development architecture, it is an ecosystem, a set of tools on their own.
It's a new way of creating websites and applications that renders better performance, higher security, lower cost of scaling, and even better developer experience and it is not about some specific technology. JAMstack sites are not built on the fly. So they stand opposite to sites built on legacy stacks like WordPress, Drupal, and similar LAMPstack based setups that by definition have to be executed every time someone visits.
JAMstack is an attempt to talk of the two megatrends happening in web development right now, as a single joint category. The revolution of Frontend development and the API economy coming together as a new and better way of creating web projects.
Advantages of JAMstack
It’s FAST
In its major advantages, the speed and the swiftness come initially. To minimize the loading time, nothing beats its pre-built files served over a CDN. JAMstack site websites are super fast all because of the HTML that is generated already all whilst deploying time and just served via CDN without any interference or any backend delays.
It’s EFFICIENT
Since there is no backend, there are no bottlenecks (e.g. no database).
It’s CHEAPER
Since serving the resources through a CDN is way less costly than serving them through a backend server. It’s more SECURE since the backend is exposed only through an API.
Why use it for your business?
- In human words, it is a better way to develop the web. For concrete business oriented reasons:
- You can serve static content (has multiple benefits)
- Applications become up to 5x faster
- Websites and apps can be made much more secure
- JAMstack apps are far less expensive to maintain and develop
- Future-proof technologies mean a long life span for your websites and applications (lower costs in the long run)
- No tight coupling between heavy back end frameworks (less technical debt)
- SEO, faster sites with good PWA optimization rank better in Google
- Developer friendliness (developers are human too!)
Why the JAMstack?
- Better Performance
- Cheaper, Easier Scaling
- Higher Security
- Better Developer Experience
The JAMstack application has minimal things to do during runtime which increases performance, reliability, and scale. This is because it requires no application servers. The static content is a highly cacheable and easily distributed Cloud Content provider. This means minimal lock-in to specific vendors.
Enterprise solutions can be built using JAMstack with quicker speed-to-market and lower costs. This is because it requires fewer resources to manage and support the application in production as well as for development. It requires only a small team of developers, and everything can be done with Javascript and markup. It’s not a prerequisite of JAMstack, but it does make sense to reduce the skill-sets needed when delivering for the web.
Pre-rendering with static site generators
We need a tool that is capable of pre-rendering markup. Static site generators are designed for this purpose. There are a few static site generators out there today, most of which are based on popular JavaScript frontend frameworks such as React (Gatsby, Next.js) and Vue (Nuxt.js, Gridsome). There are also a few that are non-JavaScript-based, such as Jekyll (Ruby) and Hugo (Go aka Golang).
Hello World – Using Gatsby
- Install the Gatsby CLI. The Gatsby CLI helps you create new sites using Gatsby starters (like this one!)# install the Gatsby CLI globally npm install -g gatsby-cli
- Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the default starter.# create a new Gatsby site using the default starter gatsby new hello-world
- Start developing. Navigate into your new site’s directory and start it up.cd hello-world/ gatsby develop
- Open the source code and start editing! Your site is now running at http://localhost:8000. Open the hello-world directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real-time!
Installed App Explained –
- /node_modules: The directory where all of the modules of code that your project depends on (npm packages) are automatically installed.
- /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser), like your site header, or a page template. “Src” is a convention for “source code”.
- .gitignore: This file tells git which files it should not track / not maintain a version history for.
- .prettierrc: This is a configuration file for a tool called Prettier, which is a tool to help keep the formatting of your code consistent.
- gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.
- gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).
- gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
- gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.
- LICENSE: Gatsby is licensed under the MIT license.
- package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).
- package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
- README.MD: A text file containing useful reference information about your project.
- yarn.lock: Yarn is a package manager alternative to npm. You can use either yarn or npm, though all of the Gatsby docs reference npm. This file serves essentially the same purpose as package-lock.json, just for a different package management system.
Final Thoughts
JAMstack, like most great technological trends, is a pretty awesome solution with a crummy name. It’s not an impeccable solution by any stretch, but it empowers front-end developers to build all kinds of sites and applications using their existing skills.
So what are you waiting for? Get out there and build something!
Comments
Post a Comment