An Introduction to JAMstack

JAMstack is a unique and increasingly popular way to build websites and web apps. The JAM in JAMstack stands for JavaScript, APIs, and Markup, but there's much more to JAMstack than those three technologies combined.

The main idea of JAMstack is to simplify the stack. But how does it do so? What are some JAMstack setups? And what are the main benefits of building a website or web app with JAMstack? Read on to find out.

How Does JAMstack work?

Let's consider a website as it was built with old front-end technologies first. At its simplest, visitors will access the website through a browser requesting and receiving files from a server.

If there's a dynamic element on the website, the server would run a program and send through the result. Quite possibly, the browser queries a database too.

If the website is popular, there will also be caching layers in the website's database servers, web servers, load balancers, etc. Add it all together and you have quite a few moving parts for even a relatively simple website or app.

JAMstack does away with most of these moving parts. A JAMstack website is served directly from a CDN (or a static file server). The browser sends a request to the CDN and the CDN sends the appropriate files. That's it.

There is no server that performs logic at runtime. In fact, JAMstack projects don't need web servers at all. This is how JAMstack differentiates itself from other front-end stacks such as LAMP or MEAN.

However, the lack of web servers doesn't mean that you can't run logic on a server. You can use serverless technology to do so. FaaS, more specifically. JAMstack works particularly well with the microservices architecture that FaaS enables.

All the above also doesn't mean that JAMstack is a fancy acronym for static websites. While a JAMstack project is delivered statically, it can be very dynamic in nature.

One example of a very dynamic web app built with JAMstack is proxx.app, a minesweeper game delivered in your browser.

JAMstack allows you to build websites and apps in whichever environment you prefer. Building is disconnected from hosting. Any changes you make in the build are deployed to the CDN or static server, where a new instance of the site is created.

Additionally, using JAMstack, server-side processes or database actions come in the form of reusable APIs. You can either build these yourself or you can integrate third-party services into your project, such as Stripe for Commerce, Contentful as CMS, and Cloudinary for image optimization.

JAMstack Setups

If you wanted to create a single-page web app with JAMstack, you could use a build tool such as Webpack or Broccoli; a framework/library such as React, Angular, or Ember; and a homebrewed API.

If you wanted to build a regular JAMstack website, you can do so with Gatsby, Nuxt, Hugo, Next, or any of the other popular build tools. You could use the APIs of Disqus, Intercom, Contentful, or even a static JSON file to add extra functionality.

Or you could combine any of the above tools for a hybrid web project. JAMstack is flexible. You don't have to use JavaScript, APIs, and Markup. Just like you don't have to hit a database with the LAMP stack. The only common denominator between JAMstack websites and apps is that none of them have an origin server.

The Benefits of JAMstack

Considering JAMstack projects are delivered statically, it shouldn't come as a surprise that it provides much better performance. For example, the Citrix documentation website went from an 800 ms load time to an 80 ms load time when Citrix switched to JAMstack technologies.

JAMstack also makes for much-improved security, because there's a much smaller surface area of attack. Hackers can't target as many places as before. For example, there's no /wp-admin page for hackers to target, because JAMstack does not use a heavy CMS such as WordPress.

JAMstack websites also scale better, as a CDN is designed with scale (and performance) in mind. Scale is usually a headache for technical architects; for the most part, JAMstack takes that headache away.

Finally, JAMstack provides a better developer experience. Developers have more freedom to choose the environment of their build. Deployments are simplified too, as it simply means getting files to the CDN or static server.

In Conclusion

JAMstack is a promising, new tech stack to create websites and apps. It does away with web servers and instead relies on APIs, FaaS, and CDNs to deliver pre-baked markup spruced up with JavaScript for the more dynamic elements. It makes for faster and more secure websites that are easier to scale.

What do you think? Is JAMstack the future of front-end web development?