Blog

Read the news


20
November 2018

JAM? Stack...?

Travis Reynolds | General

5 min read

JAM stands for JavaScript, API's, and Markup.

Don't worry, I will explain...

JavaScript is the programming language of the web (often abbreviated to JS). It is used along side HTML and CSS to create interactive websites, and is used in some way in pretty much all websites. For example, it is used in this website for the contact form. When someone submits that form, JS is used to check that all necessary fields have been filled in, that they have checked the Recaptcha correctly, and then it sends that form on to the API.

API stands for Application Programming Interface. It is basically a way of letting services/programs 'talk' to each other behind the scenes. For example, interacting with a database. Continuing with the scenario above, our API is on a server. When it receives the contact form's data, it sends us an email notifying about the submitted form, and adds the for data to the body of the message. To learn more about API's, read on here.

Markup is the content - what the user sees when they browse your site. This also often refers to Static Site generators, and Headless CMS's. Static Site Generators (SSG's) are often used to create a JAM Stack site. They are similar to a CMS, in that they use templates, and fill those templates with content you have created. However, they have a 'build' step. Once you have created/edited your content, you build your site, and it outputs a stack of static files. This would usually be done on-the-fly with a traditional CMS. An example SSG is Gatsby - which this site is built with.

A Headless CMS is a content management system with no 'frontend'. A SSG will access the data from the Headless CMS as build time. Examples of Headless CMS's include DatoCMS, Contentful, Prismic, or you can even use WordPress, Shopify etc.

Examples of JAM Stack Sites

Cirrus Creative (I mean...)

Sequoia

SendGrid Docs

Figma

AirBNB

So, what are the advantages of this?

There are quite a few advantages, compared to the traditional CMS stack (e.g. WordPress, Drupal, Magento).

It is important to note that although I refer to it as a static site, this doesn't mean the site is not interactive, it simply refers to the state of the files. You can do anything a traditional CMS can do, and more.

TLDR;

A JAM Stack site will increase performance - site speed and load times - increase security, can handle scaling easily and doesn't need expensive hosting for any of the previous. Check this blog post for an insight into this site's performance.

Pages are created a build time, rather than on-the-fly.

The site is built as soon as you add/edit content, then the static pages are hosted on a server. This means a user is immediately served a pre-built page when they request it, rather than waiting for the server to get the page template, call the database to get the saved content, put it in the template, then bake it into a html page.

Caching

As the site is serving you pre-built pages, these and its assets (images, Fonts, JavaScript) can be cached. (Stored in your web browser for future use). So when you visit the site again, if the content hasn't changed since the last time you visited the site, your browser will serve the website from its cache. This is obviously a lot faster than waiting for the pages and assets to download from the server again. These pre-built pages can also make use of a CDN, (Content Delivery Network) which will dramatically increase your sites performance.

Security

As the site is made up of pre-built and hosted pages, the lack of databases, plugins, and dynamic software running on a server decreases the potential for code injections and breaches. We've all heard the horror stories of somebody's WordPress site being hacked and changed. That won't happen with a static site.

Hosting / Scaling

Because the site is made up of a stack of static files, it can be hosted anywhere. It doesn't need a database, so no need to pay for expensive hosting anymore. And it can handle scaling easily - just add a CDN in front of your site, and it will handle hundreds and thousands of visitors with ease. No more Black Friday crashes.

So, there must be some disadvantages?

...I haven't yet found any.

Sounds great for new sites, but what about an existing site?

Good news! A Static Site Generator can use anything for content. Most often, and easiest to use, is simple Markdown files. The SSG processes these, and fills the templates with the content from them.

However, it can also connect to many other data sources, such as WordPress, Shopify, Drupal, and use their content. So, if you have an existing WordPress site, you can connect the SSG to it, and it will pull all your existing blog posts and create a static site, greatly improving on performance. Imagine the SSG as a new 'frontend', but you keep the WordPress 'backend' to edit content. See here for an example of this. This is using WordPress as a Headless CMS.

Where can I find out more?

A good place to start would be jamstack.org, or read a more in depth article here.

I'm interested... how will it benefit my site?

Send us a message with your site URL, and we will reply as soon as possible with how the JAM Stack could help improve your site.