JAMStack is a new architectural pattern that has evolved with the need for faster loading web applications.  Walmart has reported seeing a 2% increase in conversions for every second of improved load times and a 1% ($5 billion USD) increase in revenue for every 100 milliseconds of faster loading from utilizing the JAMStack architecture.  In this blog, I discuss what JAMStack entails, its benefits, and why it is gaining adoption, so that perhaps, we can all see similar benefits as Walmart has seen.

What is JAMStack?

J is for JavaScript

JavaScript covers the interactivity, network calls and frameworks in a JAMStack application that runs entirely on the client-side.  The amount of JavaScript is dependent on the needs of the site.  It can range from a light-handed validation library to a full-fledged framework like Angular, React or Vue.  The key to remember is that JAMStack applications do not sacrifice features for load times.

PS. It could also be Microsoft’s new Blazor Web Assembly Frontend!

A is for API (Application Programming Interface)

This is where the JAMStack application becomes truly dynamic. Using API services, third-party libraries or custom serverless functions (Azure/Lambda functions), developers can add features that make use of all the server-side and database functionality. To add forms, the application can drop in Google forms, to add search we can use Algolia, and to work with purchasing, we can use any number of client-side payment gateways.  Features that need to run on a server or need a database are kept largely external to the application or pulled in during site generation.  By keeping the APIs external, it allows for a separation of concerns and lets the JAMStack application focus on targeting the users and load times.

PS. It could also be Microsoft’s new Blazor Web Assembly Frontend! 

M is for Markup (HTML)

Templated HTML pages in the form of pre-rendered markup makes content delivery super-fast.  These templates create the user interface that users will see on their device.  With most JAMStack applications this content is made using a Static Site Generator (SSG).

Bringing it all together

The secret sauce (or at least the part that is often not discussed) is the build process. The build process is typically initiated in a CLI tool that pulls everything together and triggers static site generation of assets.  With static assets, hosting options become more open and interesting.

Why Does It Matter?

Performance

Why wait for pages to build on the client or server when you can generate them at build time? When it comes to minimizing the time to first byte, nothing beats pre-built files served over a Content Delivery Network (CDN).  This is where JAMStack shines.  When the JAMStack site is built, it will first begin by   By leveraging the power of CDNs, we can get our web site closer to the user with built-in redundancy.

When a browser requests a page on the web using a traditional legacy application there are many layers to load.  Each one of these layers adds delays before the user can interact with the web page.   An average application must go through 3 or more layers, then return up the stack to the browser.  This process gets even more complicated when common application servers or frameworks have multiple layers, which is particularly evident in model-view-control applications.

When compared to the traditional web application layer, a JAMStack web page has only 1 layer – as shown in the image below.  With static assets, the only step is for the CDN to serve the files  to the browser.  There is no web server even!

Efficient, Easier Scaling

When your deployment amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. CDNs are perfect for this, and often include scaling in all their plans.  It also allows for better geolocated hosting where the CDN can deliver the files from the closet and thus fastest node as possible.

To demonstrate how inexpensive CDN hosting can be, let us look to Azure:

• Static Site: Free hosting the content in Azure and can be distributed over the entire Azure CDN
• MVC App: Around $90/month just to host and run the application

Keep in mind that both options have bandwidth fees.

Better Security

What is the best way to be secure and have nothing that can be breached?  By using a statically generated site, there will be no code execution on the server. When we do need richer features such as server-side processes, they are abstracted into microservice APIs thus minimizing the surface areas for attacks.  In an ideal world, you can also leverage the domain expertise of specialist third-party services that provide authentication and authorization services. Auth0/Okta/Azure AD. These providers also have a vested interest in ensuring their services are kept up to date against the newest forms of attacks.

Architectural Summary

JAMStack can be summarized as a JavaScript based client-side frontend that integrates API calls for a rich and fast user experience.  Now that we know what JAMStack is and how it can benefit any organization, there is one significant aspect remaining:

Continuous Integration and Development

Combine JAMStack with a suitable CI/CD pipeline brings the entire pattern into focus.  The power of continuous integration and deployment allows for the web site to be automatically updated, built, and deployed by triggers.  As an example, we can have a trigger setup to monitor commits and whenever someone commits a new blog post file or entry, the entire site is built and deployed with the new content in only a matter of minutes.  Additionally, we can have pipelines trigger to run every day at certain times to ensure that any new content we need to share is made available throughout the CDN.

Conclusion

The JAMStack architecture is not a set of new technology!  It is a new way of using JavaScript, APIs, and Markup in conjunction with static site generation and CI/CD pipelines to create fast, secure, and feature rich applications.  When we think of the benefits Walmart has experienced with increased performance, it is clear that faster applications lead to increased usage and satisfaction of end users.  Then with JAMStack, our organizations can more easily benefit from the increase in conversions, higher revenue that come from the satisfied and happier users.

Learn more about Solvera's Enterprise Architecture Services.