What (the Hell) Is the JAMstack?
It’s no secret that the internet is a world of rapid, and near-constant, evolution.
Over the past few years, one of the most recent major trends in web development has been the so-called “JAMstack,” a new framework for creating static websites — or sites written in pure HTML and CSS.
Coined by the CEO of Netlify, Mathias Biilman, in a 2017 speech called “The Rise of the JAMstack,” the term refers to “a modern development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.”
In this, it serves as an alternative to the once-prominent LAMP (Linux, Apache, MySQL, and PHP) and MEAN (MongoDB, Express.js, AngularJS, and Node.js) stacks — one that includes a number of additional advantages like security, speed, and SEO (or search-engine optimization) benefits.
It also represents a development framework that eschews the use of traditional CMS like WordPress, Joomla!, or Drupal and all of the difficulties associated with them.
In this blog post, I’ll be exploring some of the key features of the JAMstack, while also providing some insight into the new technologies that have emerged in response to this new framework.
So, what is JAMstack exactly?
As stated above, the term “JAMstack” is a reference to the acronym JAM, which stands for JavaScript, APIs, and Markup.
Let’s begin by examining each of these terms in greater detail.
- JavaScript. This basically refers to any form of client-side JavaScript, be it vanilla JS or a framework like React or AngularJS.
- APIs. Application program interfaces (APIs) consist of all server-side processes and/or database commands that your application requires to function. These might include a payment processor like Stripe, a communication platform like Twilio or Sendbird, or even a CMS like Prismic.
- Markup. Markup is templated and built upon deployment using a build tool like Grunt, or any one of the available static site generators (SSGs) on the market. More on this below.
This all sounds terribly complicated, doesn’t it? Actually, the concept behind JAMstack is pretty simple.
In his overview of the framework, En Lerk Law of Gridhaus provided the following useful analogy:
“[A] traditional CMS is like a One-Man Food Truck. The owner handles all tasks in the kitchen by himself. He prepares the ingredients, cooks the food, and plates the dishes.”
By contrast, the JAMstack model operates much like a kitchen in which the tasks have been divided among multiple chefs. One is charged with food preparation, while the other cooks and another plates.
“The result is an efficient production line, with tighter quality control at each stage.”
The Benefits of JAMstack
Now that you hopefully understand a bit more about what JAMstack is and how it works, let’s delve a bit deeper into the benefits of this approach.
Security
This is a big one. By design, JAMstack sites are incredibly secure.
When users request a page from your static website, they just receive the HTML file for that page — it does not need to be built from various assets each time. Far fewer server interactions means less potential for attack, especially when compared to sites running on traditional CMS.
For example, according to WP White Security, “[M]ore than 70% of WordPress installations are vulnerable to hacker attacks.”
In addition, a particularly severe SQL injection vulnerability led Drupal to notify its millions of users in 2014 that they “should proceed under the assumption that every Drupal 7 website was compromised.”
Scary stuff.
With no databases, PHP plug-ins, or dynamic software running on your web server, the potential for malicious code injections and other hacks is enormously reduced for static sites.
Speed
The advantages of static websites in terms of speed can be astronomical.
With HTML generated in advance and database queries eliminated, your content can be served quickly from a global content delivery network (CDN) like Cloudflare or Fastly.
This means that visitors to your website will have your site files served from whichever node happens to be closest to them. Clients in London, for example, will pull from a European server, rather than one out in California or the Philippines.
As a result, writes blogger Aaron Autrand:
“[A] normal static site hosted on a CDN is often 10 times faster time-to-first-byte than a site built with a legacy CMS.”
In addition, Biilman tested a previous build of Smashing Magazine (which ran on WordPress at the time) against a static counterpart that he created and deployed on Netlify.
Biilman’s version loaded six times faster than the original!
So what does this mean for you, exactly?
Faster load times lead to reduced bounce rates, as visitors won’t be leaving your site due to slow loading times. This means more interactions, and ultimately, more conversions, as well.
Search-Engine Optimization (SEO)
Search engines favor fast-loading websites — that much has been true for several years now.
Google states that:
“A search result for a resource having a short load time relative to resources having longer load times can be promoted in a presentation order, and search results for the resources having longer load times can be demoted.”
This means that search engines like Google determine SEO rankings (in part) by comparing your website relative to your competitors and attributes points based on speed. It is worth mentioning, however, that these engines also account for user location, devices, and network.
The marked benefits of static sites built on the JAMstack framework in terms of page loading speed can also dramatically improve your SEO score relative to your competitors’ scores, especially taking into account the fact that most of them are probably still running traditional CMS.
How to Get Started
Alright, so I’ve managed to convince you that JAMstack is the way to go. But where to begin? With 457 static site generators currently on the market, and with more added each day, which is the best to get started with?
A good place to start is StaticGen, which contains a list of many popular SSGS that can be arranged and filtered by language, template, license, and GitHub stars.
Below, I’ll quickly run through some of the most popular.
Jekyll (www.jekyllrb.com)
Built in Ruby, Jekyll is far and away the most popular SSG, sporting more than 35 thousand GitHub starts at the time of writing.
It was created in 2008 by GitHub co-founder Tom Preston-Werner and features close integration with GitHub Pages, a hosting service that allows for quick deployment from a GitHub repository.
Often used for simple websites and blogs, Jekyll can easily be paired with cloud-based CMS like CloudCannon, Forestry, or Siteleaf, all of which enable content editors to modify site content without knowledge of code.
Popular websites built in Jekyll include Bitcoin, Sketch App, the UN World Statistics site, and the infamous HealthCare.gov (it wasn’t Jekyll’s fault!).
Hugo (www.gohugo.io)
Hugo is another popular SSG built on Google’s Go programming language.
An excellent choice for both blogs and documentation, Hugo is optimized for speed. One popular YouTube video demonstrates Hugo creating 5,000 web pages in about six seconds!
It is also incredibly simple to use and update. As is the case with Jekyll, there are a large number of themes available of Hugo — most of them Git repositories.
The framework has nearly 30 thousand stars on GitHub and is the driving force behind 1Password’s support page and Let’s Encrypt.
Gatsby (www.gatsbyjs.org)
Described as “a blazing fast modern site generator,” Gatsby is built in React, a popular front-end JavaScript library maintained by Facebook.
It’s a relative newcomer to the SSG, having been released in July 2017. However, it has grown tremendously over this short time span and is now extremely popular among the web development community.
While some of this is undoubtedly due to the popularity of React as a framework, much of it can also be ascribed to Gatsby’s stellar documentation and ease of use.
StitchFix, Braun, Figma, and Nike have all built their websites using Gatsby, which boasts 27 thousand GitHub stars
So what do you think?
Have you used any of these static site generators before? If so, what has your experience been like?
If not, which of these are you looking forward to trying out in the future?
Let me know in the comments section below. As always, I look forward to hearing from you.
