A Winning Combination – JAMstack and Edge Computing

May 7, 2020

In recent years, there has been a growing movement in the developer community to use static site generators to build websites, a trend that harkens back to the early days of the Internet when a website was simply a folder of HTML documents that consisted of a handful of tags. We gradually moved towards dynamic sites with graphical headers and more complex navigation, which required a great deal more technical skill to author. Content management systems (CMSs) then emerged, such as WordPress and Drupal, to help non-technical users manage their own content and control a site’s design and display. However, CMSs have developed a reputation for being cumbersome and slow to work with, and often struggle with issues around scale and security.

In response, there has been a resurgence in static sites due to their simplicity, security benefits, and ability to quickly serve content. Today’s static site generators offer a better developer experience, based on the most modern technology and JavaScript frameworks such as Vue.js and React.

The JAMstack: What is it?

The Jamstack, a term coined by Mathias Biilman, the CEO and co-founder of Netlify, is gaining traction with frontend developers. The Jamstack isn’t a tool or a programming language, but a modern web development architecture based on client-side JavaScript, reusable APIs and a pre-built Markup.

According to Jamstack, it represents “a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.” While Jamstack highly encourages as much pre-built markup as possible, good for speed and SEO, prebuilt markup isn’t a requirement.

One of the keys to lower latency is the ability Jamstack offers to serve pre-built files over an edge compute platform. When deployment is a stack of files that can be served anywhere, scaling simply involves serving those files in more places. By serving Jamstack projects directly from the edge, significantly faster speeds and superior performance can be unleashed.

JavaScript, APIs and Markup: The Jamstack Foundations

Why the name? Jamstack stands for JavaScript, APIs and Markup, which can be thought of as the Jamstack foundations.

JavaScript

  • Dynamic programming during the request and response cycle is handled by JS, entirely on the client-side.
  • You can use pure JavaScript or any other framework or library available, such as React or Vue.

APIs

  • APIs allow you to use backend functionality without a database or backend engine on your server.
  • All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript.
  • You can use public or private APIs. They can be custom-built or leverage third-party services.

Markup

  • Templated markup should be prebuilt at deploy time, typically through the use of a static site generator for content sites, or a build tool for web apps.
  • You can write your own HTML and CSS code
  • You can adopt any framework, such as Hugo, Jekyll, or Gatsby, to build the presentation layer of your site.

Note, however, the Jamstack doesn’t have to include all these. It might be any site built with a static site generator, such as Jekyll, Hugo or Gatsby. A list of example sites can be found here. What Jamstack sites have in common is not being dependent on a web server.

The Benefits for Developers

The Jamstack has been rapidly gaining traction with JavaScript developers. Let’s look at why.

A More Straightforward Deployment Process

Jamstack looks back to the days when most websites on the Internet were static and the deployment process was straightforward. There’s no need to send files via FTP with Jamstack. Instead, deployments are git pushes of a dist folder, allowing you to publish a new version of your website by executing a single command from the terminal.

Time Savings

One of the biggest benefits for developers is the time saved at each step of the development process. Code doesn’t need to be written from scratch. The deployment process is more straightforward as you don’t have to consider the database or backend. You simply deploy a static website on which most of the content is already present.

Loose Coupling and Separation of Controls

Developers can benefit from loose coupling and separation of controls, enabling more targeted development and debugging. You build with cloud functions when you need to do server-side code since you don’t have a traditional server-side language to reach for.

Overall Benefits

  • Faster performance
  • Infinitely scalable
  • Higher security (due to reduced attack surface area)
  • Less expensive
  • Rebuilt automatically every time content is updated
  • Content is served directly to the edge

A New Type of Frontend Development

The Jamstack is part of a wider revolution in the frontend development ecosystem, which has been rapidly gaining momentum over the last few years (check out our recent article on micro frontends).

Fundamentally, frontend development has massively changed in several key respects. Git has largely replaced FTP, not just for version control, but also as the main way that developers collaborate, communicate and publish. Browsers have become much more powerful, going from being merely document viewers to application run times. The API economy has exploded with microservices, which you can talk to directly from the browser. Modern JavaScript and a world of frontend build tools has exploded and changed what the daily workflow of any frontend developer looks like.

Another developer trend that’s part of this is the movement towards web components. Components look the same across channels: web, mobile and desktop, and enable the trend toward design systems, which keep a consistent company style across all products and web properties. For frontend teams, web components allow them to move much more quickly since they are universal and re-usable.

Component systems, micro frontends and the Jamstack are all part of the overall lowcode/nocode trend.

Edge Computing and the Jamstack

One of the main advantages to building sites with this approach is you can move away from the concept of having a single origin. This means you no longer need to rely on a single point of failure. It also means you can move away from having to do a round trip to your server in the geography where it is based. If the server is in New York but your customer is in Tokyo, with a single server, the Tokyo-based customer will have to wait longer before they see the initial HTML.

Since Jamstack projects don’t rely on server-side code, instead of living on a single server, they can be distributed. In a Jamstack architecture, a page request doesn’t need to hit an origin server for HTML. Instead, it fetches HTML from a distributed edge network where the HTML file has been pre-built and is already primed to be downloaded.

Serving as much of your app as possible directly from the edge unlocks extremely low latency and powerful performance. It also makes horizontal scaling significantly more straightforward since an edge platform can serve many more requests concurrently, and there is no need to worry about the load capacity of a server or database during traffic peak periods.

It can also boast security benefits. For instance, access to an end server can be verified directly at the edge using JSON Web Signature (JWS). This means requests can be made secure without extra load time from a full round trip to authentication servers.

The architectural framework of the Jamstack is a natural fit for edge computing. Using an edge compute platform like Section, frontend teams don’t need to worry about how to stand up infrastructure or orchestrate workload deployment to the most optimal locations. The edge platform abstracts these complexities, so frontend teams can concentrate on improving user experience and building the next great product.