An Introduction to the Jamstack

Davis Gitonga

Davis Gitonga / January 11, 2021

7 min read •

•••
An Introduction to the Jamstack

Introduction

"JAMstack" is a modern architecture designed to make the web faster, safer, and easier to scale.

In recent years, we have seen a storm of advancements on the web platform. JavaScript has matured. Browsers are far more powerful. It certainly feels like the start of a new chapter for the web. You've likely felt this as you've witnessed the explosion of new frontend frameworks and API-based services.

With most internet traffic coming from mobile devices (55.73% market share), users have become increasingly impatient — we want a website to load as fast as possible. (Google also seems to be losing patience and now factors site speed into its famous ranking algorithms.)

What You'll Learn

In this article, we dive into the new, modern approaches to building blazing fast and secure websites.

We'll also build and deploy a simple Jamstack app using Eleventy, a static site generator and deploy it to Netlify.

Prerequisites

You should be familiar with:

For the practical part of this article, you'll need to have Node and NPM installed on your computer. Use node -v on the command line to find your local Node version.

What is the Jamstack?

Mathias Biilmann, CEO and Co-founder of Netlify, coined the term Jamstack. He describes it as;

"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup" - Mathias Biilmann

In other words, it is a way of deploying and serving websites that can be served directly from a CDN and don't rely on requests hitting an active application server.

The JAM in Jamstack stands for JavaScript, APIs & Markup.

Let's take a glance at each individually.

JavaScript

JavaScript handles interactivity and dynamic functionalities. There's no limitation on which framework or library you must use.

React LogoVue LogoSvelte Logo

APIs

Decoupling the frontend from the backend allows for more modular development where we can take advantage of the large ecosystem of third-party APIs to provide page website functionality.

Server-side operations are abstracted into reusable APIs and accessed over HTTP with JavaScript. These are often third-party services or your custom serverless functions.

Markup

Websites are pre-built and served as static HTML pages from a CDN. These are often pre-built from source files, such as Markdown, using a static site generator for content sites, or a build tool for web apps.

Definitions

CDN (Content Delivery Network)

A geographically distributed network optimized for serving assets to users. It provides redundancy and improves delivery performance by servicing requests from the infrastructure closest to the user making the request.

Pre-rendering

To generate the markup that represents a view in advance of when it is required. It happens at build time instead of on-demand so that web servers do not need to perform this activity for every request received.

Why Jamstack?

A Jamstack architecture can bring all kinds of benefits to the sites and project workflows.

Let's check out some benefits Jamstack provides that make it an attractive option.

More secure

Static sites have few avenues for attack since it's just HTML files and external API consumption. You need not worry about server or database vulnerabilities.

Jamstack sites embody these principles to enhance security:

  • A minimal surface area with mostly read-only hosting infrastructure.
  • Decoupled services exposed to the build process and not the public.
  • An ecosystem of independently operated and secured external services consumed via APIs.

Scalability

If your product suddenly goes viral and has many active users, the CDN seamlessly compensates.

A good CDN will have edge nodes distributed globally so that your site is always served to a visitor from the closest server. That improves site performance when considering the geographical location of your site's audience.

Cheap

Hosting static files is cheap or even free.

Although financial costs are often the most blatant, the Jamstack significantly reduces the cost of innovation and improves team efficiency.

Faster performance

Performance is critical to user experience (UX), user retention, and conversion. Simply put, time is money. Therefore, the faster sites are delivered, the more value they can unlock.

Pre-built markup and assets are delivered to the browser as quickly as possible as they are easy to serve and are closer to the user thanks to the use of a CDN.

The figure below compares both legacy web stack and Jamstack request life cycles.

Legacy web stack versus Jamstack

Better developer experience

Learning and using Jamstack is fun. Web developers can focus on the problem they're attempting to unravel without being tied to a monolithic architecture. That usually means quicker and more focused development.

Best Practices

The following tips will help you realize the real power behind the Jamstack.

CDN technology

Since all markup and assets are pre-built, a CDN is used to serve them. That provides better performance.

Atomic deploys

Each deployment is a snapshot of the site. That helps guarantee a consistent version of the website globally.

Cache invalidation

Once a build is uploaded, the CDN invalidates its cache. That means that your new site build is live in an instant.

Git centered workflows

Everything in version control.

Your codebase lives in a Version Control System, such as Git. The main benefits are: change history for every file, collaborators, and traceability.

Atomic builds

Your server is notified when a new build is required, typically via webhooks. The server builds the project, updates the CDN, and the site goes live.

Workflow

Here is how an ideal Jamstack workflow would look like

  1. The source for the website is a hosted repository that stores content and code together as editable files.
  2. Whenever the code changes, a build process is triggered that pre‐renders the website, creating final HTML from templates, content, and data.
  3. The prepared, rendered assets are published globally on a CDN, putting them as close to end users as physically possible.

The figure below describes the Jamstack workflow;

Jamstack workflow

Building the Static Site

We'll dive right in and set up Eleventy, a static site generator.

To begin with, let's create a directory for our project and navigate into it.

mkdir eleventy-blog
cd eleventy-blog

We'll go ahead and install Eleventy as a global dependency using NPM.

npm i -g @11ty/eleventy

If you run into any errors when installing the package globally. The solution is running the command with admin privileges i.e. sudo ....

Then create a new file, README.md with some content.

echo '# First Jamstack site.' > README.md
eleventy

Running eleventy will compile any files matching valid input template file extensions (.md is one of them) in the current directory into the output folder (defaults to _site).

eleventy --serve

Next, run eleventy --serve to start up a web server. Then open the Local Access URL http://localhost:8080/README/ in your web browser of choice to see your Eleventy output.

Deploying

Let's use Netlify Drop to deploy this site.

Visit https://app.netlify.com/drop, and drag & drop the _site folder generated by Eleventy into the browser window.

Netlify will publish your static assets and give you a link https://[your-site].netlify.app to view the site live.

Conclusion

In this article, you've learned about the Jamstack architecture and should now understand how it works and the advantages it offers.

You've also built and deployed a simple static site using Eleventy and Netlify.

I recommend checking out the resources below to continue exploring the Jamstack.

Useful Resources

Buy me a coffee•Suggest Edit

share your thoughts