Categories: Development

What is JAMStack and what are its advantages?

JAM – an abbreviation that allows for many puns. But what is behind it and what does it mean?

The J stands for JavaScript. JavaScript is used on the one hand to develop dynamic web pages, and on the other hand to address the APIs that represent the A in JAM. The APIs can provide data that is displayed in the frontend. In addition, many APIs now provide functions that enable the operation of large websites without a central server application. The last component is M for markup, which is HTML to describe the presentation and content.

What is JAMSTACK?

The term JAMStack was coined by Mathias Biilmann from Netlify, and is now quite common for a certain concept in front-end development. However, there is more to the JAMStack than just the letters that describe the individual components.

It has already been mentioned with the APIs: A JAMStack application does not have a central, large server on which the entire back end runs and on which the architecture of the front end is also dependent. Rather, many independent but self-contained APIs are used. Some of these are commercial APIs that offer services such as user management, payment processing, or even weather data. Other APIs are so-called serverless functions; API endpoints that fulfill exactly one function. This specialization results in very small, easily maintainable modules that are often paid for per execution and are therefore usually cheaper than running everything in a large server application.

The code is versioned and managed in a central location, usually with Git, and built from there. The central element of the JAMStack is the prior rendering of the markup during the build. The final built files are usually deployed to a content distribution network (CDN). The global distribution to different servers and the pages pre-rendered during the build improves the performance significantly. In particular, the key figure “time to interactive”, i.e. the time until the user can interact with the page, decreases. This can not only influence the extent to which the user stays on the page, but also affects search engine rankings.

It is important to know that the JAMStack frontend framework is agnostic: whether vanilla JavaScript, React, Angular, Vue or a more exotic framework, anything is possible.

The Advantages of JAMStack

Performance
The most important advantage: The pages load noticeably faster (see examples here). By delivering small, pre-rendered files directly from the CDN, the page can be displayed very quickly by the client while the dynamic data is reloaded at the same time. Most of the rendering effort is shifted to the build time.

Simplicity
Thanks to the diverse tool support, websites can be created with the JAMStack in just a few minutes.

With the help of so-called static site generators such as Jekill or Gatsby, the development effort for many scenarios with ready-made components and already integrated API services is reduced immensely. In addition, there are frameworks for various front-end technologies that can now also generate static pages (e.g. Next.js for React or Nuxt.js for Vue). Many of the hosting providers also enable direct integration with various technologies, with which a page can be created and deployed within minutes.

If custom APIs are still needed, they are quickly realized using Serverless Functions, independent of other components of the application, and thus easy to develop or replace.

In some platforms, a content management system (CMS) is integrated for easy updating of the page content without knowledge of the technology. These are also headless, i.e. without their own server in the background, but only a frontend for the underlying version management.

Scalability
By not using one or more monoliths in the backend and splitting it into different, modular and independent APIs, the whole application becomes much more scalable.

External APIs should normally already be developed in a scalable way by the provider. Internal APIs as serverless functions can usually be scaled automatically.

Since the main effort in the frontend comes from the build (or from the client), performance with the JAMStack is much less dependent on the number of calls than with other types of frontend development. At the same time, any peak loads that may occur can be well mitigated by using CDNs.

Cost efficiency
The same reasons that make sites built with the JAMStack scale very well often ensure lower expenses. Since most components are billed on demand, there is no longer a need to pay for infrastructure for individual load spikes. In most cases, where peak loads previously drove the cost of the overall infrastructure, costs can be significantly reduced. In principle, these are advantages that cloud migrations have in general, but with the use of the JAMStack they become even more obvious.

What JAMStack platforms are available?

Various platforms offer services that can be used in conjunction with the JAMStack. Some of these have been specially developed for this purpose, others are general web services.

Basically, any hoster for static pages is sufficient for hosting the files. However, there are specialized offers that are tailored to the JAMStack. These often offer Git integration with automatic builds and deployments for commits, ready-made CMS options or simple integration of databases.

The most prominent representative for a pure JAMStack hoster is Netlify. Founded by Mathias Biilmann, who gave the JAMStack its name, they are pioneers and the largest company specializing in the stack. There are integrations to various version control systems (Github, Gitlab, Bitbucket) and Serverless Functions, a headless CMS, Analytics and Forms, an API that processes HTML forms directly. By specializing in the stack, a new project can be launched quickly.

Many other hosters offer a similar offering to Netlify. Github and Gitlab Pages are also JAMStack hosters. Below, we review the three major cloud platforms for their JAMStack suitability.

The big three

Google and Amazon each have their own platforms, Firebase and Amplify, that specialize in rapid web development. Both host static pages and serverless functions, provide authentication, storage and analytics. Compared to Netlify, there is no practical integration of a headless CMS, but there are numerous standalone ones as replacements. As an advantage over Netlify, both platforms have managed databases with easy API access.

Amazon provides easy access to machine learning offerings, for example, in the form of text recognition integration or voice command recognition.

Unlike AWS, Google does not offer direct Git integration in Firebase, but only in the higher-level Google Cloud Services. The integration can still be set up, although the integration effort is a bit higher.

Microsoft Azure does not have a special JAMStack offering. However, it basically offers most of the features as the other two providers, machine learning APIs, serverless functions, authentication, etc. What is missing is a database API, which has to be addressed with a backend or in a function. For this reason, Azure is especially suitable for projects with very few or very individual database accesses.

Article info



Leave a Reply

Your email address will not be published. Required fields are marked *