Tutorial

JAMstack: The What, the Why and the How

Published on December 12, 2019
Default avatar

By Chimezie Enyinnaya

JAMstack: The What, the Why and the How

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Introduction

Web development often involves the use of different development stacks, including the LAMP stack, the MEAN stack, the MERN stack, etc. JAMstack is another stack that offers some unique benefits to developers. This article will discuss those benefits and some general definitions and terms in order to provide an introduction to the JAMstack.

What is the JAMstack?

Static websites have been growing recently in use and functionality. No longer a collection of HTML and CSS files, static websites do things like process payments, handle realtime activities, and more. To call these sites “static” undermines and under-describes their functionality. Hence, the term JAMstack.

JAMstack stands for JavaScript, APIs, and Markup. According to the official website, JAMstack means:

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

The term was coined by Mathias Biilmann, co-founder of Netlify.

With the JAMstack, we no longer talk about specific technologies such as operating systems, web servers, backend programming languages, or databases. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a more streamlined developer experience.

Why the JAMstack?

When should you consider using the JAMstack? Some reasons you might consider the JAMstack include:

  • Faster performance: Because a JAMstack website is pre-built HTML and assets, it can be served over a CDN.
  • Higher security: JAMstack websites reduce server and database surface area vulnerabilities.
  • Lower cost: The cost of running a JAMstack website is generally lower than comparable alternatives since it uses fewer resources.
  • Better developer experience: With the JAMstack, there is no tight coupling between the application backend and frontend. This means that you can select from among different CMS and content infrastructure options, removing the need for separate stacks to maintain and serve content. Using JAMstack also simplifies the process of using third-party services like Algolia and Netlify Forms.

There are also a growing number of services that integrate dynamic functionality into JAMstack websites, including:

How To Build with the JAMstack

In order to build a project using the JAMstack, it must meet the following criteria:

  • JavaScript: Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework like Vue.js, React, Angular, etc. or even vanilla JavaScript.
  • APIs: All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTP with JavaScript. These can be custom-built or leverage third-party services.
  • Markup: Templated markup should be pre-built at deploy time, usually using a site generator like GatsbyJS, Nuxt.js, or Hugo for content sites, or a build tool like Webpack, or ParcelJS for web apps.

With those in mind, the following projects are not JAMstack projects:

  • A project built with a server-side CMS like WordPress, Drupal, etc.
  • A monolithic server-run web app that relies on a backend language like PHP, Node, or any other backend language.
  • A single page app (SPA) that uses isomorphic rendering to build views on the server at runtime.

When building a project with the JAMstack, keep the following best practices in mind:

  • The entire site should be served on CDN.
  • Employ atomic deploys.
  • Use instant caching invalidation.
  • Everything should live on Git.
  • Markup builds should be automated.

Conclusion

In this article, you learned about what the JAMstack is and why you might consider it for your next project. You also learned about project requirements for JAMstack sites. For examples of websites and web apps built with the JAMstack, you can also look at these official examples.

You can learn more about the JAMstack by going through the official website and the resources section.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Chimezie Enyinnaya

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel