What is the JAMStack?

What is the JAMStack and is it the future of building websites?

Over the past few years, you might have heard the hype surrounding the “JAMStack” – A new buzzword that’s entered the realm of web development. In this post, I’m going to try my best to explain why the hype is definitely real and what opportunities it presents.

The JAM Stack is a cloud-based web development architecture based on client-side JavaScript, reusable APIs, and markup. Developing using this stack means that we no longer have to rely on dedicated servers to display dynamic content. It also removes the need to perform expensive SQL queries across huge databases each time someone visits your website. In a nutshell, it makes our websites scaling capabilities pretty much limitless at the fraction of the cost of traditional hosting.

Main aspects of the JAMStack:

Javascript: Dedicated to handling any dynamic programming during the request/response cycle. This runs entirely on the client-side and can be any frontend framework, library, or even vanilla JavaScript.

APIs: All server-side processes or database actions are abstracted into reusable APIs, accessed over the HTTP protocol with JavaScript. These can be custom-built or leverage third-party services.

Markup: Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps.

The JAMStack is able to separate the frontend of the website from the backend. The backend can be any source such as an API, CMS, or Markdown. This means that for most basic web projects, we are capable of serving all content directly via a CDN.

This stack is a direct solution to the negative aspects of the “legacy internet.” Those aspects being performance, security, and scaling. Building responsive websites and applications that work across all devices and screen sizes is essential to making sure your website and application is “future-proof”

Why is it better?

• Performance: Pages are pre-built during the deployment process of the website instead of each time a request is made to a database. By serving Javascript, APIs, and markdown, we see a huge increase in website performance.
• Security: We minimize the attack endpoints on our server by only serving static files. “Old-school” server-side processes are now abstracted into microservice APIs.
• Scalability: When a project amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. CDNs are perfect for this and often include scaling in all of their plans. We don’t have to worry about upgrading dedicated machines to serve our dynamic content.
• Cheaper: The JAMStack can make things much more cost-effective when building new projects. There are tons of hosts out there that will host static content for free. We will get to that in a little bit. *(Click here to jump to the hosting section)
• Everything Lives in Git: With a Jamstack project, anyone should be able to do a git clone, install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs. This reduces contributor friction and also simplifies staging and testing workflows.
• Modern Technology & Build Tools: React, Node.JS, Babel, PostCSS, Webpack, and friends.

 

Traditional CMS vs JAMStack

Here are the main differences between the traditional way we handle content management, versus how the JAMStack handles it.

Traditional CMS: A user loads a website, the browser makes a request, there might be some resources located on a CDN, although you’re most likely hitting an origin server, which might be located behind load balancers. This request is then routed to the webserver and then sent to the database. The database returns data that is assembled into a page view. A CDN may cache the page view, then loads for the user. Phew. Keep in mind this is a super simplification of the entire process, but you get the point.

JAMStack: A user loads the web page, a request is made to the CDN, and then the CDN returns everything. That’s it.

Get Started

In order to implement the JAMStack into your next project, you will 100% need a decent amount of development experience. You’re going to have to understand these following technologies at the very minimum. HTML5, CSS3, Vanilla Javascript, ReactJS, API Development, REST API Experience, Git, Server Deployment, Static Site Generators, and Content Management Systems. *If you do not have development experience or a qualified developer able to do this work I wouldn’t bother trying to implement a stack like this.

1.) Pick a headless content management system:

After you have a grasp of those, you should decide what kind of content management system you are going to use. You need to make sure this is a “headless CMS”, meaning that it is a CMS that makes content accessible via a REST API.
I would suggest one of the following:

• Netlify CMS – Publish your content in your projects git repo!
• Forestry
• Strapi – Open source Node.js CMS
• Ghost – Great for blogs
• Contentful *

*Not open-source

You can find more content management systems to use at headlesscms.org

2.) Pick a Static Site Generator

Here are some popular options for static site generators.

• Gatsby
• NextJS
• Hugo
• Eleventy

I suggest using Gatsby if you’re new to static site generators and the JAMStack. It’s the most popular generator so the community is pretty huge if you run into any problems. Most of the basic errors are well documented on StackOverflow. Gatsby is also built on ReactJS so you’re working with the latest and greatest web technologies.

3.) Choose a provider to host your website/application

You can use the following providers to host your next web project: Netlify, Github Pages, S3 Bucket, Microsoft Azure, Google Cloud Platform, AWS Amplify. I would personally suggest Netlify for basic websites. For more advanced projects I would suggest Amazon AWS services / Google Cloud Platform.

*Github Pages is awesome but limits you to only 1 website per account. There are more and more services coming onto the market all the time, so I’ll keep this list updated to the best of my ability. This technology is very new and changing all the time. You can view some tips and tricks to getting up and running over at the official JamStack community website.

If you’re looking for some help with your next web project, you are able to schedule a time to speak with me here!