DEV Community

Cover image for The Rise of JAMstack 🚀
Harish for Right From Basics

Posted on • Originally published at rightfrombasics.com

 

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.

imgTraditional 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

imgJAM 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?

imgJAMstack 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

Sites I’ve built with JAMstack

Supercharge.dev

img

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

imgRight 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

imgharishv.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/

Top comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at react.dev after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Dev.to Articles for Your Portfolio

Integrate the articles of your Dev.to profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the Dev.to API: How to Fetch Your Dev.to Articles for Your Portfolio with React