When it comes to web development, there are different type of development stacks; the LAMP stack, the MEAN stack, the MERN stack etc. With the evolvement of modern web development, there is a new kid in the block, which is the JAMstack. In this article, I'll be covering all you need to know about the JAMstack.
What is the JAMstack
Static websites have not only be been growing in popularity, but also in functionality. Gone are the days when static websites are just some HTML and some bunch of CSS with no interactivity whatsoever. Today, we have static websites that does things like process payments, handle realtime activities etc. To keep calling websites like these “static websites” will be undermining the functionality of such websites. Hence, the term JAMstack.
Table of Contents
The term was coined by Mathias Biilmann, co-founder of Netlify.
With the JAMstack, we no longer talk about specific technologies; 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 better developer experience.
Why the JAMstack
Having seen what the JAMstack is, you might ask why go the JAMstack route? Below are some reasons you should consider the JAMstack:
- Faster performance: This is the most obvious benefit of a JAMstack website as it is just pre-built HTML and assets, all which can be served over a CDN.
- Higher security: JAMstack websites are incredibly secure, since you don’t have to worry of servers been hacked or database vulnerabilities.
- Less cost: Cost of running a ****JAMstack website is cheaper, since it uses less resources as things like servers and databases are not necessarily needed.
- Better developer experience: With the JAMstack, there is no tight coupling between backend and frontend, as we can select from an expanding options of CMS and content infrastructures, which removes the need to maintain a separate stack for content and our website. We can even make use of third-party services like Algolia and Netlify Forms.
In addition to the above, there are numerous services to integrate dynamic functionality into JAMstack websites emerging up every day. Such services includes:
- Manage signups, logins, password recovery, and more with Netlify Identity.
- Full text search with Algolia and Lunr.js.
- Form handling with Formspree or Netlify Forms.
How to build with the JAMstack
We have already seen what the JAMstack stands for. So to build a project using the JAMstack, the project must meet the following criteria:
- Markup: Templated markup should be pre-built at deploy time, usually using a site generator like GatsbyJS, Nuxt.js, Hugo etc. for content sites, or a build tool like Webpack, ParcelJS etc. for web apps.
With those in mind, your project is not built with the JAMstack if:
- 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, you should consider the following best practices:
- The entire site should be served on CDN.
- Employ atomic deploys.
- Instant caching invalidation.
- Everything should live on Git.
- Markup builds should be automated.
In this article, we saw what the JAMstack is, why we should consider using the JAMstack for our next project. Lastly, we saw what it entails for a project to be built with the JAMstack. For websites and web apps built with the JAMstack, do check out these examples.