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?
According to the official JAMstack documentation, JAMstack is a Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
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
You might have come across specific terms like MEAN stack and MERN stack. These are just terms used to classify or group certain technologies to achieve a particular goal. JAMstack is a major trend in web development coined by Mathias Biilman, the CEO and co-founder of Netlify. JAMstack here stands for JavaScript, API, and Markup.
Stacks generally are just a combination of several technologies used to create a web or mobile application. So JAMstack is a combination of JavaScript, APIs, and Markup. Pretty interesting, right?
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.
Useful Terms
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
Why JAMstack?
Traditional websites or CMS sites (e.g., WordPress, Drupal, etc.) rely heavily on servers, plugins, and databases. But the JAMstack can load some JavaScript that receives data from an API, serving files from a CDN, and the markup generated using a static site generator during deploy time. 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 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.
and many more. . .
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.
Useful Resources
You can find more resources here.
Conclusion
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.
JAMstack is not about specific technologies; it is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
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.
