JAM Stack: How Modern Web Apps Are Developed

By Bineli Manga, Alibaba Cloud Tech Share Author. Tech Share is Alibaba Cloud's incentive program to encourage the sharing of technical knowledge and best practices within the cloud community.

Introduction

With the rise of web frameworks (frontend and backend) and web technologies (databases and servers), the development of complex web applications has been improved to meet today web apps needs, including scalability, performance, and security.

However, when it comes to website speed, no framework can beat static websites. This is the reason why some organizations prefer to reuse standard web technologies (HTML, CSS, and JS) to build their websites. Theses are not new technologies, but in the JAM stack, they are efficiently used to address the issues faced by actual web apps.

In this tutorial, we will explain you what the JAM stack is, its benefits and the best practices when working with the JAM stack.

1. What Is the JAM Stack?

When we talk about "The Stack," we no longer talk about operating systems, specific web servers, backend programming languages, or databases.The JAM stack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

https://jamstack.org

JAM = Javascript + APIs + Markdown. The JAM stack is the combination of technologies that you already know in a new manner that enables web applications to be more scalable.

1.1. Javascript

The dynamic behaviour in the app during the request/response process is handled by Javascript ptogramming language in the frontend side. For this, you can use any vanilla Javascript, a JS library or even a JS framework.

1.2. APIs

All the server side services (like databases and other applications) are serverd to the frontend, through APIs accessed over Https with javascript. These APIs can be built using any server side language and library, or even use other services. The APIs exposed by the server side can be Rest, GraphQL or even SOAP.

1.3. Markdown

We stated that the JAM stack uses the Html along with JS and CSS, we have to clarify that the Html is generated at deploy time based on Markdown files defined previously, and then this Html can be styled with CSS. However, the use of Markdown is not mandatory, and som JAM stack tools enable you to change it with Liquid language, RST or even Html files.

2. Why Use the JAM Stack?

2.1. Better Performance

The first reason why companies switch to JAM stack is that, using stating content enables better website performances. So the idea is that all the web pages of the app are built at deploy time, sent to a CDN (Content Delivery Network) and served through there, since CDN enables very rapid page loading and some even offer content caching.

2.2. Easier Scaling

Scaling from thousands to millions requests per seconds is quite challenging for web app developers, so they have to use tools that have already proven they do the job. Here again, CDNs are perfect for this, and often include scaling in all of their plans. So using the JAM approach can lead to better scalability.

2.3. Higher Security

With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services.

2.4. Better Developer Experience

Since front-end logic is now apart from backend logic, and also the use of custom web development tools and site generators, it is possible to deliver better developer experience when working with the JAM stack. This is where automation, concurrent versioning systems, linters and others stuff web developers use comes in handy.

3. Best Practices

3.1. Serve the Project from a CDN

This is the first recommendation of the JAM stak community to enable best performances. In fact, JAM stack apps can be distributed around CDNs because they don't rely on a server. The rule is to push as most as you can of your app to the edge so the user experience is better.

3.2. GIT must be used for code storing and sharing

Using GIT adds many advantages to a project, such as sharing between its members through git clone, while installing the dependencies, and then run the project locally. Since there is no databases to clone, the contributor friction is hugely reduced while improving staging and testing stages of the development workflow.

3.3. Use Modern Build Tools

As a cutting edge developer, you have to use efficient and modern build tools to meet the web standards and be able to craft a web app compatible with all modern browsers. Such tools include: webpack, linters, environment variables, package managers and scaffolding tools.

3.4. Use Automated Builds

Since Markup content is transpiled to Html at build time, it is go online only with new builds. So, automating this process will save enough time when debugging the app. This can be done when using the devops approach.

3.5. Atomic Deploys

Experience has proven that JAM stack projects can grow very large and hold a thousand files. So, if you have to deploy all these files every time there is a change, it can easily be a nightmare for the developer journey. This is why it is recommended to use atomic deploys when deploying these files.

3.6. Instant Cache Invalidation

When there is already a continuous deployment or integration process in place, you need to know when to send a website online. To avoid inconsistent cache content, it is recommended to use a CDN with instant cache invalidation with every deploy.

4. Tools to Get Started

a text editor: usually I use Visual Studio Code which provides syntax highlighting, intelli sense and error highlighting
A computer or virtual machine with terminal access : for development purposes, I prefer using a linux machine with root access via the prompt or via SSH
The static site generator of you choice:

There are many tools out there enabling you to create a fresh JAM stack app. Hereafter is a non exhaustive list of some frameworks used to create JAM stack based applications:

Jekyll the first of its kind, it is built in Ruby and enables developers to develop JAM stack
GatsbyJS
Hugo
Grav

5. Who Is Using the JAM Stack?

The JAM stack is actually used by many of the actual leaders in the web area.

Some of them are:

Netlify
FreeCodeCamp
YouTube
Coursera

Conclusion

We have seen that in order to solve the challenges faced by web applications, there is no need to use a new framework of to change the technologies we use, but we can reuse the tech stacks we are already used to work with. So the JAM stack is not a new technology stack, but a new way of using existing technologies.

In a subsequent tutorial, we are going to show you through a case study how to use the JAM stack to build a web application.

Community