JAMstack is revolutionising the way we think about workflow by providing a simpler developer experience, better performance, lower cost and greater scalability.
JAM stands for JavaScript, API & Markup.
"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup"— Mathias Biilmann (CEO & Co-founder of Netlify).
Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use.
Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function.
Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator.
Here are the main benefits provided by the JAMstack
Serve pre-built markup and assets over a CDN
No need to worry about server or database vulnerabilities
Hosting of static files are cheap or even free
Front end developers can focus on the front end, without being tied to a monolithic architecture. This usually means quicker and more focused development
If your product suddenly goes viral and has many active users, the CDN seamlessly compensates
The following tips will help you leverage the best out of the stack.
Since all the markup and assets are pre-built, they can be served via CDN. This provides better performance and easier scalability.
Learn moreEach deploy is a full snapshot of the site. This helps guarantee a consistent version of the site globally.
Learn moreOnce your build is uploaded, the CDN invalidates its cache. This means that your new build is live in an instant.
Learn moreYour codebase lives in Version Control System, such as Git. The main benefits are: change history of every file, collaborators and traceability.
Learn moreYour server is notified when a new build is required, typically via webhooks. Server builds the project, updates the CDNs and the site is live.
Learn moreHere's how an ideal JAMstack workflow would look like
A brief history of stack shows its growth in popularity
Static sites are becoming popular due to the popularity of certain SSG such as Jekyll.
A small group of developers believe that Static sites don't have to be static and the term "JAMstack" comes to life.
The modern web revolution starts prioritising the importance of performance, scalability and developer experience. The term JAMstack starts to be adopted by a wider group of developers and the first enterprise JAMstack projects are announced.
Tools like Netlify, Gatsby and Contentful have helped promote the term and the community is rapidly growing. This was also the year of the first JAMstack Conference.
However you decide to generate your HTML assets is up to you. The three most common approaches are:
Simple and effective method of writing HTML, it's ideal for super simple pages.
Most JAMstack sites are powered by a static site generator. There's no enforcement on which SSG you decide to use.
Most frameworks don't output static HTML files, however it is possible to do that but it requires more tooling experience and maintenance.
Your built site needs to be hosted somewhere. There are great services that provides this for free and with ease.
JAMstack websites don't have to be static. There are great services available to help bring some dynamic data to your product.
You can also abstract your own functions into reusable APIs. For this you can use AWS lambda functions or Netlify Functions
As you add features to your site, you may want to store user profiles, shopping cart data, game levels, or other dynamic data. Get started for free with FaunaDB Serverless GraphQL
Many JAMstack products have dynamic comment sections. These are typically used on blogs
A great way to interact with your audience
Setting up an online store on the JAMstack has never been easier
Rely on third party services to integrate a search functionality
JAMstack sites can also be controlled via a Content Management System, these are typically known as Headless CMS. Once a change in the CMS is made, a new build of your site will be triggered and then deployed as static assets.
Here's a list of hand-picked JAMstack resources ranging from learning materials to third party services.
This project was put together by @peduarte and presented at the JAMstack meetup (decks here) in London.
The goal of this guide is to gather the concept of JAMstack in a straight-forward guide to encourage other developers to adopt the workflow.
Built with Gatsby, hosted on Netlify and open sourced on Github.
JAMstack.