loading...

Introduction to JAM stack

chirdeparag profile image Parag Chirde ・6 min read

In the past few years, there has been a tremendous development in the way how we build web applications and then how we deploy them. Many stacks such as MERN (MongoDB, Express, React, Node), LAMP (Linux, Apache, MySQL, Python), MEAN (MongoDB, Express, Angular, Node), etc have proven to be extremely helpful to developers. These stacks have been very successful in their respective ways for developing modern web applications and allowed people to come up with different software design architectures and principles. Moreover, the browsers have been evolving at a rapid pace and are much faster, secure, and powerful than ever before. This lead to a new ear of developing applications that at client-centric i.e client-side applications and concepts such as client-side rendering, client-side routing, and much more. It suddenly became an immediate factor that the websites should load faster, users wanted everything to load instantly, faster rendering, faster video loading, image loading. Due to this Google also nowadays ranks the website based on the loading time. (Lighthouse is a great tool developed by Google itself that check how fast is your website and also gives the suggestions of how you can improve the loading time significantly).

JAM stack is a new emerging software development philosophy which calls a news term of “serverless”. Serverless doesn’t mean the complete absence of physical servers, but it is more of a logical term. Cloud computing is the backbone when it comes to serverless applications. The cloud provider actually runs the server for you and at the same time manages the dynamic allocation of resources, load balancing, monitoring for your application. This means you really don’t have to go through the sometimes cumbersome process of setting up the server, managing, scaling, and the whole deployment process of your application. It is the cloud that manages everything for you so that you can only focus on the core logic of your application without worrying about the DevOps process.
Cloudflare defines serverless as follows: Serverless computing is a method of providing backend services on an as-used basis. Servers are still used, but a company that gets backend services from a serverless vendor is charged based on usage, not a fixed amount of bandwidth or number of servers.
The term “Serverless” is confusing since with such applications there are both server hardware and server processes running somewhere, but the difference compared to normal approaches is that the organization building and supporting a ‘Serverless’ application is not looking after that hardware or those processes. They are outsourcing this responsibility to someone else.
The serverless applications leverage all the advantages of the FaaS i.e Function as a Service architecture. FaaS is an event-driven approach that runs and executes your server-side logic via the use of services. AWS Lambda and Microsoft Azure Functions are some popular FaaS providers. Serverless can also mean applications where server-side logic is still written by the application developer, but, unlike traditional architectures, it’s run in stateless compute containers that are event-triggered, ephemeral (may only last for one invocation), and fully managed by a third party.

JAM stack brings in together Javascript, API’s and Markup Languages to develop the applications. At first, it might seem like a little confusing when someone reads about the JAM stack. When I first read I was completely confused about how do I even build an actual application without even having any server and just mere Javascript? But as I started to dive deep into the architectural phenomena of JAM stack I was presented with the whole new methods of developing modern-day web applications. And it all actually made sense!
Let’s consider a scenario where we are developing a small project management software. In a more traditional way you would first think about the frontend (Vue, React, Svelte, Angular, etc), then comes the backend server-side language or framework such as Laravel and finally the database which might be a SQL or a NoSQL depending on need. Then comes the part of setting up the database connecting with the backend and setting up the server. This consumes time and sometimes is just too tiresome. After that, you decide to write your frontend and decide to work with API. All your business logic is now in your backend and you manipulate the data received from the API. Every time you make a request to the server about a page the server accepts the request, queries the database, and pulls the data, renders it into an HTML template, and finally pushed into the network as a response. So every time you make a new request the same process is repeated leading to network latency. Another major thing in such an approach is that of scaling the servers and of course the database as the data grows. You may then come up with the idea of cauterization which is good, but scaling the database is again something that needs your attention. Horizontal scaling or vertical scaling? Hmm, Can’t afford the vertical scaling, let’s do sharding you’ll say. More and more time into the scaling aspect is utilized. Then at some point, you notice the application is quite slow and then you start looking for the optimization techniques. You see where have you reached and what was your purpose?
No doubt you have learned a lot but you would surely not go through the same tedious process for every new application you make.
Now, this is where JAM stack comes into action. A completely modern way to develop fast, secure, and scalable web applications.
By nature, JAMstack sites are the following:
• Globally distributed and resilient to heavy traffic
• Centered around a developer-friendly, Git-based workflow
• Designed modularly, consuming other services via APIs
• Prebuilt and optimized before being served

JAM stack websites are often deployed using a Content Delivery Network (CDN), Cloudflare being one of the most popular. A CDN geographically distributes your website and the user can then reach your website to the nearest possible server resulting in reduced load time for every request made. Since a serverless JAM stack-based application doesn’t rely on a server-side code they can be distributed using a CDN without living on the server. This also unlocks the website loading speed that every developer thrives for.

Now we have covered a good amount of datils about JAM Stack. I would like to add some information about microservices as well. Microservices is another architectural pattern of building modern highly complex and dynamic applications wherein you have a ton of functionalities and features embedded in your application. Consider microservices as lego blocks to build a lego car. Each functionality is broken down and has its own environment in which it works in a more decoupled manner than a traditional monolith application. Microservices work hand in hand with serverless and adding JAM stack on top of it would lead to a perfect technology stack for your next application. Decoupling the front end from the backend allows for more modular development where we can take advantage of the huge ecosystem of third-party tools to provide website functionality.

Now let’s dive into how to decide some technologies for your next project using JAM stack. Consider the example of building a simple project management application. Our frontend will be completely decoupled with the backend.

I have used VueJS for the frontend purpose. FaunaDB is a new NoSQL database technology that is emerging. It is based on serverless architecture and completely API based. This is a true example of how you don’t have to set up a database and then take up the task of connecting it manually. Using faunaDB’s javascript driver you can directly connect to the database using the secret key generated in the Fauna’s dashboard. It has its own authentication system and first of its kind in terms of being a 100% ACID compliant and a transactional distributed database. With FaunaDB you don’t have to worry about the scalability at all, its all managed by Fauna and thus you can now more focus on the core business logic and purpose of your application.

Here is a link to the actual application which is completely serverless and makes use of FaunaDB’s multitenancy as well.
https://vue-fauna-project.herokuapp.com/

Feel free to go through the repo
https://github.com/parag1997/vue-fauna-test

I will be writing about how to develop a completely serverless application using JAM stack and faunaDB in my next article.

References & more reading:
https://www.netlify.com/jamstack/
https://jamstack.org/

Discussion

pic
Editor guide