The ERA of the JAM stack and SSG

Date: Monday February 17th, 2020


The JAM stack refers to JavaScript, APIs and Markup. It’s a new philosophy of building web-based software. Files are pre-rendered and where possible served by a CDN, removing the need from servers.

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

Where does “J-A-M” come from, you may ask? From these three core concepts:

  1. JavaScript:Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client.
  2. APIs: All server-side functions or database actions are abstracted into reusable APIs, accessed over HTTPS with JS. Be it SaaS, third-party services or custom-built.
  3. Markup: Templated markup should be prebuilt at build time, usually using a site generator for content sites, or a build tool for web apps.

So what does this mean?


Well if you’re reading this your likely coming from a few different paths, you are either working with a technology such as CMS (Wordpress, Drupal, Umbraco) or you are creating Webapps/Websites with frameworks such as Angular, React and more.

Now there is nothing inherently working with working with a CMS, it’s just that utilising the JAM stack provides you freedom! Want to work with WordPress still? That’s cool we can connect to the Wordpress API and use Gatsby.JS as a front end!

No longer are we bound to the pains of developing in the Wordpress hooks and loops, we can serve our content how we want to serve it, whilst still giving the client the ability to update their content. Today when looking at a content management system for the modern age, you should look at any CMS that ca provides a headless experience for you. Look at Ghost, Strap, Contentful and more.

Checkout out our blog on headless CMS Options for more details on this

This is all for the best, de-coupling your content and your front end is the correct architecture to move to, you have freedom to change either side with less effort and to better suit your needs.

Moreover as JAM stacks sites generally use a SSG (static site generator) like Gatsby,they are secure, faster and can ship files from a CDN.

Here's a quick primer to understand key differences between the two approaches:

Jam

This graphic is a very stripped-down view of what’s actually going on under the hood, however it's a good visual example

Traditional workflow


→ Building and hosting are coupled.

→ A user requests a page. The file gets processed and served following a (long) series of interaction between a database, backend code, server, browser, and layers of caching.

→ Core updates are pushed to production servers, often through FTP. Database must be maintained or updated.

→ Content updates are pushed through traditional CMS, like WordPress or Drupal.

JAMstack workflow


→ Building and hosting are decoupled.

→ A user requests a page. The file is already compiled and gets directly served to the browser from a CDN.

→ Core updates are pushed through Git; the site gets re-built entirely via modern build tools like static site generators.

→ Content updates are pushed through Git or a static site/headless CMS.

Benefits for developers


We often break down JAM stack benefits in four main categories: better performance, higher security, cheaper scaling & better developer experience.

So how can this help your business?

Turning technical features into business benefits

Let’s take the removal of database queries, and the CDN-based content serving for instance. We can boil this down to performance.

Well first, you could check a site speed test app like Pingdom or PageSpeed Insights and bring up two very similar sites (or the same one)—one static, one dynamic.

You would no doubt see the difference in results, and how the quicker loads time can better enhance your site and SEO, especially if you run the same sites through lighthouse.

Simplified architetcure

Now for the withdrawal of server-side parts, which epitomizes the reliability argument.

You know that a dynamic site is like a six-story house of cards, more vulnerable to collapse because it has more parts, more complexity to its structure. A static site, on the other hand? Make it a 1 story house of cards.

Super easy to build and maintain. :)

By ditching the big web server, the databases, the plugins, and the constant maintenance, we’ll save money and much compleixty

Hard to argue with that!

So where do you get started?


Well this depends on your comfort levels, if you haven’t had any experience with JavaScript frameworks, I recommend Angular and React tutorials.

Following that the best and what I feel is the most supported place to get started is using Gatsby.js and Netlify.

There are plenty of starters and tutorials on there to get your started. Enjoy, and reach out to me with any Gatsby or JAM stack concerns

Back to News

info@getjuicy.co.uk

01425 476077

7B4 Kingsburys House
Fridays Cross Mews
Christchurch Road
Ringwood
BH24 1DG