The Promise of JAMStack

JAM stands for JavaScript, API, Markup. It illustrates a trend in creating web applications that have specific features. A more recent article about the Jamstack has been published: Jamstack in 2021

Pedro Duarte, author of the excellent website JAMstack.wtf forwards the following promise about the JAMStack:

“JAMstack is revolutionizing the way we think about workflow by providing a simpler developer experience, better performance, lower cost, and greater scalability.”

Pedro Duarte continues by providing a guide that, “will help you understand why it exists and how to get started.”

He provides context, examples, and resources in this guide built with Gatsby, hosted on Netlify, and open-sourced on Github. This idea is to gather the concept of JAMstack as a straightforward guide to encourage other developers to adopt the workflow.

I totally recommend anyone interested in a better understanding and getting started with JAMStack to include it in their journey forward. Here is a curation we made on the subject from different sources.

Table of Contents:

What is the JAMstack?
Back to basics static
So how to get started?
List of curated resources
Example with Strapi

What is JAMstack?

According to the community website JAMstack.org, the JAMstack can be defined as a Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

3 criteria define if your project follows this paradigm shift:

• JavaScript should be managing any dynamic programming on the client-side, through plain Javascript, frontend frameworks, or libraries.
• API: on a server-side, the processes and database actions must be made available through APIs, requested with Javascript over HTTPS. The APIs can be created using third-party services like Strapi or be custom-built.
• Markup: the HTML templates should be prebuilt at deployment time using a static site generator for example.

Back to basics static

JAMstack is not only simplifying the workflow for developers but also has many benefits.

• Ultra Speedy Performance : Because the static pages are prebuilt and served to your browser via a CDN, the time to the first byte is minimized. Lots of functionalities that were usually processed in the back-end are now managed on your browser side.
• Higher security: Stop worrying about the database or server-side vulnerabilities. You have no need for a server-side language to be executed, so fewer ways to inject code or get attacked.
• Easier scalability: Because your files are served through CDN, when your app gets more requests, the CDN easily compensates for higher traffic.

And last but not least, because the stack is Javascript-based, focused on the front-end, your frontend developers are not tied to a monolithic architecture, resulting in a better developer experience and a happier team. And who wouldn't want to have a happier team?

Kudos to Hermes Rivera on Unsplash for this photo.

Benefits of Jamstack

Jamstack offers significant advantages for modern web development.

Enhancing Performance with Static Site Generation

Jamstack delivers faster content to users by generating static websites. Static files served directly from a Content Delivery Network (CDN) reduce load times and improve user experience. This eliminates the need for server-side rendering on each request, boosting performance.

Improving Security by Minimizing Vulnerabilities

Jamstack minimizes the attack surface by reducing server-side processes. Static sites don't depend on traditional servers or databases at runtime, resulting in fewer points of vulnerability. This helps protect against threats like SQL injection and server-side exploits.

Achieving Scalability for High-Demand Sites

Static sites handle high traffic volumes without performance loss. Serving pre-built files from a CDN allows websites to scale to meet user demand, ensuring Jamstack sites remain fast and reliable during traffic spikes.

Embracing Static Site Generation

Jamstack is not only simplifying the workflow for developers but also has many benefits.

• Ultra Speedy Performance: Because the static pages are prebuilt and served to your browser via a CDN, the time to the first byte is minimized. Lots of functionalities that were usually processed in the backend are now managed on your browser side.

• Higher Security: Stop worrying about database or server-side vulnerabilities. You have no need for server-side languages to be executed, resulting in fewer ways to inject code or get attacked.

• Effortless Scalability: Since your files are served through a CDN, when your app gets more requests, the CDN easily compensates for higher traffic.

And last but not least, because the stack is JavaScript-based and focused on the front end, your frontend developers are not tied to a monolithic architecture, resulting in a better developer experience and a happier team. And who wouldn't want to have a happier team?

Getting Started with Jamstack

As a frontend developer, you need to know your JavaScript and how to make use of APIs. Then you have to choose the frontend technology you feel like using.

You can use JavaScript frontend frameworks like React, Vue, or Angular. Most of them don't technically output static HTML files, but it's possible to do so with experience or by using static site generators developed on top of them.

In short, static site generators (SSGs) take source files and generate an entirely static website, ready to be delivered to viewers.

There are many options available to choose from, and it might be difficult to see through the plethora of static site generators available, as all are more or less relevant depending on your use case.

Among them, Gatsby is a progressive web app generator built on React that loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible.

Next.js is a lightweight framework for static and server-rendered React applications, also built on React.

Nuxt.js is a framework for creating Vue.js applications; you can choose between Universal, Static Generated, or Single Page Applications. Technically not exactly an SSG, you can still use the provided deployment option called nuxt generate to build a statically generated Vue.js application.

Gridsome is a Vue.js-powered, modern site generator for building the fastest possible websites for any Headless CMS, APIs, or Markdown files.

There are many others, like Hugo or Jekyll. You can have a look here or here to have an idea of which solution would best suit your needs.

Headless CMS for Backend Functionalities

You may need your content to be edited and maintained after the website is built. This task will probably be someone non-technical's job, and to ease their job, you might want to use a headless CMS.

Many headless CMSs are available on the market today to do what they do best: manage content!

Strapi 5's specificity is to be open-source, based on Node.js and designed by developers for the usage of frontend developers. Check us out :-)

Deployment

Now that your app is built, it has to live somewhere. The good news is that the platforms for hosting static sites are affordable, and some of them are even free. You can find a list here.

We did a tutorial for Heroku, and Ken Berkeley did an awesome job explaining his workflow for AWS.

Deployment

Now that your app is built, it has to live somewhere. The good news is that the platforms for hosting static sites are cheap and some of them are even free. You can find a list here.

We did a tutorial for Heroku and Ken Berkeley did an awesome job explaining his workflow for AWS.

List of curated resources

About JAMstack

• JAMstack.org
• JAMstack.wtf
• New to JAMstack? Everything You Need to Know to Get Started
• WTF is JAMStack?

Services

• Static Site Generators Lists
• Headless CMSs
• Third Parties services for static sites

Communities

• JAMstack on LinkedIn
• JAMstack on reddit

Example: using Strapi to deliver static content

In the following example made with the JAMstack, we are using Strapi to deliver the content through its API.

Javascript

The Javascript code will allow to request data from the Strapi API:

Front-end

Below, you can see the content requested:

Did you like this article? Do you think it's missing something? Feel free to comment and start a discussion below. By the way, we are looking for developers with a taste for writing killer content for guest posting so if this rings a bell for you, feel free to reach out!