Overview

This article provides a basic overview of JAMStack—a modern web development architecture. It’s not a deep dive, nor a technical reference.

If you’re looking to gain a quick understanding, this article provides a quick overview, then branches into various other technical articles that you can use as references.

If you’re trying to understand the architecture or use this as a guide for new developers to get up to speed on the concepts, I’ve included plenty of analogies to keep things relatable.

I hope this inspires you to adopt this approach and break free from the limits of any single Content Management System (CMS), in the name of building better websites.

What is JAMStack?

In short, JAMStack is a web development architecture that’s about developing websites using tools that are loosely coupled. The objective is to decouple the user interface from the Content Management System (CMS).

In most popular CMSes, (e.g. WordPress, Drupal, Django CMS) the CMS is responsible for both managing content and displaying the user interface, usually through the use of templates specifically designed for that CMS.

In the JAMStack architecture, the responsibilities of managing content and displaying it are separated.

Picture this—a traditional CMS is like a One-Man Food Truck. The owner handles all tasks in the kitchen by himself, i.e. Expediting, Preparation, Cooking, Plating, etc.

On the other hand, the JAMStack architecture has different staff responsible for each task. One handles ingredients and preparation while another chef cooks.

Although the all-in-one chef in a traditional architecture may be a culinary jack of all trades, it’s still impossible for him to single-handedly provide for 100 diners in a single dinner service, without buckling under pressure and compromising standards. The specialised team is able to handle a larger volume of orders easily, without compromising skills. The result is an efficient production line, with tighter quality control at each stage.

The official definition of JAMStack is—

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

JavaScript—Any dynamic programming is handled by client-side JavaScript. This could be any frontend framework, library, or even vanilla JavaScript (e.g. React, Vue, Angular, etc.).

Reusable APIs—Any complex business logic such as user databases and content management are processed server-side and served as APIs to the frontend.

Markup—The HTML markup is prebuilt at deploy.

Paraphrased from https://jamstack.org/

Although this appears focused on the technology stack, the underlying philosophies of decoupling responsibilities and separation of concerns are the driving principles of JAMStack.

This architecture results in a set of tools that are:

• Highly specialised—Line cooks adept at each station at Taco Bell. Guacamole Guardian, Cheese Master, Beef Guy / Specialised front-end libraries for the user interface, flexible API-based CMS.
• Highly efficient—Line cooks can focus on what they’re good at / Third-party developers can optimise the tools for their particular uses.
• Interchangeable—When someone drops out of the shift, you can find a replacement easily / Different tools are interchangeable and interact with each other seamlessly.

When should I not use JAMStack?

Before we delve into the benefits, it’s useful to know when not to use JAMStack. This should help you understand its use cases without assuming it’s a magic pill for all environments and projects.

You may not want to use JAMStack when…

Your team is not keen to learn new web development techniques

If all the developers are…

• loyally married to WordPress or some other CMS
• inexperienced in using modern JavaScript tools/libraries/frameworks (e.g. Angular, React, Vue, etc.)

This will definitely add at least 2–3 weeks to your project timeline. You may want to reconsider this for another future project if this isn’t a risk you can stomach.

You’re just building a blog or a single landing page

If you’re running a neighbourhood hot dog stall, you don’t need to hire a team of line cooks for the various tasks.

Similarly, if you’re building a plain vanilla blog, when plenty of CMSes exist for that purpose already—WordPress, Wix, SquareSpace, etc. All you have to do is select a theme/template (or build one, if necessary), and you’re set. The point of this architecture is to use the right tools for the right job.

Though if you’re a budding/curious developer, or the blog is part of a larger site and requires flexible content styles (being able to add different text structures, or dynamic features in long-form content, instead of just a rich text blob), then JAMStack may save you a lot of time in the long run.

Why use JAMStack?

If you’re sure that your needs extend beyond simple requirements, or if you’re frustrated with conventional CMSes, here’s a breakdown on why JAMStack is worth a shot.

Faster Development

With most traditional CMSes, only the seasoned veterans are on the ball. Everyone else may struggle to implement specialised business logic on CMSes, especially when the CMS was designed for other purposes (I’ve seen a case where a logistics system was built on top of a blogging CMS—nothing short of a miracle).

Even though learning a new architecture, migrating your codebase, and training the team may incur a high cost in both time and money, the benefits outweigh the costs.

From my own experience, using front-end frameworks like React has greatly increased my productivity. Component-based approaches and more organised state management within websites have enabled better and faster responses to business changes.

Higher flexibility

Like a commercial kitchen, you are free to hire better chefs to replace under-performers in the team. With JAMStack, you can replace tools in your architecture with ones that are more suited for the task, or in response to business growth and new goals.

This may not make a lot of difference if you are building a single landing page or a simple blog. But if you’re going to build a website with plenty of features, dynamic content, and interactive components, you’ll want to ensure that you’re not limited to the tools or architecture that’s provided by your content management system.

Besides, most modern JavaScript plugins are agnostic to the platform that you are using. Tools like Customer Relationship Management systems, Email Newsletters, can all easily integrate with the architecture, either directly or through a service like Zapier.

Other benefits

Other slightly understated but important benefits are better performance, smoother user experience, and tighter security.

Better Performance

You can deploy your whole website onto a Content Delivery Network. Services like Netlify allow you to do this with very minimal effort. This means content can be downloaded quickly from nearby servers as opposed to a single server that could be distant from the user’s location.

Smoother User Experience

When using modern JavaScript frameworks to build websites, smooth animations can be added so that content transitions are seamless. These subtle improvements in page load speed can enhance the user’s experience of your brand touchpoint. Even though one cannot control user behaviour, these advantages can influence users’ perception of your brand.

Tighter Security

As the user interface is separate from your CMS, it is significantly harder to hack JAMStack websites. If you’re using a 3rd party CMS service to manage your content, the hacker would effectively be required to hack the service provider—which has better detection and prevention measures compared to most self-hosted websites.

Conclusion

It’s exciting to learn and adopt new frameworks to help us work more efficiently and create better websites. As beneficial as it is, it’s always important to take a step back to consider client preferences, team skills & ability, and various other factors before taking the leap.

Gridhaus is a Digital Design Consultancy. We help businesses do better through thoughtful strategy, clear insights, and effective digital experiences. Contact us for branding or web development partnerships.

This article is part of a series on JAMStack. Check out the below sites or articles to learn more about the architecture.

• JAMStack Official Website
• JAMstack for Clients: Benefits, Static Site CMS, & Limitations
• New to JAMstack? How to make a site from A to Z
• Useful Tools for JAMStack Sites (Coming Soon)
• Kentico Cloud vs Prismic: A Comparison of Two Headless CMSes (Coming Soon)
• SEO for Single Page Applications (Coming Soon)