Jamstack Logo

GRANDstack – GraphQL, React, Apollo, Neo4j Database

LAMP – Linux, Apache, MySQL, PHP

MEAN – MongoDB, Express.js, Angular, Node.js

The list above is just a few examples of some popular tech stacks. Tech stacks are practical combinations of technologies and architectural patterns used to create robust solutions. A relatively newer stack (new when you compare it to stacks like LAMP, which was first coined in 1998!) is the Jamstack. Let’s get jammin’ with the Jamstack and find out what it is, what it can do, and why you might want to use it for your next web project.

What is the Jamstack

The term Jamstack was first coined by Mathias Biilmann, a co-founder of Netilify. The JAM in Jamstack stands for JavaScript, APIs, and Markup.

  • JavaScript: JavaScript in the Jamstack resides on the client-side, handling responses and requests. No specific implementation of JavaScript is required. This opens up the usage to pure JavaScript, JavaScript libraries such as React or even JQuery, and popular JavaScript frameworks like Angular and Vue.js.

  • APIs: Server-side processing, services, and database commands are all requested and received via client-side API calls. The APIs can be 3rd party or custom-made.

  • Markup: Markup is simply HTML files. The HTML can be manually crafted or generated as a byproduct from another source such as Markdown. Markdown is an extremely popular text formatting syntax that can be compiled into HTML. This compiled HTML ultimately becomes what end users see on the final website or app. Many build tools are available to compile Markdown into HTML, including Webpack, Gulp, and old reliable Grunt. For a more comprehensive and complete solution, there are frameworks that can compile an entire website or app. More on frameworks later.

Jamstack Architecture

The Jamstack is a cloud-native web development architecture. Cloud-native means the Jamstack inherently takes advantage of the resources and services of cloud platforms. In Jamstack’s case, the plain old HTML and JavaScript are delivered from CDNs that serve the files from locations closest to the end-user. The files are also cached for additional speed benefits. And speaking of benefits…

Stack Benefits

While many tech stacks already focus on web technologies, Jamstack brings a solid set of benefits that make it an appealing option for web projects.

  • Speed – Because a Jamstack website or app is compiled into simple HTML, CSS, and JavaScript, there is no server-side processing involved. Jamstack, because of its simple composition, benefits from being able to have the entire website or app cached and loaded from CDN services.

  • Familiarity – The Jamstack is based upon tried and true technologies. Because Jamstack is technology agnostic, it allows for various approaches to generate the final assets. Very simple or robust methods can be taken to create the final Jamstack solution.

  • Scalability – As mentioned earlier, a Jamstack website or app enjoys great speed benefits when coupled with a CDN service. CDN services allow Jamstack websites and apps to scale to handle heavy loads easily.

  • Security – Because Jamstack websites and apps have an architecture with no direct access to databases or other services, an attack vector is removed. Developers are still responsible for applying trending practices to ensure that APIs are secure and sensitive systems are protected.

  • Community – The community around Jamstack continues to grow each year. As a result, there are many resources, tools, and, most importantly, people involved in the Jamstack ecosystem.

The benefits of utilizing a Jamstack solution have resulted in significant real world improvements. For instance, Smashing Magazine has seen a 10X improvement in their website’s performance, thanks to switching to the Jamstack.

Frameworks to the Rescue

Jamstack websites and apps can be created manually or via a framework. Below are a few prevalent frameworks:

  • Nuxt.js: Nuxt.js is built with Vue.js development. It’s simple and powerful.

  • Gatsby: Gatsby is a React-based framework that has an extensive and feature-rich plugin system.

  • Hugo: Claiming to be, “The world’s fastest framework for building websites,” Hugo is a Go-based framework that excels at rapidly creating websites and apps.

  • Jekyll: Jekyll is the framework that powers GitHub Pages and is used to generate websites and blogs.

These frameworks can generate assets that make up the output of a Jamstack website or app. These frameworks are commonly categorized as static site generators. A comprehensive list of Static Site Generators can be found at the appropriately named site, Static Site Generators.

Hosting Options

Because Jamstack web apps are a collection of HTML, CSS, and JavaScript files, they can be easily hosted on various platforms. However, there are a few hosting options that are tailored to leverage cloud-native web technologies. These hosting options usually have one prominent feature in common, CDNs. Content Delivery Networks or CDNs provide the fastest experience for end-users by serving files from locations closest to users.

Each hosting option provides a wealth of features, in addition to providing a platform for hosting the Jamstack website or app. For a list of some additional hosting options, check here.

Outie

The Jamstack is an approach to web development that aims to shift web application architecture from server and client to only the client. The Jamstack brings a slew of benefits that both developers and end-users will surely appreciate. However, like anything, Jamstack is not a silver bullet, and there are use cases where it is not the ideal option. As always, your mileage may vary.

Resources

Find below some additional resources to continue learning about Jamstack: