JAM stack: Javascript, A P Is, and Markdown templating. A new software engineering tech stack.

What is JAMstack?

What Is JAMstack?

  • JavaScript (J) - Any dynamic programming that is running a request/response cycle on the client should be handled by JavaScript. This can include any front-end framework like Vue.js, React or Angular.

  • APIs (A) - The server-side processes or database actions are abstracted into reusable APIs that is accessed over HTTP with JavaScript. These APIs can be custom-built or leveraged through third-party services.

  • Markup (M) - Templated markup should be prebuilt during deployment, usually using a site generator, such as Gatsby.js, Hugo and Nuxt.js, for content sites, or build a tool for a web app via Parcel.js and Webpack.

HeadLess CMS Services: Contentful, Netlify, Sanity.io, Strapi, Data CMS, Ponzu, Directus
Headless CMS for backend functionalities

How Is JAMstack Different From Other Technology Stacks?

To understand how JAMstack differentiates from other development stacks, Francois Lanthier Nadeau, market leader & partner of SnipCart, provides a comparison of the workflows involved in both LAMP-driven traditional projects and JAMstack projects.

Static site generators: Next JS, Hugo, Jekyll from GitHub, Gridsome for Vue JS, Metal Man, Gatsby JS
Static site generators

In a traditional workflow, both the “building and hosting are coupled. A user requests a page [and] the file gets processed and served following a [long] series of interactions between a database, back-end code, server, browser and layers of caching,” said Nadeau. “Core updates are pushed to production servers, often through FTP [and] content updates are pushed through a traditional CMS, like WordPress or Drupal.” The building and hosting can also be referred to as front-end and back-end, respectively.

Added functionalities/third-party services/SaaS - The current API economy and explosion in SaaS offers an interesting à la carte approach. In other words, you can cherry pick the dedicated external services you need and adopt a truly modular development stack. Disqus, Netlify for rapid hosting and deployment, Algolia site search engine, Snip Cart a e-commerce store, and Serverless functions via Amazon Lambda.
Added Functionalities/Third-Party Services/SaaS

As for a JAMstack workflow, Nadeau explained that both the building and hosting are decoupled, rather than coupled. When a user requests a page, the “file is already compiled and gets directly served to the browser from a CDN,” Nadaeu said. “Core updates are pushed through Git, the site gets rebuilt entirely via modern build tools like static site generators, and content updates are pushed through Git or a static site CMS.”

Git, according to Redpoint Ventures investor Astasia Myers, is fundamental to JAMstack since it holds all the site’s components. “An SSG [static site generator] generates the browser markup, which is pushed to Git as a collection of prebuilt pages. The CDN and/or hosting service can identify the changes, automatically rebuild the site, and deploy it. This workflow embodies the modern software development lifecycle practice of Continuous Integration and Deployment (CI/CD),” said Myers.