Cobwwweb logo

WTF is JAMstack?

Nov 13, 2018 JAMstack

JAMstack is this new(ish) term gaining popularity among web development communities. In fact, the premier JAMstack Conference was held just last month (October 2018).

But what is JAMstack and why should you care about it?

What is JAMstack?

The community website provides a one-sentence overview of JAMstack:

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

Right, so the "JAM" in JAMstack stands for Javascript, APIs, and Markup. WTF?

Yeah, well, the term is a little goofy. Netlify co-founder Matt Biilman has joked that he and a friend coined the acronym prior to knowing what it stood for. The part that tripped me up when I first learned about it was that you don't actually need Javascript to follow the JAMstack approach. Yeah, so … The first letter in the acronym is one of the least important parts of the entire philosophy.

Instead, I like to think about the JAMstack as being a philosophy that guides the production and distribution of dynamically-built static sites.

The term static sites holds some implication that it's … well, static – that you can't use a database and/or a content management system to power your content. But that's not true. JAMstack defines when the a site retrieves dynamic content, not how it is retrieved. And that is to say all dynamic tasks in a JAMstack site occur at build time, not at runtime.

Using the community's best practices, this is the process for deploying a site using the JAMstack approach:

  1. Make a change to the code locally.
  2. Push the changes to GitHub.
  3. GitHub webhook notifies a server to build the project.
  4. Server pulls down the changes from GitHub.
  5. Server builds the project.
  6. Server uploads the HTML files from the built project (along with any necessary assets) to a CDN.
  7. Server informs CDN to invalidate its cache.
  8. Site is live.

When a visitor accesses your site they are delivered static files through a content delivery network (CDN). There's no retrieving data through a database at run time because there is no runtime – it's actually a static site. But, it doesn't have to feel static because you have the ability to automate every step in the process, and you have have the freedom to do whatever you want at build time (e.g. using a CMS to build your pages).

Why should you care?

Okay, so JAMstack really just a different way of building and delivering content to visitors. Why does it matter to you?

Because being able to deliver the same information to a visitor using static files is significantly simpler and has the following benefits:

But that's not all …

The Best Part

The absolute best part of JAMstack is that it is a high-level methodology, not a formula dictation.

Think about what may seem like a synonym to JAMstack:

So if you want to use PostgreSQL or React or Nginx you don't fit within one of these communities. But with JAMstack, it makes no difference which site generator, content source(s), build tool(s), build platform, or CDN you use. The community is being built around the practice, not the products.

Getting Started

One problem with the high-level approach of JAMstack is that it can be a little intimidating to get started because there is no specific formula. Fortunately, there are some seriously great tools available.

The place to start is with Netlify. The creators of Netlify are the ones who've coined the JAMstack term. Netlify is super powerful and manages steps 3-8 of the deployment process outlined above. So all you have to worry about is:

And you can use the powerful features of Netlify on its free tier, so it is absolutely worth a try.

I hope you have success trying out the JAMstack approach. I am a huge proponent of it and plan to litter this site with articles on it. So feel free to drop me a line if you struggle to get started or have questions about the approach.

Did you learn something or find this article interesting?

If so, why not