JAM Stack Overview

Trung Pham Duy - November 2023

First definition

An architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.

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

JAM?

  • Javascript
  • API
  • Markup

JAM - Javascript

  • Javascript: Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use.
  • API
  • Markup

JAM - API

  • Javascript
  • API: Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function.
  • Markup

JAM - Markup

  • Javascript
  • API
  • Markup: Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator.

The Roots

SmashingConf San Francisco 2016 - Mathias Biilmann: The New Front-end Stack. Javascript, APIs and Markup from Smashing Magazine on Vimeo.

Attributes

  • Decoupled
  • Static-first
  • Progressively enhanced

Attributes - Decoupled

  • The front end uses tooling separate from the back end.
  • The front end is typically built using a static site generator.
  • The back end is often integrated with the front through the use of APIs used during the build process.
  • Server-side processes can also be run using serverless functions.

Attributes - Static-first

  • Pre-rendered: the front end was built and compiled into HTML, CSS, and JavaScript files.

Attributes - Progressively enhanced

  • JavaScript can be introduced to pre-rendered sites on an as-needed basis, thus increasing performance in the browser.

Benefits

  • Faster performance
  • More secure
  • Less expensive
  • Better developer experience
  • Scalability

Workflow

flowchart LR DEV[Develop] VC[Version Control] AB[Automated Build] SA[Static Assets] AD[Atomic Deploy] PR[Pre-render & invalidate cache] CDN[Update CDN] DEV --> VC --> AB --> SA --> AD --> PR --> CDN

Best practices

  • Content Delivery Network (CDN)
  • Atomic deploys
  • Cache invalidation
  • Everything in version control
  • Automated builds

Reference: JAM Stack in One page

Must read.

Jamstack WTF

Official JAM Stack site

jamstack.org/

Reference: JAM Stack Resources

The new dynamic: Resources to work with static site generators and the JAMstack, to build fast and secure modern websites.

Development options

Hand coding

Simple and effective method of writing HTML, ideal for super simple pages.

Static site generators

Most Jamstack sites are powered by a static site generator. There’s no enforcement on which SSG you decide to use.

11ty, Hugo, Next.js, Astro.

List of Static Site Generators for Jamstack Sites

Site Builders

Tools that bring Jamstack to less technical users, while enabling developers to customize sites through modern tooling.

Deployment options

Services

There are great services that provide this for free and with ease.

List of deployment services

Self hosting

Deploying a static site on your very own servers.

Dynamic parts

Dynamic parts

Jamstack websites don’t have to be static. There are great services available to help bring some dynamic data to your product.

  • Search
  • Comments
  • Forms
  • E-Commerce
  • Custom functions
  • Custom data

API - Headless CMS

Jamstack sites can also be controlled via a Content Management System, these are typically known as Headless CMS. Once a change in the CMS is made, a new build of your site will be triggered and then deployed as static assets.

List of Headless CMS

Public APIs

[Github] public-apis

JAM Stack Course