JAMstack series (part 1 of 4): Basics of JAMstack

15 mei 2020 om 13:32 by ParTech Media - Post a comment

Web development is not the same it was 10 years ago. Even though dynamic CMS platforms like WordPress or Drupal can make life of users easier, it also comes at the cost of less performance and less security.

Enter JAM, which stands for JavaScript, APIs, and Markups. A framework that has helped developers to revolutionize the way websites are built. Implementing a website using JAM is not only easier and faster but costs much less. In this post, we are going to see the reasons why JAMstack is gaining tremendous following these days. Along with that, we are going to deep dive into how JAMstack works along with a view on how different it is from a traditional stack.

This is the first part of a four parts series on the JAMstack framework.

Table of Contents

  • What is JAMstack?
  • How JAMstack works?
  • How is JAMstack different from the traditional model?
  • What are the benefits of JAMstack?
  • What are the limitations of JAMstack?

What is JAMstack?

In simple words, a JAMstack is a web development architecture that is based on the client-side JavaScript, reusable APIs, and a prebuilt Markup. Using JAMstack for developing a website gives developers a chance to reap the advantages of a static website such as better performance and security, but at the same time incorporate dynamism into it. All of these without the site being weighed down by a database and a server. Any JAMstack website typically comprises of three parts –

  • JavaScript – It is used to fetch all the data to your website and handles the dynamic functionalities of the website. It typically runs on the client-side.
  • APIs – The API determines how you access the data. They are a reusable abstraction of what was present on the server in a traditional model.
  • Markup –They are generated from the source files with the help of a static site generator or build tool. In simple words, the Markup is used to create content for static websites that are then served as an API endpoint.

How JAMstack works?

A JAMstack framework is widely used for building static websites. To build them using JAMstack, we use a Static Site Generator (SSG). A developer can add content to these static websites in multiple ways. They can use a headless CMS or a Git-based push of content with the help of a markdown. The content from either of these methods is received at the SSG. In the SSG, the code gets converted into a static site once the content is pulled.

A static site typically constitutes a bunch of HTML files and images. As a result, they can be easily copied into a Content Delivery Network (CDN) to generate multiple versions of the site stored in the CDN’s datacentres in different geographic locations. Since there is no dependency on servers, and the sites are stored in various data centers across the world, the JAMstack sites are delivered at lightning-fast speeds from the nearest datacentre of your location. The browser serves the static files it receives from the CDN and also the Markup that is generated from the static site generator during deploy time. Any dynamic components in your static websites are managed with the help of an API. In fact, the entire database access is handled by the APIs since there is no actual database in a JAMstack website. The APIs can be called within your JavaScript code.

JAMstack Workflow

How is JAMstack different from the traditional model?

In the traditional flow, the building and hosting mechanisms are coupled. So whenever a user requests a page, the request gets processed and a response is generated after interacting with the database, web server, app servers, and the backend code. As a response, the entire HTML page is served to the browser. This means a slower load time and also makes the system vulnerable to threats due to multiple components (such as servers, databases, etc.) in the architecture.

In the JAMstack flow, the building and hosting are decoupled. So whenever a user requests a page, the page is already pre-built and readily available in the CDN. The Static Site Generator is used to build the static sites and the built files are shipped to CDN. Finally, the pre-built site is served to the browser. This means improved speed and reduced chances of security attacks due to no interaction with the servers.

Difference in Workflow

What are the benefits of JAMstack?

High Speed

First of all, the applications of JAMstack are served as static files directly from a CDN. This means your application will be quick to load. No more requesting the server for response where the server will build the entire HTML page first before responding.

Low Cost

There is no doubt that JAMstack sites will be cheaper than the regular sites since there is no server. There are no server maintenance costs in the case of JAMstack applications. Also hosting static assets are certainly cheaper as there are no server-side configurations to be implemented.

Scalability

As you will be serving files from a static hosting like a CDN, there is a possibility of infinite scalability. Even if your website has an unprecedented surge in the number of visitors, the CDN will compensate for it without affecting the performance.

Security

One of the biggest advantages of JAMstack architecture is its security. Since the number of systems that interact with each other is minimal, the surface area for attacks is less. There are no vulnerabilities due to databases, servers, or plugins. Instead, it is recommended to just focus on securing your private content and ensure that the user’s private information is not compromised.

Automated workflow

The workflow of JAMstack is highly automated due to the use of static site generators and build tools. The deployment occurs through a simple Git Push based on the principle of Continuous Integration Continuous Deployment.

What are the limitations of JAMstack?

Though JAMstack offers a myriad of benefits for the developers and the users, it is not ideal for those web projects which have frequent and real-time updates and has a considerable amount of dynamic features for the user to interact with.

Another disadvantage of using JAMstack is that you can add components such as forms, comments, and galleries only with the help of 3rd party solutions. This means an additional burden of managing these 3rd party providers.

Lastly, any changes in the design of the website can be managed only by the developer and cannot be managed by you unless you are a developer.

Conclusion

In this post, we have seen the basics of JAMstack, how JAMstack works, and how it differs from a traditional technology stack. We also saw the many benefits it offers along with a note on the ideal target audience for this framework. JAMstack has been embraced by many companies across the world due to the low cost and the ease of development experienced by the developers.

In the next blog of this series, we will look into the top JavaScript frameworks available that are ideal for building your next website in the JAMstack framework.