A Practical Introduction to Jamstack
What is JAM Stack?
If you’re into Web Development and have worked with one or two Javascript Frameworks at one point, you most likely have come across the terms MERN, MEAN, and, most recently, MEVN Stack. MongoDB serves as your non-relational database in these stacks, while ExpressJS and Nodejs are your web server. One similarity between these stacks is the presence of a web server. This is where the Jamstack differs.
JAM stands for Javascript API Markup, an abbreviation of the technologies used in building a web application. Here’s a pretty straight forward explanation of what JAM Stack is from the official Jamstack website:
A modern architecture for creating fast, secure sites and dynamic apps with JavaScript, APIs, and pre-rendered Markup, served without web servers.
Why is it necessary?
From the definition, “without web servers” is in bold text because this is the basic idea of JAM Stack. With JAM Stack, front-end developers can build useful, functional web applications without the need for a backend.
With just your frontend skill, you can build awesome useful applications thanks to the Jamstack specification.
Some examples of existing sites built with JAM Stack are:
To learn more about jamstack, check out the official jamstack website: https://jamstack.org/
A Practical Example
We’ll be building Chucklarious. Chucklarious is a collection of random Chuck Norris jokes. If you’re not sure who Jon Skeet is, he’s infamously referred to as the Chuck Norris of Programming. I had mentioned a bit about him here:
Problem Solving Hacks - by Martins Onuoha
Prerequisites
- Basic knowledge of HTML, CSS, and Javascript
- Familiarity with Javascript’s fetch API.
- We’ll be working with the opensource Internet Chuck Norris Database API
Folder Structure
We have a basic folder structure, you can ignore the Img folder.
Markup
From the screenshot of Chucklarious, you’d notice we have a basic structure of top Navbar, Cards and a FAB at the bottom right.
- I’ll be using MaterializeCSS however, feel free to use whatever you want for styling.
- For Content rendering and semantic templating, I’ll be using Handlebarsjs
If you checked the live example you would notice a preloader just before the page loads. The Navbar comes right after the preloader.
Next, we’ll build out a content to show the user in case of failed page load.
For content rendering, we’re using Handlebars, Handlebarjs is a minimal templating engine. Handlebars templates look like regular HTML, with embedded handlebars expressions. Those expressions have a format like so {{ some expression }}. These expressions make it easy to render contents dynamically, one of which is the {{ each }} which works like a regular for loop in Javascript.
Notice we have a button for reacting to jokes. I’ve attached an on-click event to the button, called the LMFAO (terrible choice of name by the way) function and passed the joke id as an argument.
We would also need a prompt just before the user closes the application.
Finally, we include the scripts at the bottom, right before the closing body tag:
Styles
Let’s add a bit of styling for the preloader and card content:
API
I mentioned earlier that we would be using the icndb.comAPI. They provide an endpoint to fetch random jokes and also limit the number of jokes to fetch per request.
The endpoint would look like this:
https://api.icndb.com/jokes/random/10
Let’s see what the structure of our JSON response would look like:
First, we’d handle fading in and out of the preloader and toggling the FAB.
Next, we call the getData and showTip functions once the page is done loading:
Let’s implement the getData function:
Using the Javascript fetch function, we’ll send a GET request to the endpoint, get the JSON response and set it as the value of the “jokes” key of the context object. We’ll also grab the content of the script element and compile it to a template so it can be executed. Finally, we render the compiled template:
Next, we implement the ShowTip function:
Finally, we write a function to reload the jokes and another to react to a joke:
If you’ve come this far, then I’d expect you both understand the idea behind JAM Stack and have successfully replicated Chucklarious. 🎉🎉🎉
Be sure to read more on the JAM Stack ecosystem and get your hands dirty with practice.
You can find a live example here. The source code also lives here.
Cheers. 🍻
