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

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.

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.

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.

Originally published at https://www.partech.nl.

--

--

--

The people first agency. Digitale oplossingen, professionals en trainingen waarin de mens altijd voorop staat | humandigital.nl

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How To Choose Data Models and Databases For Your Use Case

Wanted: Senior PHP Developer

How to move funds from Wasabi Wallet to a Hardware Wallet?

Building Blocks

How To Fix The Software Industry By Discipline

Designing Upgraded Sticky notes

Reactive Extensions in .NET Core

Using pull, commit, and push- the 3 most important git commands

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Human Digital

Human Digital

The people first agency. Digitale oplossingen, professionals en trainingen waarin de mens altijd voorop staat | humandigital.nl

More from Medium

How to Add WPF UI Controls to Your Desktop Application

VS Studio Item Templates part 1: how to create a single file template using the VS studio built in…

The Simple Guide to Porting C# Code for RestSharp Next v107 and Beyond

How to build a CRUD Web API using ASP.NET Core Minimal Web API and Firebase Database.