JAMstack: The What, the Why and the How

Introduction

Web development often involves the use of different development stacks, including the LAMP stack, the MEAN stack, the MERN stack, etc. JAMstack is another stack that offers some unique benefits to developers. This article will discuss those benefits and some general definitions and terms in order to provide an introduction to the JAMstack.

What is the JAMstack?

Static websites have been growing recently in use and functionality. No longer a collection of HTML and CSS files, static websites do things like process payments, handle realtime activities, and more. To call these sites “static” undermines and under-describes their functionality. Hence, the term JAMstack.

JAMstack stands for JavaScript, APIs, and Markup. According to the official website, JAMstack means:

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

The term was coined by Mathias Biilmann, co-founder of Netlify.

With the JAMstack, we no longer talk about specific technologies such as operating systems, web servers, backend programming languages, or databases. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a more streamlined developer experience.

Why the JAMstack?

When should you consider using the JAMstack? Some reasons you might consider the JAMstack include:

• Faster performance: Because a JAMstack website is pre-built HTML and assets, it can be served over a CDN.
• Higher security: JAMstack websites reduce server and database surface area vulnerabilities.
• Lower cost: The cost of running a JAMstack website is generally lower than comparable alternatives since it uses fewer resources.
• Better developer experience: With the JAMstack, there is no tight coupling between the application backend and frontend. This means that you can select from among different CMS and content infrastructure options, removing the need for separate stacks to maintain and serve content. Using JAMstack also simplifies the process of using third-party services like Algolia and Netlify Forms.

There are also a growing number of services that integrate dynamic functionality into JAMstack websites, including:

• Netlify Identity, which enables signup management, logins, password recovery, and more.
• Full text search with Algolia and Lunr.js.
• Form handling with Formspree or Netlify Forms.

How To Build with the JAMstack

In order to build a project using the JAMstack, it must meet the following criteria:

• JavaScript: Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework like Vue.js, React, Angular, etc. or even vanilla JavaScript.
• APIs: All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTP with JavaScript. These can be custom-built or leverage third-party services.
• Markup: Templated markup should be pre-built at deploy time, usually using a site generator like GatsbyJS, Nuxt.js, or Hugo for content sites, or a build tool like Webpack, or ParcelJS for web apps.

With those in mind, the following projects are not JAMstack projects:

• A project built with a server-side CMS like WordPress, Drupal, etc.
• A monolithic server-run web app that relies on a backend language like PHP, Node, or any other backend language.
• A single page app (SPA) that uses isomorphic rendering to build views on the server at runtime.

When building a project with the JAMstack, keep the following best practices in mind:

• The entire site should be served on CDN.
• Employ atomic deploys.
• Use instant caching invalidation.
• Everything should live on Git.
• Markup builds should be automated.

Conclusion

In this article, you learned about what the JAMstack is and why you might consider it for your next project. You also learned about project requirements for JAMstack sites. For examples of websites and web apps built with the JAMstack, you can also look at these official examples.

You can learn more about the JAMstack by going through the official website and the resources section.