The JAM Stack

With JAMStack you build web apps using just: Javascript, APIs and markup with html files. Yeah just as back in the old good times, of course with the power of the current web services, frameworks and libraries that exist in our current web world.

¿ Why am I writing this ?

I heard about JAMStack from Freecodecamp, this post: https://freecodecamp.org. It was amazing to read about this guy's story.

I included JAMStack in my path, but becouse I was just starting to learn Javascript, I didn't put an eye on this topic for a while.

Time passed and I learnt some ReactJS and time to start playing around with Gatsby came.

My first steps

First time I did something with Gatsby was helping a community from El Salvador with an issue, don't remember what but it helped me a lot to start hacking up with more code. - The community: https://horchatajs.com

I also noticed they were using a service named Netlify(https://netlify.com) so I started googling around what it was.

At the end ended up loving Gatsby, started searching for services similar to Netlify, some of them are:

Now.sh (Vercel): https://vercel.com
Surge: https://surge.sh
GitHub Pages: https://pages.github.com

You can go and test them out, they all provide free tier like services and to be free they can help you build production ready stuff.

JAMStack what?

JAM means Javascript, APIs and Markup, the basis of this Web stack encourages to use Javascript to pre-render pages, APIs to connect with backend and purely static html files to serve on frontend.

JAM Stack is not gapped to specific JS, CSS or HTML flavours, tools, Preprocessors or technology. At the end what matters is to serve plain static HTML files with style and Javascript code browsers can interpret.

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

Benefits of using JAM Stack

Faster performance: Serving purely html files is the fastest way of serving stuff to client side
Less expensive: You are just having static files on your server, no need to keep a forever alive server any more. You simply need a CDN to serve this files
Better developer experience: Devs will be happy to use any framework they like. Frontends will only focus on doing Frontend with the most excellent experience, at the and static files are the ones that matter

Javascript

If you love Javascript as I do you will get this meme : ') . Javascript is currently a Swiss army knife. It's everywhere. The language has been updated to the point you can do things you couldn't imagine doing on the frontend back in time.

Browser APIs are another big plus for this success. In JAM Stack the Javascript part means of course that you can pre-render and render things on clients browser with the power of today's goodies such as ReactJS, Vue and Svelte.

There is a set of frameworks dedicated to help you on building things with javascript for the JAM.

API

There exist many services which you can use as CMS to host your page content and almost any top company start-up will provide you with an appropriate API service for you to include it on your website.

What “means” making API based platforms, is that you do not need to worry about Backend things while doing frontend, you simply focus on doing Frontend as you love doing.

As an example this Notes. This notes are presented to you by a server-less API powered by Netlify Functions service and to host the content I use GitHub Wiki's, for image resources I use Dropbox, I do not have to worry about servers or that stuff.

Also there's a cool function added to Github, GitHub Actions, that are automated workflows you can include to your projects. I'm using those actions to build an xml rss feed file.

THE HTML PART

At the end when Webpack, Parcel or any other file bundler technology bundles your files there will be plain vanilla html. This is the fastest way of serving things to the browser.

You can have your page content written in markdown, with help of Static Site Generators you could ship them as HTML pages, you can also template those pages and customize them as you need.

In conclusion

The JAM Stack is a way of making a web app, so that Frontends will only focus on doing Frontend, Backbend pals will only be doing their Backbend APIs. Both of them connect using just using those APIs.

At the end the platform will be serving static content to the client so it's load time is really, really small.

And... the JAM is one extra solution, not a replacement of existent Stacks

I really love JAM and JAMStack but there are some use cases where you will prefer to use another solution, imagine you are having a website that will serve more than 1K pages, which means the same or more .html files and assets. This will be really, really hard to maintain, test, etc.

This files will be served to users faster than an SSR alternative, but now there’s a bug on a specific page, you need to deploy this again and wait for the browser cache to reload.

A clear example of where I will not choose JAM Stack can be a big sized E-commerce platform, think of yourself getting an error you don’t know where the heck it exists, now sum up the fact it will live on the client side. It's possible to ship it to production, but such E-commerce will have many items, many client pages, store’s profile, dashboards, etc, etc.

Another huge use case is Twitter , picture this, think about all those frontend pages, tweets, threads, and deeper, and deeper pages this platform will contain, at least this will be a reason to me for not using a pre-rendering solution to build a Twitter.

Now what ?

I appreciate you kept reading this note at this point 😊, but keep in mind that what you read are just my thoughts of JAM Stack.

I do really love Javascript stuff, so hell 🤘 yeah I will be forever in love with JAM. Thing is, you better figure out yourself what JAMStack is, and it's benefits, pick a starter project at Gatsby or NextJS showcase: