What the heck is JAMstack?

Abdo Rakhma / June 24, 2020

7 min read

We have all heard this new Buzzword "JAMstack" and there seems to be a lot of hype about this "new" thing that everyone (Not literally) is talking about. I will try to explain "The rakhma way" the basics and from where you can start.

What the heck is JAMSTACK?#

It is simply a Jam session for Cool web technologies. Next Article! I'm just joking of course (or am I? 😉) I can be cheesy sometimes 😅 Okay let's get serious, JAMstack stands for Javascript, APIs, and Markup, and it is simply a web development architecture, or in other words, A set of best practices and workflows that are based on these 3 pillars:

Javascript, where Dynamic operations are handled by javascript.
APIs, The app doesn't depend on a web server, instead, it connects to APIs / 3rd party-services, Serverless functions, ...etc
Markup, The final result that is shown to the users is served as static HTML files, whether from compiling a Text file, JSON, Markdown, or any other source of data.

And guess what? You might already have made a JAMstack application because it's NOT something new! It's the old static HTML, CSS, JS web apps, with just a better way of making them.

Why is JAMstack a thing?#

So now that we understand what JAMstack means, we need to understand the advantages that this architecture provides us 🤷‍♂️ The first thing that comes to mind every time you develop a classical web application is "Why repeatedly build a page for every request when the final result is the same ?" This totally makes sense for a lot of web applications, where passing by a server is just an unnecessary step that costs time and money. This is exactly what the JAMstack is trying to solve 💡 So when the user tries to request a page, the request does not hit a server that generates the response, but instead, the pre-builts HTML page is fetched from a CDN, which results in faster response time, a more scalable solution when your app goes viral and a cheaper solution because you don't need a dedicated hosting/server, because your pages live on a CDN, and you don't need anything else 👌

So to summarise, the advantages of using the JAMstack are:

🔥 Blazingly Fast, The HTML pages are pre-built and ready to be served to the end-user, no calculations needed, no parsing, no validations, no client-server communication to slow it down.
🔒 No worries about security, since you're not gonna be managing any server code, no database, and no-hassle about new exploits in PHP or NodeJS.
🎂 Easier to develop and ship, since you're gonna be focusing mainly on the front-end, not thinking about databases, servers, routing, exceptions, read/write, concurrency, and a lot of other hassles.
🚀 Scalable, it's just a matter of scaling your CDN to deliver content on a wider range, that's it.
💰 Way cheaper, you're not gonna be paying expensive hosting solutions or servers with more RAM, the only thing you're gonna ever need is a CDN to put your static files.

How can I start JAMstacking?#

Aha! Good question, that has 2 answers:

From scratch, meaning you will need to write your own HTML pages and style them using CSS and maybe add some dynamics to those pages using vanilla Javascript. This method is not the best if your pages might contain complex logic and functionalities, but it serves the purpose when your pages are quite simple and straightforward.
Using your favorite Frontend frameworks like React or Vue, where you build your UI and functionalities the same way you're used to, you can achieve that by using something called SSGs (Static Site Generators) more on that below.

What are Static Site Generators?#

If you use React or Next or any other frontend framework/library, you're already aware that building your application will result in a one or several chunks of code in JS files that gets called from an HTML file unless you're using Server-side-rendering which we are trying NOT to use since it requires a Server 😅 So in order to develop a good JAMstack application, we said earlier that we need to end up with pre-built HTML files and that is exactly what Static Site Generators help us to do! They are simply tools that allow us to write javascript with our favorite frameworks, generate and optimize the final result as HTML during the build time. And Indeed, there are already a lot of SSGs out there that you can, some of them are:

For react: NextJS and Gatsby
For Vue: NuxtJS
For Go: Hugo

And a full list can be found here: SSGs list where you can choose a tool and start JAMming.

Workflow and Best practices#

Developing your next JAMstack app is pretty easy if you pick a Static Site generator since what you have to do is to focus on creating the front-end and forget about everything related to back-end and databases.

Ideally, You wanna keep everything in Git, by pushing changes, a new build is triggered, and that goes right to a CDN, which makes collaboration way easier and simplifies the workflow.
Using modern tools for the best developer experience, like for example writing Markdown articles, CSV files, or any type of data storage and transforming them into actual HTML, Querying data from Headless CMSs in build-time and all the goodies that the open-source world has to offer that make life easier.
Ensuring Instant Cache Invalidation, in other words, no more of "I cannot see the new changes because of the cache" because every time you make changes in your app, you will need to rebuild and redeploy. so a good practice is to choose a CDN that does that for you.

There are also a lotta out-of-box solutions that provide you with Git integration, Cache invalidation, CDN, and more. To name a few:

How about Dynamic stuff?#

You might think by now that if you develop a JAMstack application, that means you can't have dynamic functionalities, like creating data, updating data, interacting with external data...etc, which is Incorrect! A JAMstack application can have all the dynamics you want, let us check some examples:

Going serverless, you can create functions and using them as reusable APIs, so instead of developing a whole server and going through all the hassles of setting it up, you can create serverless functions that you need for certain operations and interact with these functions from your JAMstack app, that way your code is decoupled and independent.
In case you wanna interact with data, you can still access services like Firebase or complete BaaS solutions that includes tools like GraphQL Fauna
For forms, comments and all in between, there are plenty of tools that do that for you and save you time and energy, without the needing of an actual server.

Final thoughts#

I enjoy building JAMstack applications, because I focus on delivering top-notch frontend and abstracting everything else to APIs, which makes me worry less about security, infrastructure, and heavy-lifting, also it allows me to have a great developer experience by a seamless workflow. In matter of fact, my portfolio/blog is written with NextJS with the JAMstack architecture 😎 In the upcoming blogs, I will share with how to make your first NextJS Application following the JAMStack approach, Stay tuned 💪🏼