The Rise of JAMstack 🚀

What is JAMstack?

You may have heard of various “stacks”, which typically refers to a group of technologies used to build an application. Recently, JAMstack has become increasingly trendy and popular.

Before you wonder what does “JAM” in the JAMstack stands for, it is important to recognise that JAMstack is not a collection of technologies. Rather, it refers to a way of building applications which focuses on delivering better performance, scalability and relatively easier development.

Now, back to the “JAM” — this stands for JavaScript, APIs and Markup. The term JAMstack was coined by Mathias Biilmann, the CEO of Netlify who refers to it as

“A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”

Traditional Applications

Before we dive into the JAMstack and benefits, let’s understand traditional applications. A traditional app has 3 main components: the frontend app, the backend server and a database.

Traditional Application Architecture

The problem with this approach is complexity. As your app evolves, there is just too many things to take care of. Applications slow down with complex logic and scaling for thousands of users or even more becomes just too hard.

Security concerns increase with the size of applications too.

JAMstack has a great way to solve for these issues.

JAM

JAM in JAMstack

JavaScript

Features that are dynamic are managed by JavaScript. This can be achieved with any JavaScript library which does the job.

APIs

Server side methods become APIs which is handled by JavaScript functions.

Markup

The entire application is served as a static site — a collection of HTML files. A popular example is to use Markdown which a markup language. Eventually a Static Site Generator like Hugo or Jekyll can render the static files.

How does it work?

JAMstack Architecture

JAMstack applications are served over a Content Delivery Network (CDN). Before deploying to a CDN, JAMstack apps are compiled and pre-built into highly optimised static pages and assets.

The apps are still able to communicate to other backend services or servers through JavaScript and APIs.

Why use JAMstack?

Speed

With pre-built and highly optimised sites, it allows for fast rendering of your apps for users.

Security

Without a server or database, naturally, there are fewer areas of vulnerabilities.

Scalability

We can easily scale our sites without complex logic. The CDN takes care of reaching a global audience.

Simplicity

With the simplicity of JAMstack, developers can now focus on the core of the application without worrying too much about DevOps or deployments or scalability. Happy developers = better products = happy users!

Technologies based on JAMstack

I enjoy using JAMstack to build my blogs and websites. Use the below technologies to see how you can create your own in no time!

Static Blog and Website Generators

• Hugo — Blazing fast static site generator built with Go
• Jekyll — Markdown-based static site generator built with Ruby
• Hexo — Blog framework powered by Node.js

Frontend Frameworks

• Gatsby — Modern site generator for React
• Next.js — React framework optimised for Server-Side Rendering (SSR)
• Nuxt — Vue.js framework

Find more at https://www.staticgen.com/

Deployment Solutions for JAMstack Apps

• Netlify — All-in-one platform for automating web projects
• Vercel (previously Zeit) — Easiest way to host, deploy and manage websites
• Github Pages — Host static websites directly from your Git repository

Headless Content Management Systems (CMS)

• Netlify CMS — Open source CMS for Git workflow
• Contentful — API-first content platform
• Ghost — Headless CMS based on Node.js

Find more at https://headlesscms.org/

e-Commerce solutions for JAMstack Apps

• Snipcart — Shopping cart for any website
• BigCommerce — Powerful e-commerce
• Commerce Layer — Enterprise e-commerce on JAMstack

Sites I’ve built with JAMstack

Supercharge.dev

Supercharge.dev is the quickest way to jump into your next Next.js project with everything from frontend framework (Bulma) to Firebase Authentication, Google Analytics etc. all combined!

Get a massive 20% off right now with code DEV2021!

Right From Basics

Right From Basics Homepage

Right From Basics is a tech blog to learn new technologies and to prepare for your next technical interview. This is built entirely using Hugo and uses Netlify for deployment.

Check it out here: Right From Basics

harishv.me

harishv.me Homepage

This is my personal site. I have used Gatsby to build this and Netlify for deployment.

Check it out here: Harish V

Originally published at https://rightfrombasics.com/posts/rise-of-the-jamstack/