The JAMstack: It’s Pretty Sweet
- 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 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 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.