JAM Stack: HTML/CSS/JS static websites on modern web

written by Guido Percú on April 18, 2020

JAMStack is a way to create sites and apps focused on performance, security and scaling. It was a term created by Matt Biilmann to describe a modern development architecture based on Javascript, reusable APIs and pre-built Markup.

JavaScript in the browser as the runtime; Reusable HTTP APIs rather than app-specific databases; Prebuilt markup as the delivery mechanism.

Modern Web Development on the JAM Stack

JAMStack

JAMStack embraces continuous delivery, with atomic deploys and version control. The deployment process should be easy so it can be done by developers as well as content editors.

What are the benefits?

  • You won't need to have a Database, build servers or manage infrastructure on AWS.
  • Less code being executed on each request means fewer runtime errors and more security. The more distance we can put between our users and the complexity in our systems, the greater our confidence that they will have the experience that we designed.
  • Static assets on the CDN makes it easier to scale and improve performance.
  • It's cheaper (and depending on your size, it can be free).

How to manage content?

static-site-generators

The tools brought back a feeling of simplicity and control from the complex database-based Content Management Systems (CMS) that they replaced.

Modern Web Development on the JAM Stack

There are plenty of static site generators and Headless CMS to choose from. When we use a traditional CMS like Wordpress, Dupral or Joomla, the same tool is responsible for managing the content and building the HTML that will be rendered at the client's browser. When using static generators and Headless CMS we're able to separate those concerns, attaining all the benefits of JAMStack without loosing the flexibility of CMS.

The Ecosystem

For e-commerce we have solutions like Snipcart (a two lines of code solution to start selling products on your site), Foxycart, Shopify buy button and Stripe (learn how to accept money on Jamstack).

To handle forms and contact, we can use Netlify Forms, Wufoo, Formkeep, Formcarry and Google Forms. Search functionality can be handled by Google Custom Search Engine, Bing Custom Search and Algolia. It's also possible to handle A/B testing (Netlify split testing), user authentication (Netlify Identity, JWT, Amazon Cognito SSO, Auth0), comments and audience engaging Disqus.

We can also expand what's possible with Function as a Service (Serverless), deploying on Netlify, AWS with SAM framework, Azure Functions and Google Cloud.

Resources