Jamstack - a new dimension in creating applications and websites

What is Jamstack really? I think that a lot of people associated with Web Development have met this term, but not all are aware of the numerous advantages that this approach to creating websites and applications brings.

13 August 2021

What is Jamstack?

Jamstack is an approach to creating applications and websites that provides better performance, speed and security. It does not impose specific technologies, only a certain conceptual outline. So what is behind the acronym JAM?

  • JavaScript - dynamic functionalities are handled by JavaScript, but as mentioned earlier - there are no restrictions on the frameworks or libraries used
  • API - any number of external APIs can be used to build a website / application, each of which is responsible for a different functionality, e.g. authentication or search
  • Markup - pre-rendered HTML that is created during deployment using static page generators or application builders. These files are available very quickly thanks to the use of CDN (Content Delivery Network). It is a network of servers scattered all over the world that enables content to be displayed using the server closest to the user

The main assumptions of the Jamstack approach are pre-rendering and decoupling:

  • Pre-rendering - it consists in generating website files at the stage of its construction. This has a very strong impact on efficiency, because unlike the "classic" approach, we do not have to send requests to the server, for example for every photo or font on the page, but they are prepared in advance and ready for display
  • Decoupling - process of separating different systems or services from each other - in this case, separating the frontend from the backend

Integrations

There are tons of integrations available on the market that can be used in Jamstack websites and applications. The two largest groups are Site Generators and Headless CMS:

  • Site Generators - are used to build static HTML files based on the data used for the website (e.g. CMS, Markdown). The most popular generators include:
    • Gatsby
    • Next.js
    • Hugo
    • Nuxt.js
    • Jekyll
  • Headless CMS - a tool to be used by both editors and programmers. Editors using the interface can supplement the content to be displayed on the website, while programmers can download it using the API. Contrary to classic CMS systems, the appearance of the application is not determined by the supplemented content. The most popular systems are:
    • Dato CMS
    • CraftCMS
    • Strapi
    • Contentful
    • Sanity

Jamstack in practice

Below is a diagram of how Jamstack pages and applications are created and updated:

There are two ways to make changes to our site. The first is for the developer to upload a new version of the code to the repository, the second is for the editors to make changes to the content. Thanks to the appropriate configuration and the use of the so-called of webhooks, the new version is automatically built and made available to users. In this article, we have described a specific case-study using such tools and technologies as Gatsby, Gatsby Cloud and DatoCMS - we encourage you to read!

Advantages of the Jamstack

We have already presented the general assumptions of the Jamstack approach and the most frequently used integrations along with their application. However, what are the advantages of using it in practice?

  • Performance - because the files of our website / application are built during the deployment stage, we reduce the need to send requests to the server (which, of course, take a certain time). In addition, thanks to the use of the CDN network, we minimize the time in which the files are available to the user.
  • Security - the suppliers are responsible for the security and functioning of the external tools we use. This means that we do not have to worry about e.g. databases or servers in CMS systems. If a system failure occurs, we can be sure that its suppliers will be anxious to remove it as soon as possible.
  • Costs - hosting static files is cheap or even free (depending on the solution used).
  • Scalability - is ensured thanks to the use of the CDN network.
  • Ease of maintenance and use for programmers - from a programmer's point of view, it is a very convenient approach. There is no need to make backups or servicing the server, and the changes are transferred with the appropriate configuration only by sending the changes to the repository. In addition, launching the project locally is less complex (e.g. because there is no need to clone databases, etc.)

Limitations

Jamstack undoubtedly has many advantages and eliminates potential problems in some areas. However, like any other system, technology or solution, Jamstack also has some limitations:

  • shifting the responsibility for the functioning of external tools onto their suppliers can be both an advantage and a disadvantage, because we depend on someone else and we are unable to do anything when some part of our application stops working
  • the need to rebuild the website / application even in the case of a small change
  • data appearing while using the application (from external APIs) cannot be pre-rendered - in the case of few such data it is not a problem, but if we want to build an application using mainly data provided from external APIs, it is better to consider other solutions

Summary

By analyzing the characteristics, all the advantages and disadvantages of Jamstack, we can conclude that it will not be the best solution for all types of applications. However, it is likely to grow in popularity in the future due to its flexibility, performance and scalability. At PLEO, we used this approach to create the Apius (https://apius.pl/en) and Smart Security (https://getsmartsec.com/en) websites. From the programmer's point of view, I can admit that these were two sides, the implementation of which was extremely developing.