What is the JAMstack?

If you’re familiar with modern web development, chances are that you’ve heard of the JAMstack. The ‘JAM,’ part stands for Javascript, APIs, and Markup--The essential building blocks to any JAMstack site. This term was invented by Netlify co-founder Mathias Biilmann, and has revolutionized modern web development as we know it. 

These technologies together form a revolutionary new way to build websites that don’t rely on more traditional web servers. They can be built on top of Hugo, Jekyll, Gatsby, or any other static site generator. Using the JAMstack to build websites allows for developers to have more flexibility, security, and scalability than a website rendered using a server-side CMS or a monolithic application. It’s no secret that the popularity of the JAMstack is on the rise. The State of JAMstack 2020 Report noted that 45% of developers have been using the JAMstack for a year or more, and with good reason. You may be wondering, ‘Well, how does the JAMstack work?’ In this post, we’ll explore not only the technical aspects of what makes the JAMstack so popular, but also highlight the benefits to using the JAMstack, who shouldn’t use the JAMstack, and include some templates to get you started building your own amazing JAMstack site. 

The Ins and Outs of the JAMstack

The first key component to the JAMstack is of course, JavaScript. In a JAMstack site, JavaScript is run client-side, carrying out its programming tasks during the request/response cycle. 

Next, you have the API components. These APIs can be reused, and are accessible via HTTPS, allowing developers to abstract away their server and database processes. 

The last piece of the puzzle is the markup itself. What makes for a strong JAMstack template is just that: templatability. Ideally, as much markup as possible should be templated, and pre-built before a site is deployed. This can be done quickly by using one of the many static site generators mentioned above, or via your application build tool of choice. 

When Biilmann coined the term, ‘JAMstack,’ it set in motion a paradigm shift for how developers, particularly front-end developers, are able to approach their work. By using the JAMstack, they are able to work quickly and more efficiently, freed from the pain points of building dynamic websites on an archaic CMS.

It’s one of those rare shifts in the landscape that delivers a productivity boost for developers and a large performance boost for users. The JAMstack is helping to bring about a more secure, stable, and performant web that’s also more fun to develop and create for.

- Biilmann and his co-author Phil Hawksworth in their 2019 book Modern Web Development on the JAMstack. 

Static vs. Dynamic Sites

Dynamic websites are widely used across the internet today. For larger websites that have multiple pages that a user can interact with on the page, they are often the de-facto solution. In comparison, a static website is fixed, and doesn’t change when a user accesses it, often containing a limited number of pages you can access, each with templated information.

Dynamic sites render slower than their static counterparts, largely due to the bloat of plugins, extra scripts, and other overhead needed to render a dynamic web page using a traditional CMS. Dynamic websites also require developers to keep up with an ever-expanding lexicon of programming languages that seem to shift by the hour, and are often less secure than their static counterparts.

Static websites stand apart from dynamic websites in that developers can do more with less, and they don’t have to boil the ocean or spend six months learning a new programming language to create something amazing. By making use of JavaScript, HTML, and CSS, you’re able to create websites that are responsive, accessible, fast, and secure. 

The Perks of Working with the JAMstack

When you first start your JAMstack journey, if you’re coming from a place of cloud-native architecture such as AWS, Google Cloud Platform, or Kubernetes, you may see many similarities to serverless applications. Some JAMstack applications are indeed serverless, others may be utilizing Rails or WordPress for API calls, neither of which are serverless. There are many ways that you can use the JAMstack to create not only static sites, but applications that are lightweight and require far less overhead to get started and maintain. 

CDNs

Static websites are often powerhouses of speed and security due to the widespread use of Content Delivery Networks (CDNs) to serve their information. CDNs often rely on edge computing in order to reduce bottlenecking, decrease bandwidth usage, and drastically reduce the loading time of pages rendered on their network. Scalability is another major bonus of utilizing the JAMstack and a CDN together, because you don’t have to store multiple copies of a database and keep them synced across devices, clouds, or platforms. Data is served when a page is updated, rather than when a user visits the website in question. 

No more LAMP Stack

Traditionally, when building dynamic websites, developers would lean heavily on what is known as the LAMP (Linux, Apache, MySQL, PHP, Perl, Python) stack. The LAMP stack can be difficult for new developers to understand, particularly as it has many components that may or may not work well together, and a variety of dependencies to maintain. It’s often described as a development stack with, "a learning curve." It also can present security challenges when dealing with managing multiple users for a website at one time, and applications that experience heavy traffic can easily get bogged down.

In contrast, the JAMstack is built for speed, security, scalability, and provides a developer-friendly experience. You don’t have to be an expert to get started with the JAMstack, and you can often get a site up-and-running quickly by following one of the many tutorials that exist today for projects ranging from portfolio websites, applications, and blogs. With tools such as GitHub Pages, you can easily deploy a website that doesn’t even need to rely on a traditional server for hosting.

Best Practices for Working with the JAMstack (And Who Shouldn’t!)

While the JAMstack is rising in popularity, and with good reason--It may not be right for your team.

Reasons the JAMstack may not work:

  • You have a well-established content strategy built on top of a CMS you’re familiar with and your team is committed to using
  • You only need a single page website
  • Your developer team isn’t familiar with JavaScript
  • You’ve got a page that relies heavily on SEO metadata and that data changes regularly

To ensure the long term success of your JAMstack project consider:

  • Keeping your project on a CDN whenever possible
  • Utilizing the power of atomic deployment
  • Automating your build process
  • Embracing third party tooling when it makes sense for your project to do so
  • Cache invalidation when coupled with a CDN can greatly improve your build-to-deploy development cycle 
  • Improving your build-to-deploy development cycle by coupling cache invaldiaton and CDN

The best way to know if the JAMstack is going to work for your team and projects to make sure you’ve got a well-defined project outline. If you haven’t sat down with your project managers, marketing team, and your developers all in one room (or gotten them on Zoom) you should. 

  • Where is everyone at?
  • What’s their workload?
  • How does this compare to our project’s roadmap? 
  • Can you pivot to the JAMstack without causing setbacks and losing valuable time? 
  • Is the JAMstack something that will actually benefit your team? 
  • Should we make a POC?

By ensuring that your team is all on the same page before you start a large-scale project, you can ensure that everyone has a positive experience when working together on your new JAMstack offering.

Key Takeaways

  1. The JAMstack’s building blocks (Javascript, APIs, and Markup) are the cornerstone of modern static site and application development 
  2. The JAMstack allows for developers to work with JavaScript, which many are already familiar with. This means less time to ramp-up, and more time to get started creating amazing things.
  3. Dynamic websites, while beneficial for some use cases, can present security issues and are often slower than their static counterparts. 
  4. The JAMstack is designed for speed, security, scalability, and flexibility, particularly when coupled with a CDN
  5. Ensure that your team is following established best practices for working with the JAMstack before getting started, and be sure to audit your project’s scope so you can be sure that the JAMstack will actually be well-suited for your particular project.