A brief history of Jamstack

Jamstack, or JAMstack as it was previously stylized, is a term that has been around since 2015, first coined by the CEO of Netlify, Mathias Biilmann.

In 2018, companies like Gatsby, Contentful promoted and popularized the term, and the very first Jamstack conference was launched as developers were questioning the static aspect of static website generators like Jekyll, the famous Ruby SSG written by Github co-founder Tom Preston-Werner.

Between 2019 and 2020, Jamstack became mainstream, with an explosion of tools and services entering the market to support its philosophy. That’s when the term became more commonly known as “Jamstack” in lieu of “JAMstack” and ZEIT developers behind the popular React Framework Next become Vercel, integrating the core ideas of Jamstack into their generator, similarly to Nuxt, the Vue alternative or Svelte Kit introduced in late 2020.

What is Jamstack?

JAM stands for Javascript, APIs, and Markup. It’s “a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup,” describes Biilmann. To understand what it means, let’s take a look at each layer individually:

Javascript

Chances are you’ve already heard about Javascript, the tool that makes it possible to add dynamic functionalities to your websites and web applications. There are multiple frameworks, libraries, and tools that elevate user experience.

APIs

An API connects the server to the client-side and calls endpoints through HTTPS with Javascript fetching any third-party services or custom functions. This makes it possible for the client-side to load data, submit information, authenticate a user, and enable any functionality that comes from the back-end.

Markup

At the heart of any website is HTML. The promise with Jamstack is to serve generated HTML files to the client rather than calculate the page at runtime every time, allowing for better caching and super-fast delivery.

What it means

Nowadays, Jamstack means that the website is statically generated by the front-end and decoupled from the back-end. Even build the website with your tools of choice, which allows for more control than a monolithic framework. The back-end is also often connected to the front-end with API calls and functions, running server processes or loading dynamic content.

It makes it possible to deploy your website on a CDN that delivers files quickly and securely as there’s no direct call to your database. It’s less expensive and more scalable than hosting a website as CDN charges per data transfer rather than a monthly fee.

Importantly, it bolsters Developers Experience (DX) as they can work using the tools they love while removing concerns between server and client. Most of the time it’s also connected to Continuous Integration (CI) and version control like Git for code traceability, collaboration, and automated builds.

Example of architecture

What’s up next

As developers are always looking towards the best solutions available, the tools evolve regularly, and therefore Jamstack is already being scrutinized for further development.  Interestingly this time around, the focus is to help the movement mature and reach full-stack to create a framework that encompasses both the front and the back-end.

Sid Sijbrandij, CEO of GitLab, compares it to the Ruby on Rails of Javascript since these frameworks introduce opinionated choices and conventions. So far, two main projects are competing in this space. The first is Redwood, then Blitz, both based on React, using GraphQL and Prisma for their database.

However, this discussion has brought up another challenge: the more Javascript in your website or application, the more computational power is needed on the client-side, which slows things down. 

This challenge has led to the development of new technology like Astro. Still, in the very early stages, this framework built by the team behind the Snowpack build tool wants to shake things off by limiting the Javascript aspect as much as possible. To do this, they generate pure HTML files with little to no Javascript to hydrate the views or keep some components dynamic while keeping the DX brought by all these frameworks and also allowing crossover. 

This is something to keep up under the radar as Jamstack evolves with a bright future ahead.