Insights

Hyper Web Development and the Rise of JAMstack Architecture

Published on
November 19, 2018

TL;DR

  • Slow, cumbersome, and server-heavy web development is coming to an end
  • Frontend dependency on backend development has been decoupled by modern JavaScript, a robust microservices marketplace, and advanced preprocessors
  • JAMstack is the new web development architecture built from JavaScript, APIs, and Markup
  • JAMstack is easier and faster for developers, and it provides better performance, security, and scalability compared to server-run web apps

The server bottleneck of the legacy web

Web development has long been anchored by backend servers.

Even simple sites, like blogs or basic ecommerce stores, use servers as the backbone of the site's functionality. When a page is loaded, content is queried, generated server-side, and then sent to the user. For every visitor, each piece of content is rebuilt.

Any visitor interaction typically relies on a variety of database calls, which require server maintenance and performance optimization. To keep everything up and running, you'll spend money to scale your infrastructure to handle unpredictable server loads.

In addition, if you've ever wanted a server-side CMS, like Wordpress, Drupal, or Joomla, you'll need a server and a database.

A diagram of the the evolution of the web as we've shifted from the legacy web with web servers, app servers, and databases, to the modern web with JavaScript, APIs (microservices), and Markup on the JAMstack.
Diagram lightly modified from Mathias Biillman's presentation Rise of the JAMstack

The great frontend, backend decoupling

A new model of separating backend and frontend functionality has accelerated modern web development.

The great decoupling has been enabled by three key trends:

  • The rise of modern JavaScript: Complex and dynamic applications can now be built to run locally in your browser. The rise of robust javascript libraries lets our browsers power much of a site's functionality.
  • The invasion of microservices: The rapid growth of the API economy has enabled a new degree of modularity. Web developers can add functionality to their sites by leveraging a growing market of microservices, instead of waiting on custom, monolithic server development.
  • The explosion of preprocessors: With preprocessors, sites can be pre-built into a stack of files that can be served anywhere and distributed entirely by content delivery networks (CDNs), rather than relying on dynamically served content from a backend server.

Welcome to the JAMstack.

JAMstack building blocks

At its core, the JAMstack is a "modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup." The JAMstack is built with JavaScript libraries like Vue.js and React.js, APIs like Twilio and Stripe, and Markup like Gatsby and Webpack.

Forget server-side CMS, isomorphic rendering, and server-run web apps.

JavaScript, APIs, and Markup make up the JAMstack, including tools like Vue, React, Angular, Gatsby, Webpack, Jekyll, Hugo, Nuxt, and more.
JAMstack.org compiles a list of more examples of various tech stacks for you to browse.

JAMstack.org compiles a list of more examples of various tech stacks for you to browse.

Each piece of the JAMstack puzzle makes the other pieces more powerful.

JavaScript functionality has grown significantly over the past few years. You can now build engaging user interfaces right in the browser with React or Vue and can plug in various libraries, like Chart.js or D3.

APIs have become highly extensible and easily embeddable with snippets of JavaScript. In the JAMstack, APIs can either be proprietary to communicate with your own, decoupled backend or managed entirely by third-parties. For example, using the Stripe API to handle payments is far easier than trying to build an entire payment stack.

Preprocessors and site generators wrap all of the JavaScript and APIs into a single, prebuilt package of files. By doing as much preprocessing as possible, you can ensure fast load times and eliminate the need for a server to render content.

Building a better web with the JAMstack

The JAMstack is great for building a variety of sites, but is particularly ideal for simple applications or static sites (e.g. most Wordpress and blogs sites, basic ecommerce stores, small media publications, etc.).

You won't build the next Facebook on the JAMstack (yet), but you'll be able to deploy an extensible, flexible, and highly modular web application or site.

There are significant benefits to implementing the JAMstack:

  • Better performance: Generating pre-built files to be served over a CDN increases site performance and speed. Tools like Heroku and Wordpress can be bulky and slow. The ability to quickly serve content has become increasingly important with the rise of mobile.
  • Greater scalability: Static content scales dynamically on a CDN, allowing your site to reach more people quickly and cheaply. Preprocessed sites can handle as much traffic as you can throw at it, without needing to scale a web server upfront.
  • Higher security: With no complex servers to run or maintain, the threat of direct breaches or code injections diminishes. The threat surface is largely reduced to APIs, often managed by reliable, fully scaled third-party services.
  • Streamlined developer experience: With JAMstack, everything can be accessed via Git and entire projects can be run locally on a developer's computer, streamlining contributions and testing.

The JAMstack ecosystem

Unsurprisingly, an ecosystem of developer tools has grown around the JAMstack. Netlify, one of the most popular tools, is building a git-centric workflow and application delivery network to make the JAMstack a natural part of the developer workflow.

Given the dominance of server-based CMS (Wordpress apparently powers 42% of the web), JAMstack has the opportunity to rewrite large swaths of the modern web. Check out an in-depth overview here by Mathias Biillman, CEO of Netlify.

Geoff Stevens
Head of Developer Experience

Get your first insights in minutes

Getting started is fast and simple with fully-automated metrics that work out of the box. Just connect a Git provider.