It is time to move to the JAMstack

AuthorLoke Carlsson

Date

5/6/2019

Time4 min read

You might have heard the term JAMstack if you're into web development at all. It is similar to the LAMP or MEAN stack, which describes a certain technology stack used in web development. But if you are unsure what it is all about, JAM stands for JavaScript, API, Markup. Some core characteristics of the JAMstack includes:

Great performance
High security
Free or very cheap to host
Good developer experience

This is the future way of building websites.

Pick a framework of your choosing, for example Gridsome, Gatsby or Hugo, or even go vanilla JavaScript if that's your thing.
Add a headless CMS which you like, or simply use local markdown files directly in the project, for example Contentful, Netlify CMS or Forestry.
Connect the project to a hosting service, for example Netlify or Now.

And you are done!

What is not JAMstack then?

When you are running a site with a server side CMS, most popular examples of this setup includes WordPress, Drupal and Joomla.

If you have a single page application with isomorphic rendering, in other words a React application with server side rendering.

Or if you have a site that runs with a backend language like Ruby on Rails, Node.js or Java.

Best practices

There are a few best practices which will make the most out of you JAMstack site if you stick to them. These guidelines and best practices are mostly standard when you are working the most popular and largest frameworks and tools, but these are some key points to keep in mind when working with JAM.

Have your entire site live on a CDN, since JAMstack sites are just static files that gets generated on build, you can easily host the files on a CDN which gives you way more speed and performance compared to an application living on a server. A CDN also gives you way better geographical covering, giving you low latency whether you access the site from Alaska, Netherlands or New Zealand.
Your entire application should be able to be version controlled on a service like Github, it should be easy to just clone the repository, install the dependencies and be good to go. There should not be any need to clone databases or setup complex development environment.
You want to utilize modern build tool to help you use modern web standars while still be able to support old browsers. Here you have tools like Babel and Webpack to help with transpiling your modern ES6 and such to plain old JavaScript that old browsers can interpret.
Automated builds are very much needed when your site needs to be build every time you change the application. This can be handled with webhooks, or more convenient, use a service that provide this functionality right out of the box. Two of the most popular services, Netlify and Zeit's Now is offering this.
Instant cache invalidation is a good way to keep your users updated with fresh content as your builds go live. There are different ways to achieve this, but again popular services like Netlify offers this out of the box.
Functionality such as dynamic comments, authentication and additional dynamic fetching of data is all done through external APIs. These things load asynchronously on the client only.

Example workflow

Developing your application local
Commit your changes to Github
Automatically triggers an build on Netlify via webhooks
Static files are optimised and minified
CDN is updated and cache is invalidated

Getting started

1. Pick your Static Site Generator

There are several great SSG's out there, but some of the most popular ones are includes Gridsome, Nuxt, Next, Gatsby, Hugo and Jekyll. You can find SSG's on this site: https://www.staticgen.com/.

2. Find a hosting service

The most popular host today is by far Netlify, but also Zeit's Now and Github Pages. You can find out more about hosting services here: https://www.thenewdynamic.org/tools/hosting-deployment/.

3. Use your preferred version control service

The most widely used and best supported service is Github which is what I can recommend you chose if you aren't invested into another service already. Microsoft has done a great job improving Github, and if you are using Visual Studio Code there are great integrations between them.

4. Start hacking! 🎉

Now you can start coding and when you push your commits to Github, Netlify will automatically build and deploy your application, simple as that!

Vendor lock-in

Since you are working with static files once your web app is built, you wont have any problems deploying anywhere. It is very easy to move your application to a new hosting service.

You also have the advantage when dealing with a headless CMS to more easily be able to move to another service since it is completely decoupled from the frontend.

You also have the option to work with local markdown files in the project and using a service like Forestry to interact with the content as if they were located in an external CMS. This way you will have even more freedom of how you chose to interact with your content.

Start using Gridsome

I have been a big fan of Vue.js for a long time and love the things Gatsby.js is providing. After I found out about Gridsome, I can say it's the perfect match for me. Providing a great developer experience giving you powerful tools when working with data from example a CMS. GraphQL is used to give a unified layer of which you interact with to fetch data from all kind of sources. Much can be said about how great Gridsome is, but I will instead leave it up for you to try it out yourself and see how awesome it is!