1 What is the Jamstack?

There has been an increasing trend over the last several years to break up traditional “monolithic” applications and architectures into smaller, more maintainable pieces & services. The Jamstack is a continuation of that trend. The Jamstack is fundamentally an architecture, a way of designing websites and applications. It is also a philosophy on how to build modern sites and applications.

It primarily centers around two very important concepts: pre-rendering and de-coupling. An important tool in the Jamstack architecture is the Static Site Generator which “pre-renders” all of your content into static files, ie .html, .css, .js, etc. When a user lands on your site or application, the server, most often a CDN, renders that static .html file to the user; making Jamstack sites & applications incredibly fast, secure & reliable.

De-coupling involves breaking up applications into smaller APIs, services, or systems. This de-coupling allows you to create services that are single purpose and ideally do one thing very well. You can more easily maintain, swap out, or replace those services with this architecture. It also allows you to take advantage of 3rd party services and APIs, allowing you to focus on the areas and domains you know well and let other experts handle the aspects you don’t. Do you honestly want to roll your own authentication or ecommerce solution from scratch, or would you gladly pay someone else to handle that for you?

1.1 JavaScript, API’s Markup

Now that you understand the two main concepts of the Jamstack, just what exactly is the “Jam” in Jamstack? The “Jam” in Jamsstack is an acronym that stands for JavaScript, APIs & Markup. These three components are the building blocks of any Jamstack site or application.

1.1.1 JavaScript

JavaScript has exploded in popularity over the years, and it is showing no signs of slowing down anytime soon. It is also what enables Jamstack sites to communicate with various APIs and services. JS is responsible for the dynamic aspects of a Jamstack application, which often seems to confuse people.

When people hear the word ‘static’ sites, they assume no dynamic or interactive elements. This could not be further from the truth. Modern front-end frameworks, like React, Vue, Angular, etc., allow for rich user interactions and UX. Jamstack sites are static in that they serve up pre-rendered static files. However, the UX can be as dynamic as you wish, as you will later discover in the projects of this book, where we build an ecommerce store and membership site.

1.1.2 API’s

APIs refer to the services or systems used to build a Jamstack site, the de-coupling aspect. These are most often third-party services, but you can also create your own. The Jamstack ecosystem is vibrant will all kinds of services for accepting payments, authentication/authorization, ecommerce, membership, databases, etc.

At the end of this book, there is a resources section with links to the various services and APIs available to build your sites and applications.

1.1.3 Markup

The last piece of the Jam is Markup. The markup ultimately ends up being HTML, but many Jamstack sites also make liberal use of Markdown. Markdown is a simple markup language that allows content writers and creators to write content without worrying about HTML formatting, tags, etc.

A static site generator typically takes this Markdown and converts it to HTML during the build process where a site is packaged up and prepared for deployment.

1.2 Tools & services

While every Jamstack architecture is unique, you will often find a common set of tools and services among them.

1.2.1 Static site generator

Static Site Generator - source:https://bejamas.io/blog/static-site-generators/

A static site generator is a tool that takes your site and builds it into static files, which you then deploy to production, usually a CDN. Often these tools take .md or Markdown files, and convert them to .html pages. These tools are also responsible for compiling JS, CSS, PostCSS, images, fonts, etc., into their production-ready form.

1.2.2 CDN - content delivery network

CDN (Content Delivery Network - source: https://imagekit.io/blog/what-is-content-delivery-network-cdn-guide/)

A CDN or content delivery network takes your site and deploys it to servers all around the world. No matter where your users are in the world, they can quickly download it from the nearest location.

For example, let’s say you live in the US, and your site lives on a server in New York. When a user from Australia tries to access it, that request travels from Australia to New York and back again before the page renders. With a CDN, your site is lives on a server in Australia, making the distance the request has to travel significantly shorter.

1.2.3 Headless CMS

Headless CMS - source: https://bejamas.io/blog/headless-cms/

With a more traditional ‘monolithic’ CMS, the CMS is responsible for rendering views dynamically. Since a Jamstack site is pre-rendered, this is not possible. Therefore, a [headless CMS (https://jamstack.org/headless-cms/) is responsible solely for managing content, not the presentation or view layer. They typically expose the content via a REST API or GraphQL API. A static site generator will then extract the content needed during the build/compile step. Once the SSG has all of the content, it injects it into the templates and outputs .html files.

1.2.4 Continuous Integration & Deployment

CI/CD - source: https://solidstudio.io/blog/ci-cd-pipelines.html

Another critical aspect of the Jamstack architecture is CI/CD. This allows a developer or content creator to automatically create a new build to production with the simple click of a button or via a merge into version control.

Most headless CMS’s will trigger a webhook when a content author saves a change. This webhook will then start the CI/CD pipelines on the hosting provider, building and deploying the latest changes. Most hosting providers also trigger a new build when a new commit merges into master.

1.2.5 Version control

Git - source: https://www.nobledesktop.com/learn/git/git-branches

A Jamstack site can be stored entirely in a repo under version control, usually Git. This allows a developer to quickly clone it and get the entire site or application up and running locally within minutes. No longer will you have to worry about cloning a database or setting up/configuring complex local dev environments.