The JAMstack: It’s Pretty Sweet

The JAMstack represents a major trend in web development. Coined by Mathias Biilmann, the CEO of Netlify, the JAMstack is “a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.” The JAMstack offers an alternative to the LAMP and MEAN stacks and has some advantages like scaling, security, speed, and developer experience. Service Workers and serverless functionality enrich the JAMstack. Modern front-end development reflects the broader trend of componentization, and we categorize +110 solutions in the space. As the market matures we expect to see an increasing number of commercial offerings.

Powerful mobile computing, modern browsers, Static Site Generators (SSG), expansive Content Delivery Networks (CDNs), and the API economy catalyzed the JAMstack’s emergence. The JAMstack stands for JavaScript, APIs, and Markup. Jamstack.org defines each component as the following:

• JavaScript (J): JavaScript running entirely on the client handles any dynamic programming during the request/response cycle (e.g. Vue.js, React.js).
• APIs (A): Reusable APIs accessed over HTTP with JavaScript abstract all server-side processes or database actions (e.g. Twilio, Stripe).
• Markup (M): Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps (e.g. Gatsby.js, Webpack).

Git, a central source code repository, is fundamental to the JAMstack because it holds all the site’s components. A SSG generates the browser markup, which is pushed to Git as a collection of prebuilt pages. The CDN and/or hosting service can identify the changes, automatically rebuild the site, and deploy it. This workflow embodies the modern software development life cycle practice of Continuous Integration and Deployment (CI/CD).

The JAMstack is an alternative to the LAMP and MEAN stacks. In the early 2000s, the LAMP stack originated from four open-source components that developers adopted to build a site: the Linux operating system, the Apache HTTP Server, the MySQL RDBMS, and the PHP language. In 2013 MongoDB introduced the MEAN stack that included MongoDB, Express.js, Angular.js, and node.js. The MEAN stack improved upon the LAMP stack because it supported a modern NoSQL database, more responsive user interface (UI), and one language, JavaScript, for communication between front-end and back-end functions. Similar to the LAMP stack, the MEAN stack distinguished between the view and model layer.

The MEAN stack’s Angular.js helped popularize Single Page Applications (SPA). Microsoft states SPAs are “web apps that load a single HTML page and dynamically update that page as the user interacts with the app.” SPAs create more responsive sites without the need for constant page reloads from a server. It transfers some of the functionality to the client-side. SPAs facilitated the movement to the JAMstack best practice of static sites. In this context, static sites refer to how sites are built and served, not the level of interactivity.

The LAMP/MEAN stack and the JAMstack exhibit different user request workflows. Traditionally, every time a user requests a page, a server queries a database and combines the result with data from the page’s markup and plugins to generate a new HTML document in the browser. This process can slow page load times. With the ability to abstract back-end functionality and leverage powerful front-end technology, the JAMstack represents a modern workflow. When a user requests a page, there is no need to query the database as the HTML document is a cached static file that is sent to the browser.

Indicators a site doesn’t reflect the JAMstack include the following:

• Leveraging a traditional CMS like WordPress or Drupal
• Creating a site using Squarespace or Wix
• Using isomorphic rendering to build views on the server at runtime
• Coding a monolithic server-run web app based on Ruby or node

The JAMstack’s advantages can be categorized into four main buckets:

• Improved scaling: Static content can be placed on a CDN making it easier to dynamically scale.
• Heightened security: The lack of databases, plugins, and dynamic software running on a server decreases the potential for code injections and breaches. Additionally, since APIs handle dynamic functions, the web developer can leverage third parties’ security expertise.
• Accelerated load times: The JAMstack is faster because the browser processes functionality that the back-end traditionally executed. Prebuilt HTML files can be served over a CDN instead of rendering documents live on the server. Additionally, the JAMstack minimizes database queries, accelerating content delivery. During an experiment Smashing Magazine found that using a static version distributed via a CDN loaded the first byte six times faster than a dynamic website.
• Better developer experience: Loose coupling and separation of controls allow for more targeted development and debugging. The ability to leverage third party APIs means developers can focus on value-added features. Additionally, using a Git repository allows the entire website to be centrally hosted. In turn, developers can easily make changes by pushing a commit to the version-controlled repository. The JAMstack applies CI/CD to expedite development.

We are starting to see progressive web developers use Service Workers to complement the JAMstack. According to Cloudflare, a Service Worker is “a feature implemented by modern browsers which allows you to load a script which intercepts web requests destined for your server before they hit the network, allowing you a chance to rewrite them, redirect them, or even respond directly.” Service Workers are a background process separate from the website that cache request information permanently and can run when a user isn’t on the site. In turn, when users want to go back to the site the request doesn’t need to go to the server to get the HTML but can be loaded from the Service Worker, shortening the page load time. Service Workers can also facilitate offline experiences and push notifications.

Additionally, serverless functionality can be used to craft rich, custom experiences. In March, Netlify officially released Functions, a tool to facilitate deploying AWS Lambda functions by only requiring a developer to add a file to their Git repository. Netlify automatically recognizes the function and deploys it, minimizing the developer’s need to ramp up on AWS Lambda. We’ve discussed our enthusiasm for serverless technology previously and believe it is powerful for both cloud, edge, and progressive web use cases.

Modern front-end development with APIs and functions reflects a broader trend, componentization. Similar to how developers are breaking down the monolith and building microservices leveraging APIs, the front-end is going through the same decomposition. To assemble the front-end, developers draw from third-party APIs and internally-built individual components that express specific functionality of the page. Developers need to develop, visualize, and manage the different pieces, increasing the complexity of their work.

The front-end ecosystem is rapidly evolving, and we identify ~110 modern solutions in the space. We appreciate that solutions may have offerings across different areas, but we attempt to place them in a core category. The vast majority are open source, especially in the JavaScript, Static Site Generator (SSG), and build categories. There are also venture-backed startups like Netlify in CDN/hosting and Contentful in headless CMS.

The JAMstack reflects the synergy of multiple technology improvements from mobile computing power to the API economy. A step up from the LAMP and MEAN stacks, the JAMstack offers benefits including scaling, security, speed, and agile development. Service Workers and serverless broaden its functionality. Our landscape catalogs over 110 offerings, and we look forward to tracking the JAMstack as it evolves.

Many thanks to the Gatsby and Hasura teams for their perspectives and input.