What is the JAMstack?

According to jamstack.org, JAM — which stands for JavaScript, APIs, and Markup — isn’t about specific technologies, but rather:

a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

That all sounds great, but how is it different from its predecessors, how does it work, and how do I get started?

We’ll answer all these questions, in simple language that doesn’t assume you’re a pro.

JAMstack vs Traditional Tech Stacks

Traditionally, the concept of a tech stack has referred to a set of specific technologies that work together to deliver your website, app, service, etc.

Some common examples of these are:

• LAMP: Linux, Apache, MySQL, PHP
• MEAN: MongoDB, Express, Angular, Node
• MERN: MongoDB, Express, React, Node

JAM is different as each letter refers to a layer and not a particular technology. JavaScript is used to define the generator, which is responsible for assembling your site. APIs are used to pull in data from a variety of different sources, and markup is used to define how each page should display.

This means that whether you’re using GatsbyJS (React-based) or Gridsome (Vue-based) they’re both JAMstack implementations.

How JAMstack Works

What makes JAMstack special is that all the magic happens before a single user accesses the site. The generator builds the pages on deployment, rather than on demand, so what gets distributed are static pages.

Your development is going to be taking place locally, which is different than building on a web-based platform like WordPress. Each JAMstack implementation has a few hallmark qualities that work together:

• Components: Think of a component as a Lego piece. Components are the building-blocks of JAMstack frameworks. They’re reusable UI elements that can be imported or created yourself.
• Layouts: If components were chemical elements, layouts would be molecules. They are arrangements of components that act as a template for the data that will be pulled in.
• Pages: A standalone layout that is not meant to be reused. Think about the homepage or a contact page. These are still built with components.
• Plugins: Extensions for the basic framework, plugins let you add functionality to your site without bloating the core framework. Some frameworks consider themes plugins.
• Config: Every framework is going to have a config file of some sort. This file will hold high-level information, such as the site name, and common links as well as vital settings for plugins.

You can use as many or as few of these parts as you wish. It won’t be as easy to maintain and extend, but you can get by with a handful of pages and a basic framework config to start.

Your framework will have a dev and build command. The dev command will be used when developing locally. It allows you to view your site locally and should benefit from hot reloading, which means the site will automatically reload when a change is saved to a file.

Once you’re ready to go live, run the build command to generate static pages in a distribution folder, which functions as the base directory for your site.

How to Get Started

By now you’re sold, you want to try out a JAMstack. So how do you proceed? The first step is overwhelming for many — it was for me. Unless you’re already well-versed or have a specific framework requirement, the reality is they’re all the same for a beginner.

If this is your first exposure, I’d recommend doing just a little bit more research, but not too much or you’ll fall into analysis paralysis.

Your first decision should be the underlying framework. I consider this a toss-up between React and Vue. React has been around longer, is more mature, and has a larger community and resources overall. Vue is newer and simpler, and while there are not as many resources the community is equally vibrant.

Once you make this choice, then you have to pick your flavor of static site generator (SSG). If you’re going the React route, Gatsby is the most popular and there are a plethora of tutorials online. If you go Vue, check out either Gridsome or Vuepress — the latter being used for Vue’s official documentation.

Whichever you choose, I recommend building a component, placing it in a layout, and setting up a data import (Markdown is the simplest) because this is where you’ll see differences in frameworks.

Don’t get overly enamored with themes and starter pages that you find, there will always be new ones. The question you need to answer is: does working with this framework resonate with me?

Best of luck getting started. For what it’s worth I’m in the middle of switching over to Gridsome because I enjoy the simplicity of Vue. Share your thoughts and feedback below!