An Introduction to the JAMstack: The Architecture of the Modern Web
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 to enforce 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. 😃
What is JAMstack?
The JAMstack is not about specific technologies. It’s a new way of building websites and apps that deliver better performance, higher security, lower scaling cost, and a better developer experience. ~ jamstack.org
JAMstack projects don’t rely on server-side code — they can be distributed instead of relying on servers. Served directly from a CDN, JAMstack apps unlock speed, performance, and better 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, 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 user's geographic locations, the origin of the web page, 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
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 microservice APIs, surface areas for attacks are reduced, 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.
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: A free and open-source framework based on React that helps developers build blazing-fast websites and apps.
- NuxtJS: The Vue.js Framework for Universal applications, statically generated applications, single-page applications, progressive web apps, and desktop apps
- Hugo: 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: 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: A smarter and seamless content management system that provides editors and developers with unified content, thereby enhancing collaboration and ensuring digital products ship to the market faster.
- Svelte: 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 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 with 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.
- 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 = ❤
You can find more resources here.
JAMstack was invented to put a nomenclature to the new way of building websites and apps that deliver better performance, higher security, lower cost of scaling, and a better developer experience.
Do join the JAMstack community to learn more and get more updates. You can also watch the creator of JAMstack and CEO of Netlify speaking on the Rise of JAMstack below.
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 🙌