An introduction to the JAMstack: the architecture of the modern web
Subscribe to my newsletter and never miss my upcoming articles
I’m sure you’ve come across the word JAMstack before but you might not have understood what it really meant. I’ve seen this word before also but didn’t care to check it out until Egwuenu Gift organized JAMstack Lagos. I then realized that I’ve been building JAMstack applications already.
JAMstack is a modern web development architecture. It is not a programming language or any form of tool. It is more of a web development practice aimed towards enforcing better performance, higher security, lower cost of scaling, and better developer experience.
In this article, I’ll introduce you to what JAMstack means, why you should care, best practices, and how to get started. 😃
According to the official JAMstack documentation,
When we talk about “The Stack,” we no longer talk about operating systems, specific web servers, backend programming languages, or databases.
The JAMstack 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.
JAMstack is a major trend in web development coined by Mathias Biilman, the CEO and co-founder of Netlify.
Okay, chill! What is JAMstack?
You might have come across specific terms like MEAN stack and MERN stack. These are just terms used to classify or group some certain technologies with the aim of achieving a particular goal.
JAMstack here stands for
JAMstack projects don’t rely on server-side code — they can be distributed instead of relying on a server. Served directly from a CDN, JAMstack apps unlock speed, performance and better the user experience.
I’ll be using these terms in this article frequently and I thought you should know their meanings (if you don’t already):
- API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other.
- CDN (content delivery network) is a system of distributed servers (network) that deliver pages and other Web content to a user, based on the geographic locations of the user, the origin of the webpage and the content delivery server.
- A Server is a computer designed to process requests and deliver data to another computer over the internet or a local network.
- A Database is a collection of information that is organized so that it can be easily accessed, managed, and updated
Sounds cool right?!
JAMstack is fast
When it comes to minimizing the time of load, nothing beats pre-built files served over a CDN. JAMstack sites are super fast because the HTML is already generated during deploy time and just served via CDN without any interference or backend delays.
JAMstack is highly secured
Everything works via an API and hence there are no database or security breaches. With server-side processes abstracted into micro service APIs, surface areas for attacks are reduced and so your site becomes highly secured.
JAMstack is cheaper and easier to scale
JAMstack sites only contain just a few files with minimal sizes that can be served anywhere. Scaling is a matter of serving those files somewhere else or via CDNs.
JAMstack Best Practices
- Use CDN to distribute your files rather than servers
- Installing and contributing to your project should be easy and less complex. Use tools like npm and Git to ensure standard and faster setup.
- Use build tools and make your project compatible for all browsers (e.g Babel, Browserify, Webpack, etc.)
- Ensure your project is up to web standards and highly accessible
- Ensure your build process is automated to reduce stress.
- Make your deployment process automatic, you can use platforms like Netlify to do this
How do I Get Started?
You can use some already built technologies to build JAMstack applications in a few minutes. Here are a few:
- Gatsby: Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps
- NuxtJS: NuxtJS is the Vue.js Framework for Universal applications, static generated applications, single page applications, progressive web apps and desktop apps
- Hugo: Hugo is the world’s fastest framework for building websites. It is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
- Netlify CMS: Netlify CMS is an open source content management for your Git workflow which can be used with any static site generator for a faster and more flexible web project
- Contentful: Contentful is a smarter and seamless content management system which provides editors and developers with a unified content thereby enhancing collaboration and ensuring digital products ship to the market faster.
- Svelte: Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
- JAMstack WTF
- How to Build a JAMstack Website
- What is JAMstack and why you should try it
- A JAMstack-ready CMS
- JAMstack for Clients: On Benefits & Static Site CMS
- Go static: 5 reasons to try JAMstack on your next project
- Static Websites + JAMstack = ❤
Find more resources here
Creator of JAMstack and CEO of Netlify speaking on the Rise of JAMstack
JAMstack was invented as a way to put a nomenclature to the new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.
Join the JAMstack community to learn more and get more updates.
Thanks for including the Cosmic Community in your Resources section! Here is an even more current tutorial: How to Build a JAMstack Website using Vue.js, Nuxt.js and the Cosmic JS Headless CMS . You can install the app or fork the codebase and demo managing content API-first 🚀
Would appreciate any feedback, Hashnode Community 🙌
Thanks for the article. Been wondering what the "JAM" there meant after seeing it a couple of times on twitter. Concise and comprehensive enough.