JAMstack: The What, The Why and The How

Chimezie Enyinnaya
๐Ÿ‘๏ธ 3,666 views
๐Ÿ’ฌ comments

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.

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

Table of Contents

    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; 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:

    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:

    • 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, 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.

    Conclusion

    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.

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

    Chimezie Enyinnaya

    20 posts

    Software Developer [PHP Laravel JavaScript NodeJS AdonisJS VueJS] | movie lover | run http://openlaravel.com