How JAMstack is future proofing websites

Author: Jake | Created: 10-01-2021

Let's start with a simple question.. why does your website need JAMstack?

So as you may know, traditional websites or CMS site (WordPress, Drupal) all rely heavily on servers, plugins and databases. But using JAMstack, it can load some JavaScript that it receives data from an API, serving files from a CDN and using a markup generator which uses a static site generator during deploy time.

We know, sounds pretty cool right!?

So what are the benefits of JAMstack?

JAMstack is fast.. like really fast - Nothing beats pre-built files which are served over a CDN to minimize loading time. The reason why JAMstack sites a fast is due to the HTML being already generated during deploytime so it is just served via a CDN wihtout any interference or delays in the backend.

JAMstack is highly secure - Due to everyting working via an API, there can not be any database or security breaches. This is because server-side processes are abstracted into micro service API's, meaning surface areas for attacks are reduced and so your site becomes highly secure.

JAMstack is cheaper and easier to scale - As JAMstack sites only contain a few files which are minimal in size, it can be served from anywhere. Scaling is a matter of serving files somewhere else or via CDN's.

JAMstack, a design philosophy which aligns with Googles optimisation guidelines. Using Facebooks framework React, developed for the modern web. Bypassing slow browser page structuring, loading, and updating by creating a virtual page and swapping it with the live page.

Globally, the average webpage loads in 8.66 seconds. But, anything above 3 seconds drives away customers. JAMstack is the gamechanger your business needs.

So what exaclty is JAMstack?

The future of web design is static pages, optimised for any browser, any device, any screen size and served from the nearest point on a global network. Static sites can be downloaded while the user has a connection and cached for offline use. Offline caching allows for instant page loads and always available content even on a poor connection or an old device.

JAMstack is a modern web development architecsture. It is not any form of tool or programming language. What it is, is a web development practice geared towards producing better performance, higher security, lower cost of scaling, and better developer experience.

Why JAM?

JAM stands for JavaScript, API & Markup.

JavaScript - Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use.

APIs - Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function.

Markup - Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator.

So lets go into these in a little more detail:

JavaScript

Traditional content management system (often referred to as using a monolith system) you have everything coupled together, from the database, content and frontend templating all being handled in the same system. While there is nothing wrong with that, it is limiting in terms of functionality and performance.

JAMstack websites are built to be flexible and not have one part of the architectural setup limit another. JAMstack websites are completely split up with each part serving a more specific and limiting purposes. JavaScript is in charge of displaying the content to the end user, whilst ensuring a great user experience. The 'J' in JAMstack stands for JavaScript, but this doesn't mean you are restricted to JavaScript. You can still use the likes of Ruby, Python or GO. That's the beauty of it all: you have the flexibility to choose which framework to use and how you want to use it.

APIs

API's stand for application programming interfaces which are used to define what type of interactions are possible between multiple softwares. Born in the year 2000, APIs have evolved a lot since then, just like a lot of other technologies. Being built for workflows and processes of web development back then means APIs were only meant to be consumed by server side applications, due to that being the way back then.

But with the development of new JavaScript standards, this all changed. Web APIs were developed and became available to any JavaScript client running in a browser. This has become a complete game changer and one of the big momentum swings for the JAMstack architecture as web APIs are no longer needed for the serve to do all the heavy lifting. APIs are also becoming more available for pretty much anything, making a movement towards using them as microservices. These are essentially small pieces of code that serve specific functions which are completely independent of other services. Creating an architecture of services that work independently but seamlessly integrating and connecting to deliver a web of functionality.

The beauty of web APIs is the flexibility. You can use the best-of-breed solutions and services instead of being forced to use something by your current system.

Markup

As we know from SEO (search engine optimisation) content is king and with JAMstack this comes in the form of Markup.

The popular HyperText Markup Language (HTML) is the core of the modern web and is understood by all browsers. HTML's main functionality is to present Document Object Model (DOM) that is ready to be parsed, presented and processed by web browsers. As well as web browsers different technologies like search engine crawlers, smart devices and screen readers can also work with DOM. The way HTML works has come a long way with its primary job still being to serve up content and its structure to the browser to display. This hasn't changed with JAMstack sites, but the way it is being done has.

Rather than replying on the server to build all of the content with every request of the client (website view), it is relying on cached content. This is accomplished by using a build tool to pre build the markup and deliver it to a Content Delivery Network (CDN). This was means the server will not have to work real-time on new requests and only work when new changes are made by content or assets.

With the markup prebuilt and ready to be consumed, it is up to the JavaScript to call in the content it needs. If dynamic or customized content is required that'll be handled with APIs instead of having the server request it from a database.

Using JAMstack vs. traditional CMS for your website

The biggest difference between the two is how tightly the content, code and design is connected.

With a CMS, for example Wordpress, you'll be handling everything in the same system. You will have the standard backend interface where your developers will be handling all of the code and design templates. The content will also be created, updated and managed from the backend interface with it all being stored on a database. Once a page gets a visit from a user, it will be assembled by the server and delivered to the visitor and the page is shown.

With a JAMstack site you're decoupling all of these parts and handling them separately. This decreases all dependancy and gives you the freedom to choose your own tech stack.

One of the key differences between the two platforms is how pages are generated for a website visitor. We have spoken about how a CMS loads up content but with a JAMstack site, you're almost entirely replying on the client-side instead of the serve-side. Your pages will be stored in cache - typically using a CDN - as Markdown and JavaScript, which will be ready and waiting for a visitor to land on the website. Once a visitor visits your page, it will all be ready to handle, without having to go back to the server to assemble it.

This has many benefits in terms of the user experience by also has a positive impact for your websites Search Engine Optimisation.

Conclusion

To put it simply, we believe all new websites and apps should be built with the JAMstack. That isn't to say we dismiss using any other platform like Wordpress as they still have a place on the web. In any case, we are seeing a big shift in the way the web is developed using the JAMstack and the change is going to be amazing!

JAMstack is how the web should have been built. Whether you are building or upgrading an existing website or apps, you should always use the modern architecture JAMstack.