What is JAMstack?

Share

If you haven’t heard of JAMstack yet, don’t be worried.

As an IT company, we’re always trying to find ways to bridge the gap between the world of development and what our clients do.

This week we’re going to be taking a look at a development architecture that’s been taking our world by storm since it came to life in 2016 – JAMstack itself.

So, what is JAMstack?!

To put it as simply as possible, JAMstack is a mashup of some of our favorite things – JavaScript, APIs, and Markup.

As a web development architecture, it’s there to make scaling up easy as it means you’ll no longer have to rely on a web server.

circles with JAM letters inside
https://strapi.io/blog/jamstack

JavaScript is what’ll handle any of the dynamic programming during the request/response cycle.

All server-side databases or database actions are then abstracted into reusable APIs, which are accessed through HTTPS with JavaScript.

Finally, markup is something that should be pre-built at deploy time.

The benefits

Just like any workflow, you have to be sold on the benefits before you start to roll it out.

Luckily, there are a number of awesome benefits that JAMstack can bring, just like:

  • 🚀 Ultra Speedy Performance – you can serve pre-built mark-up through your CDN.
  • 🛡️ Better security – no need to worry about server or database vulnerability.
  • 💲 Less expensive – hosting static files is so much cheaper, and sometimes it’s even free!
  • 🖥️ Improving your developer experience – JAMstack allows front end developers to focus on what they do best – front end development. Without being tied to a monolithic architecture, development is usually quicker and more focussed.
  • 📈 Scalability – should your app take off, the CDN does all the hard work for you, compensating for the heavier load.

What does a JAMstack workflow look like?

Just like with any development practice, JAMstack has its own special workflow.

As you’ve probably gathered, it varies a bit from a traditional development workflow, so let’s take and compare the two.

traditional workflow vs jamstach workflow
https://snipcart.com/blog/jamstack

Traditional Development Workflow

  1. Developer prepares – writes the website code, and then ships it to the server.
  2. Sever produces – renders HTML based on the developer’s templates and content from the database.
  3. The client visits the website and waits till the website is rendered and then provided to him.

JAMstack workflow

  1. Using Static Site Generator (SSG), the developer writes the code and then ships them to the CDN as rendered HTML.
  2. The CDN then serves the rendered website.
  3. Your client can visit the website that is already rendered without waiting for the server.

First appearances can be deceiving, as these workflows don’t look as different as they really are.

To go into a bit more detail, building and hosting are coupled in traditional workflows, whereas they’re decoupled in JAMstack.

Traditionally, when a user is requesting a page, he will be served after a series of interactions between the database, backend code, server, browser, and caching.

With JAMstack, he gets served directly from the CDN. Traditionally, servers and databases have to be maintained (often via FTP) whereas JAMstack allows it to be pushed through Git and done through modern tools like static site generators.

Most popular JAMstack Static Site Generators

You can use different Static Site Generator, based on the language you use for coding.

The most popular ones I’ve listed below:

NameLanguageComment
Gatsby React / JavaScript The fastest-growing open-source project for building blazing fast websites and apps. Big ecosystem of resources, plugins, connectors to various data sources, handling images, PWA support, etc.
HugoGoHugo is another leader of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
JekyllRubyOne of the originals in this generation of static site generator.
NextReact / JavaScriptNext can do static site generation, but it can also run live in Node and do server-side rendering on the fly (“Isomorphic JavaScript”).

JAMstack best practices

Having just taken a look at workflow, there are a number of JAMstack best practices, which you might recognize from the workflow above!

It’s important to keep these in mind as they’ll help you get the most out of your project. These are:

  • Using a CDN – by using a content delivery network, all markups and pre-built assets can be easily served, which increases scalability and performance.
  • Atomic deploys – helps eliminate the maintenance window so your app/site is always available.
  • Cache invalidation – is done by the CDN, which means whenever your build is uploaded, it goes live in an instance.
  • Version control – by doing everything in version control, you’ll get to see every tiny change and trace who did what.
  • Automated builds – this works by notifying your server when a build is required. The server then builds the project, updates the CDN, and then makes the site live.

Is my site built with JAMstack?

If you’re unsure if your site is built using JAMstack, there are a couple of ways to check.

Websites that are built using a CMS like WordPress or Drupal isn’t JAMstack, and neither are monolithic-server apps that rely on Ruby, Node, or other similar back-end languages.

If you’re still not sure, though, we’d definitely suggest having a word with your development team.

How can Pagepro help?

We love getting our teeth into new and exciting projects, and helping your app or website come to life is no exception.

Our team is well-versed in JAMstack (especially Gatsby), and we’re here to help make it accessible to you and your company, too.

So, if you’d like to know more, how about getting in touch? Even if it’s just a friendly chat, we’re here for you.

Need help with JAMstack Gatsby project?

Comments
Leave a Reply

View Comments (0)...

Related articles:

Why is Gatsby JS Good for Google Rankings?

Hosting Gatsby & Storybook on GitLab Pages