Jamstack in 2021

The Jamstack in 2021

If you are a software Developer in 2021, you probably should have heard of the Jamstack and might be wondering what this new architectural approach is all about. The Jamstack is one of the rapidly expanding software architectures in the world today and has experienced a massive increase in popularity and usage over the years.

In this article, we will talk about the Jamstack and the benefits of using the Jamstack. There is also a guide to help you get started with developing with the Jamstack in 2021 and links to popular Jamstack communities and resources to aid your learning.

What is the Jamstack

"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup" — Mathias Biilmann (CEO & Co-founder of Netlify).

The Jamstack, a term coined by Mathias Biilmann (CEO and Co-founder of Netlify), which stands for Javascript, APIs, and Markup, is a modern software architecture that is used for creating fast and secure websites and apps.

The Jamstack architecture consists of 3 core components:

Javascript - for handling all your website's dynamic functionalities, like API request and response calls. Javascript in the Jamstack can take on many forms and are mostly found on the client-side. Examples are frontend frameworks like React, Angular, etc.

APIs - Server-side functions and database commands are implemented with an API. The APIs are accessed by the front end with Javascript driven HTTP calls. An API based headless CMS like Strapi can also be used to manage your content and present it to your frontend with an API. You can also consume data from different external sources with an API, this reduces complexity by eliminating the need for a backend.

Markup - Static site generators and build tools are used to aggregate and pre-build markup before displaying to the end-user. Examples of static site generators are Jekyll, Hugo, Docusaurus etc.

Note: you can have a look at the top 10 static site generators article we published a few months ago.

Jamstack sites are pre-rendered, without web servers, and are served statically directly from a static hosting infrastructure or CDN. What this means is that there is no server-side code in the Jamstack, all the website static and dynamic files are generated during the build process and uploaded into a CDN or Static file hosting infrastructure. These static files are then downloaded into the browser during request time, and maybe progressively enhanced in the browser before being shown to the end-user.

Benefits of using the Jamstack

Developer experience : Jamstack websites are built without a web server or backend, this reduces complexity when building custom websites, it also allows your developers focus more on your front end and content delivery concerns. Deployment with the Jamstack is also easier than in a traditional web development stack, deployment in the Jamstack involves deploying your pre-rendered static files into a CDN or static hosting infrastructure, then serving these static files directly to your end-users during the request time.

Performance : Jamstack sites are incredibly fast. All the website’s assets are pre-rendered during build time and stored in a CDN, so when the website is served to the end-user, there are no interference or back end delays.

Security: Jamstack sites are a collection of static files served directly from a CDN during request time, no code is run during the request time, they are without any server, backend, or framework to hack, there are virtually no vulnerabilities. All your dynamic functions can also be handled by external APIs, this reduces your surface area of attack. Even though this process is not attack-proof, third party APIs are very secure and well maintained.

Cost : Jamstack files are served statically from a CDN, hosting is less expensive, fewer resources are needed for scaling hence the cost of scaling is low compared to the traditional server-side architecture.

Getting started with the Jamstack in 2021

If you are a Jamstack newbie - use the guide below to choose your Jamstack development tools.

Choosing a Headless CMS

A headless CMS provides a user interface for creating, storing and editing your content, it also provides an API for accessing your content with your front-end framework.
Strapi is a leading open-source headless CMS. It’s 100% Javascript, fully customizable, and developer-first.

Popular Headless CMS resources:

• Why you should use a Headless CMS.
• Full listing of all Headless CMS.
• Top Headless CMS in 2020.
• Headless CMS and beyond.

Choosing a Static site generator

The static site generator is the most important part of your Jamstack architecture, it is used to generate all your website’s static assets during build time. Popular static site generators are : Jekyll, Hugo, Gatsby.

Popular Static site generator resources

• Full listing of all Static site generators.
• Netlify Guide on choosing the right Static site generator.
• Top Static site generators in 2020.
• Simplify your stack with a custom made static site generator.
• Strapi Static Websites

Choosing a CDN/ Static hosting infrastructure

A CDN will greatly increase the speed and performance of your website. There are numerous CDN available today, and most ship with automated deployment, CI/CD pipelines, cache invalidation features. Popular CDNs are Netlify, Firebase, Cloudflare, Fastly, Surge.

Popular CDN resources

• CDN(Content Delivery Network).
• 6 Modern Jamstack Hosting and Deployment Solutions.
• What more can a CDN do on the JAMstack.

External APIs

A major advantage of the Jamstack is the ability to consume data from external sources with an API, this removes the need for building a backend of your own. This approach reduces complexity and helps to build sites faster.

External API resources

• Programmable web API directory.
• Is there a risk to relying on external APIs on the Jamstack.

The Jamstack Best Practices

1. Store your entire code in GIT.
2. Deploy your code in a CDN. This is not compulsory but you will save time and money compared to deploying on big cloud providers like AWS.
3. Use modern build tools like Webpack, PostCSS, and Babel to ensure your site is compatible with all browsers. Most modern Static site generators ship with a build tool ie Hugo-extended and PostCSS.
4. Use Automated building and Atomic deploys. You can easily do this with modern CDNs like Netlify.
5. Ensure instant cache invalidation.

Links to popular Jamstack Communities

• Jamstack Community on Gitter
• Jamstack Reddit Community
• Jamstack.org Slack Community
• Strapi Slack Community

Popular Jamstack resources

• Jamstack Fundamentals.
• Jamstack: The Cornerstone of Modern-day Web Development.
• The Jamstack in 2020.
• The promise of the Jamstack.