LifeinTECH

In my previous article “Netlify”, I described my migration journey from GitHub Pages to Netlify for hosting. However, I also referenced a web architecture known as JAMstack.

JAMstack has been growing in popularity over the past year, but is a concept that I started exploring in early 2015, when I switched LifeinTECH to Jekyll.

The key characteristics of the JAMstack web architecture are outlined below.

• JavaScript: Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework / library (e.g. React, Angular, Vue) 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 prebuilt at deploy time, usually using a site generator for content sites (e.g. Jekyll, Hugo) or a build tool (e.g. Gulp, Grunt) for web apps.

In short, JAMstack provides an alternative to “traditional” web architecture, where there is a direct reliance on a sever-side runtime (e.g. Node, Ruby) or a server-side CMS (e.g. Wordpress, Drupal).

The diagram below outlines the differences between traditional web architecture and JAMstack web architecture.

The key difference is the reduction in server-side complexity, removing the need for a tightly coupled Web Server and App Server, as well as the Database and/or Content Management System (CMS). Instead, the focus shifts to “client + services”, where the main web application can be distributed globally via a Content Delivery Network (CDN) and (where required) interacts with discrete services directly from the client via APIs.

The JAMstack web architecture is made possible, thanks to the advancements in web browsers, which today are comparable to full operating systems (e.g. Chromium OS), capable of interacting with countless APIs and running complex applications client-side. This, alongside the rapid growth of JavaScript front-end development (e.g. React) and comprehensive build tools (e.g. Gulp), can make traditional web architecture obsolete for certain scenarios.

The diagram below provides a deeper look at the JAMstack web architecture, highlighting the developer experience.

Static site generators (e.g. Jekyll) and build tools (e.g. Gulp), provide a mechanism to automatically build web applications locally, producing a set of easy to cache static assets. These static assets can then be deployed via a simple “Git Push”, following a traditional Continuous Integration / Continuous Deployment methodology.

The advantages of a JAMstack web architecture are outlined below.

• Performance: Web applications are pre-built, delivered as static assets that are served over a CDN, which promotes caching and efficient Search Engine Optimisation (SEO). Traditional web applications are built server-side “on the fly” and often heavily reliant on database queries, which all impact performance.

• Security: Static assets offer the highest level of security for web applications, due to the fact they do not require databases, plugins or execute dynamic code server-side. Any required server-side processes are abstracted into service APIs, called by the client, which significantly reduces the attack surface. Traditional web applications often require server-side plugins (e.g. Wordpress) to operate, which are extremely vulnerable and require continuous maintenance.

• Automation: Workflow is highly automated through the use of modern static site generators and build tools, with deployment occurring via a simple “Git Push”. This approach results in loose coupling and a clear separation of concerns, delivering a simplified development and debugging environment.

• Cost: Static assets are simple to host, as they do not require complex server-side configuration. This simplicity ensures a highly competitive market and therefore very aggressive pricing (even free).

If you are still not convinced, linked below are few examples of web applications built using the JAMstack web architecture:

• Smashing Magazine: Gulp, Hugo, Sass, GitHub and Netlify.

• Sphero: Grunt, Angular, Sass, Contentful, GitHub and Netlify.

• MarvelSearch: GitHub, InstantSearch, GitHub Pages and Cloudinary.

• Serverless Framework: Webpack, React, GitHub, Auth0, GitHub and Netlify.

LifeinTECH is also a JAMstack web application, using the following technologies: Docker, GitHub, Jekyll, Sass, Disqus and Netlify.

The image below from Google PageSpeed Insights, highlights the performance of LifeinTECH and JAMstack.

To learn more about the JAMstack web architecture, “jamstack.org” has a wealth of reference material, examples and developer resources.