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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
The JAM stack is actually used by many of the actual leaders in the web area.
Some of them are:
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.
Alibaba Clouder - September 27, 2019
Alibaba Clouder - July 12, 2019
Alibaba Clouder - March 10, 2021
Iain Ferguson - November 26, 2021
Alibaba Cloud MVP - November 8, 2019
XianYu Tech - August 10, 2021
An online computing service that offers elastic and secure virtual cloud servers to cater all your cloud hosting needs.Learn More
An all-in-one solution for deploying applications, building websites and blogs, and running web programs, starting from $3.50/month.Learn More
A scalable and high-performance content delivery service for accelerated distribution of content to users across the globeLearn More
More Posts by Alibaba Clouder