Introducing JAMstack - The Beginner's Guide

Over the course of past few years, JAMstack has risen in popularity. However, compared to many other development trends and concepts, JAMstack still remains somewhat enigmatic for many developers, freshers and experts alike.

So, what is the big deal surrounding JAMstack and why should you care? More importantly, how can it make life better for developers? This article will answer such questions surrounding JAMstack, right from a beginner's perspective.

What is JAMstack?

Here is how JAMstack describes itself:

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

Let us take a moment to analyze the above description bit by bit. We know what a web development architecture means, but what is it based on?

• The first entity is JavaScript,
• The second being APIs
• And the final one is markup.

Thus, JAMstack combines JavaScript, APIs and Markup in order to build diverse and more functional websites and applications.

Let us go back for a minute to the traditional method of web development, that is, by means of using a predefined Content Management System or CMS. Using such CMSs has several advantages of its own. For instance, we can save a lot of development time and efforts as the Content Management System can organize our developmental workflow. It provides a predefined set of rules and layouts and we can build our projects accordingly. Furthermore, we can provide our clients with an interface to manage or deploy the website with ease.

However, such CMSs have a very obvious drawback -- be it WordPress, Drupal or something else, all of them tend to be fairly opinionated. It can provide to be a handicap for web developers that are trying to come up with a modular client-side stack and do not really need all the features of a CMS.

In such cases, we need to shift our focus from a backend-driven application to a frontend-centric workflow. This is where JAMstack comes in to play.

How Does JAMstack Work?

Now that we know JAMstack is a methodology composed of three concepts, we can safely assess what happens where:

• JavaScript is responsible for all the dynamic functionality in our app or website. We can opt to use Vanilla JS, or rely on a framework of our choosing. There is no restriction as far as frameworks are concerned.
• For server-side operations and functionality, we can deploy reusable APIs and then access them over HTTPS using JavaScript. In general, most frontend developers use third party apps for such APIs, albeit we can always code our own custom APIs as and when needed.
• Lastly, we generate the Markup to serve the website. This can be done using any static site generator of our choice, as the Markup is generated in the form of static HTML files.

That is all! We can start off with any JavaScript framework, a third party tool for API management, and a static site generator. This can help us get on board the JAMstack workflow and easily build and deploy modular web pages.

With that said, do we really need to care? What greater benefits can we actually avail if we are to follow the above-mentioned JAMstack ideology?

Advantages of Using JAMstack

There are several benefits that JAMstack has to offer. To begin with, it is generally faster than deploying a dynamic Content Management System. This is because everything is generated by means of pre-built markup and served as static HTML files. As such, there are no databases to query back and forth, nor any complex functions being run on the frontend again and again.

Similarly, JAMstack is also cheaper to maintain. We do not actually need to run a database engine on the side all the time, nor do we need to spend several work hours to tweak and customize our CMS to suit our requirements. In the long run, operating costs can be really less when building websites atop JAMstack.

Thirdly, JAMstack is inherently more secure than a dynamic CMS-run website. This is because there are no live databases that the website is continuously accessing. Similarly, there are no custom plugins or templates that can be easily exploited by hackers.

Fourthly, and most importantly, JAMstack has earned a reputation for being highly scalable. As we already discussed above, using a Content Management System can often prove to be a handicap as the CMS is trying to do too many things simultaneously and it may not entirely fit within the purview of our project. JAMstack, on the other hand, can easily be scaled as per our needs to suit our project.

Lastly, JAMstack offers greater control and ease of use to developers on the frontend. Since we are no longer bound by the limitations of a monolithic setup, we can take greater liberties and focus better on the frontend.

With that said, now that the advantages of using a JAMstack architecture are clear, how do we get started with it?

Using JAMstack

We have already learned that JAMstack is not a set of tools per se. Instead, it is a way or methodology of building websites and web apps.

As such, we can make use of any tool of our choice. For the JavaScript component, we can rely on any framework that fits our needs. It can be the likes of React, Angular, Vue.js or even Vanilla JS, should that be desired.

That said, as far as APIs are concerned, it is often a good idea to rely on a headless CMS. WordPress, Drupal or even Ghost can serve as a good headless CMS for our project, depending on what we are trying to accomplish. However, should a headless CMS not appeal to you, custom coding the APIs and then using them as reusable entities is always an option.

For the Markup, a static site generator that can create HTML files from Markdown is all we need. The options are plenty -- VuePress, Hugo, Hexo, Jekyll, and so on! It all boils down to the one that is more apt for our usage.

At this point, it might be worth pointing out that a Content Delivery Network is of the essence here. Of course, we can rely on something sub-par, but that pretty much defeats the purpose of such modular development. Using a CDN to serve static files on the web is a very good idea as it can enhance the performance of the website by loading pages faster.

Similarly, if we need to update and re-deploy the website time and again, a version control system such as Git might come in handy.

That is all! Using JAMstack is no rocket science, especially if you have already been using JavaScript and static site generators.

However, JAMstack is no silver bullet either. At times, it might not be feasible to rely on JAmstack entirely.

When Should You Not Use JAMstack?

In simplest of terms, if the project in question requires a tightly-knit connection between the server and the client, JAMstack is probably not a good idea.

Such examples where JAMstack is not used include:

• Monolithic web applications, such as those coded in Ruby or Python and are server-driven
• Applications that require isomorphic rendering
• Websites that cannot be generated in static form all the time
• Websites that just need to be built with CMSs, such as WordPress or Drupal
• Websites that are built using hosted solutions such as SquareSpace

Conclusion

All said and done, JAMstack is a cost-effective and less resource-intensive concept of web development. For all practical purposes, it is a good coding methodology that is especially apt for frontend development.

If you have not already given JAMstack a spin, you should consider doing it sometime soon! It is a novel concept that can really help you save a lot of development time and efforts, and also assist in developing good coding practices.