Let's learn about the JAM Stack


Related image

Don't get intimidated by the image above. I don't mean this JAM when I am talking about the JAM Stack. This is a technical blog, so sadly nothing about food here. 😋 The JAM Stack is not very popular among most of the Web Developers and a lot of them(maybe including you) haven't heard of this thing called as the JAM Stack. Don't worry, I got you covered. After reading this article, I am pretty sure that you will understand about this JAM Stack and why it is necessary for you. So, without further due, let's get started.

What is the JAM Stack?

Image result for jam stack web

The JAM Stack focuses on the front end build and avoids using Server-side functions as much as possible. The basic gist of the concept is that you do NOT use a database and try to minimize the server-side stuff in your application using some 3rd party RESTful API or one you built yourself using any technology(Node.js, Ruby on Rails etc.) The JAM Stack stands for JavaScript, APIs and Markup. Let's dissect each one of these :

  • Javascript 
The language of the web and the "J" in the JAM Stack can take many forms, it can be a frontend framework, or a library or even plain vanilla JavaScript ranging from Angular to React to Vue, you name it. It resides on the client side handling requests and responses. All sorts of dynamic programming involving request/response is handled by JavaScript in the JAM Stack.

  • APIs
All the server side processes and database related stuff is handled by the APIs or the "A" in the JAM Stack. The API is accessed by JavaScript driven HTTP calls. Now it's important to note that the API may not necessarily be a 3rd party API. You can choose from anything, whether it be a bazillion pre-packaged API or your custom one built(REST API in almost all cases) using any framework.
  • Markup
The "M" in the JAM Stack is the part which the user sees when they access your web app. You can use static site generators such as Jekyll, Spike and Hugo to generate templated markup damn easy. This markup should be built before you deploy your app.


Why use the JAM Stack ?

Image result for why would i do that gif


A huge chunk of websites on the Internet, except a few, do not require frequent updating. That's where the JAM Stack shines over the normal client-server architecture. It's faster, cheaper, more scalable and offers in-built security.

  • Faster Performace: Since the JAM Stack involves very less server-side work, there's no need to query a database and you get already compiled code, that paces up the things. Every user gets the same page, that makes it fast and for sure gives a rise in the app performance. In short, you do not need to wait for the pages to build because they have been already built at the time of deploying the app.
  • Offers Better Security : The key rule of thumb here is that static sites are incredibly secure in the absence of a database. That means you have no SQL Injections, and since you have minimal interactions with the server, that means you have fewer chances of being attacked by hackers. All the server-side processes are abstracted into microservice APIs, thus reducing the chances of attacks.
  • Cost Efficient : The overall expense of building, maintain and deploying a JAM Stack app is way lower than other options. With all the focus being entirely on the front-end, you need less number of developers and a small team can do the job pretty well. You do not need a database, less servers and so the deployment is also easier and cheaper.
  • Easier to scale up : With everything served on a CDN(Content Delivery Network), an increase in the traffic or in case of a network failure, your app doesn't go crazy and yeah using a CDN, scaling up really becomes a lot easier than using a server explicitly.
The core principle behind the JAM Stack is that everything from JavaScript code to your markup lives inside a git repository. Once your code is pushed onto GitHub, you have everything centralized at one place and obviously which is secure and robust.

The JAM Stack definitely eases up and helps you with a lot of things but as everything does, this also has its own limitations. You cannot use JAM Stack to build apps with a lot of interactive features and apps that need real-time updates. Elsewhere as we discussed, it shines pretty well but not here.


Also, it is relatively new in the community and has a steep learning curve for people who are new in this domain. So, it takes a little time for a newbie developer to get used to the concept of JAM Stack.

All the above being said, the possibilities with the JAM Stack is increasing everyday and you might wanna understand the basics of this relatively new stuff and hopefully, I was able to do that in this short post. This was just a short introduction to get the basic idea into your brains. You can always explore more on the internet. So I guess that's it for this post, hopefully you gained something out of this. As always, keep coding, keep developing, keep learning. Stay Healthy, Stay productive.



Comments