JAMstack for All: An Introduction

UpdatedMay 5, 2021

•6 min read•View as Markdown

Tapas Adhikary

Comments (9)

Join the discussion

Manuel Murphy2y ago

@ geometry dash, This is wonderful! I began working with JAMstack earlier this year, and it's great to learn more about it.

Koustov5y ago

Its nice read. Great content Tapas Adhikary. Looking forwards for more of these kind of writeups.

Wachukwu Emmanuel5y ago

This is a very nice article Tapas! I like the way you broke down the acronyms.

Tapas Adhikary5y ago

Thank you very much!

Michael Fasani5y ago

Tapas, this was great! I look forward to the next piece in the series.

I just started with Gatsby+AWS recently and I’m really enjoying learning from people who have been doing it longer, many web applications today could benefit from being mostly static (I think).

I have three questions for you: 🥳

Have you tried many SSG’s, what’s your personal favorite?🤔

As CI/CD is an important part of the process, How important is it to host with a large company like AWS, having access to those technologies, routing, CDN, serverless functions, do you think that’s important for the JAM stack?🤨

I have only tried AWS but I plan to investigate Netlify, do you recommend any others?🧐

I worry as a business evolves, the need for compute power potentially arises and then I’m not sure about the JAM stack, but that’s why I look forward to the next articles and hearing more. 😀

Tapas Adhikary5y ago

Michael Fasani,

First of all, great to have a reader like you! Really appreciate that, you took time to read, showed interest in the series and asked valuable questions 👍 🙏.

Let me try answering those:

Have you tried many SSG’s, what’s your personal favorite?

😃 I have not tried many. I have tried just three so far. Gatsby, Next and Hugo. I have called them out in my favorite order, however I liked all of them. As I am planning an article to touch-base the SSGs, I would save my answer until then on why Gatsby is my favorite(until now, with little bit of frustrations).

💡 One of the characteristics of JAMstack is Automatic Build and Automatic Deploy. No doubt, it has to be continuous too. I think it is important(cost, speed and security wise) to bank on some of those like AWS(Though I am not recommending only AWS here!). For my organization case, things are on AWS. Many of my personal projects on Netlify and GCP.

I have only tried AWS but I plan to investigate Netlify, do you recommend any others?

🔥 Yes I do. However we need to be clear on-the use-cases. Netlify can not replace AWS usage completely today but, there are many uses-cases for them to co-exist for a single solution. One example is, Netlify Functions which are easy deployment of AWS Lambda functions. With that, you may not want to use AWS cloudfront and have the JAM deployed with Netlify. I will be covering this part in one of the articles in the series when we see the server side of the things.

I worry as a business evolves, the need for compute power potentially arises and then I’m not sure about the JAM stack, but that’s why I look forward to the next articles and hearing more.

✍️ I will go back to my three pillar concept again. Security, Cost and Speed. The computing power and cost of managing those also related some ways. Yes, I am surely going to write about it in depth in future articles of the series.

💡 Thank you very much for asking and it also guide me further to design future articles of the series.

Have a great day!

Deactivated User5y ago

This is fantastic! I've started working with JAMstack earlier this year and it's great to see some more insight about it.

Tapas Adhikary5y ago

Thanks Diana!

Bolaji Ayodeji5y ago

This is really great Tapas, thanks for sharing!

Tapas Adhikary5y ago

Thanks Bolaji!

Deactivated User5y ago

Thanks for this article. Haven't understand fully the JAMstack concept but I await this series.

Tapas Adhikary5y ago

Sure Obi Zim, will try my best!

Victoria Lo5y ago

Always a delight to read your articles! Looking forward to the series :)

Tapas Adhikary5y ago

Thanks Victoria Lo!

Nelson Michael5y ago

been wanting to get an insight on JAMstack, can't wait for the coming parts, cheers.

Tapas Adhikary5y ago

Thanks NELSON MICHAEL! Cool, coming parts are on the way 😃.

Jamstack for All

Part 1 of 11

Jamstck is not new. It's around since 2015 and growing every day. In this series, We will learn about Jamstack basic to advanced concepts. Follow the series for knowledge, practical examples, and fun!

Up next

JAMstack vs traditional monolithic workflow

Welcome to the second article of the series, JAMstack for All. Thank you for your likes, comments, and feedback on the JAMstack Introduction article. This article will be diving into the JAMstack workflow with a side-by-side comparison of the tradit...

A bit of History

Once upon a time(yeah, it sounds like those fairy tales), web content used to be static. There were only a few content creators, while the majority were consumers. Unfortunately, there were no options for the users(or consumers) to contribute the content back.

The server's file system served these contents. The pages were built using Server Side Includes(SSI) or Common Gateway Interface (CGI). This era of the web was famously known as Web 1.0.

As time passed, consumers built the interest to contribute—the demand to interact and collaborate through social media grown bigger. The desire to share user-generated content gave birth to many virtual communities.

With this demand and desire, static pages served from a server were not enough. There was an increasing need for better markup support, page style support, and some dynamic content. Web programming introduced the likes of HTML, CSS, and JavaScript to content creators and application developers.

The Client-Server architecture also evolved where we needed a database or storage to store the content, A server to serve it on demand, and finally, the Client to request it. Enterprise application solutions also started becoming more user-friendly and, at the same time, more complex to manage. This era of the web is called web 2.0. We all are proudly part of it today to a great extent.

Here is a very high-level diagram of how a monolithic client-server architecture model may look like,

Few important aspects to note here. First, each of the blocks shown above may need some plumbings overtimes. So be it for upgrading OS versions, security patching, end-of-life of the services, or any other miscellaneous maintenance.

The database may need an add-on based on the customer use-cases, the web and application servers may need plug-ins based on the situations. But, the bigger question to ask,

Who will do all these plumbings/patching/maintenances?

The answer is straightforward. However, the work of upgrading, security patching, and maintaining is not so trivial. For example,

If you have your website built, managed, and hosted with blog creation tools like WordPress(or WordPress CMS), Drupal etc., it is their responsibility to ensure all maintenance, security fixes, OS upgrade, etc. happen on time.

Is WordPress secured? Well, it depends. As a user, you may get locked with a platform. In case of a security vulnerability or the origin server down, it impacts you directly.
In the case of enterprise applications, all these have to be maintained by developers, testers, build experts. So we can not afford any security issues, huge lags, downtime, etc., to impact our customers.

Don't forget about the cost. Managing, maintaining servers and databases in-house are not cost-friendly. It has to be funded well by the respective business units as part of their budget plans.

No matter what, these three pillars are essential to consider for a blogging platform, content creator, or enterprise app. These three pillars decide the customer success for you and your organization.

JAMstack

Alright, finally, we are here. In 2016, a few developers promoted the JAMstack principles. The real boom started in the year 2017 when they pushed the JAMstack concept further. The community started growing around it. The last three years have been exceptionally well for JAMstack, with people taking it more seriously than ever.

So, what is JAMstack?

"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup" — Mathias Biilmann (CEO & Co-founder of Netlify).

The JAM of JAMstack stands for,

A technology stack is not a new thing. We have seen many stacks evolved in the last couple of decades. However, an important point to note here is, unlike many of the technology stacks in the past, JAMstack is not yet another technology stack. It is instead an architectural concept. JavaScript, API, and Markup are the fundamentals of this stack.

The image below shows the conceptual differences between JAMstack and other technology stacks like LAMP, MEAN, and MERN.

JAMstack Myths

As a beginner to the JAMstack, you may be learning a few things, which are eventually myths(or misguided information). Here are a few that I have heard initially and was proven wrong as I gained more knowledge about this,

JAMstack is only for static apps(pages).
JAMstack is only for websites.
An enterprise app will not scale with JAMstack.
It is reactJs based.
GitOps is a new thing.
Huge Learning curve is required.
JAMstack can reduce Jobs!

Well, none of the above are true. We will prove it as we go further in this series. Please stay tuned.

Prerequisites and Mindset

JavaScript, API, and Markup are the bases of JAMstack. However, there are other three important keywords to keep in mind,

Client-Side JavaScript
Re-usable API
Pre-built Mark-up

We will need to call out a few prerequisites and demand a fresh mindset to implement a JAMstack solution. Do not worry if some of these are new to you. We are going to get into the depth of these in the future articles of this series.

Entire App is on CDN(or ADN). CDN stands for Content Delivery Network and ADN is Application Delivery Network.
Everything lives in GIT.
Automated builds with a workflow when developers push the code.
Automatic deploy of the pre-built markup to the CDN/ADN.
Practically Server Less(with terms and conditions).

Benefit

So what are the benefits of doing all these? Remember those three pillars we spoke about in the beginning? Security, Cost, and Speed? Yes, that's the benefit we will be reaping here,

"Practically Serverless" removes lots of points of failures & security exploits.
The pre-built content served via CDN provides extra speedy user experiences.
The lesser complexity of development reduces costs.
Develop => Build => Test => Deploy Cycle is very well managed.

What's next

I get that. It was all of theories and fundamentals. Yes, that was purely intentional. This article is about the JAMstack introduction. None of the new is so enjoyable without knowing the history, what, and why part of it. Thank you for reading through. Appreciate it.

In the future articles of the series, we will dive into the differences between a Traditional monolithic app and a JAMstack application. We will start looking into the usage of Static Site Generators(SSG) like Gatsby, Next, Hugo, etc. We will start seeing why Headless CMS, like Netlify CMS, Strapi, etc., are important to understand. How about the practical examples of the CDNs like Nelify, CloudFront etc?

That's all for now. See you with the next one soon ⏱️.

If it was helpful to you, please Like/Share so that it reaches others as well. To get e-mail notifications on my latest posts, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can follow me on Twitter @tapasadhikary.

JAMstack for All: An Introduction

Comments (9)

Jamstack for All

JAMstack vs traditional monolithic workflow

More from this blog

Goodbye, Slow-Motion Tortoise: A Deep Dive into SSR Streaming

Mastering React Design Patterns for Building Maintainable Forms

JavaScript Variables Explained Clearly: Values, Types, and How Data Really Works

JavaScript Explained From Scratch: How the Web Becomes Interactive

Tidbit 01: How Does Event Loop Handle Promises? Ever Thought?

A bit of History

JAMstack

JAMstack Myths

Prerequisites and Mindset

Benefit

What's next

Command Palette

Comments (9)

Jamstack for All

JAMstack vs traditional monolithic workflow

More from this blog

A bit of History

JAMstack

JAMstack Myths

Prerequisites and Mindset

Benefit

What's next