JAMStack
JAMStack stands for
Javascript
APIs
Markup
The stack portion is basically just the tools that you use. The important takeaway is JAM. The JAMStack is an approach to web design that emphasizes shipping only static assets. It removes the hassle and headache that comes with setting up servers whether that be with node.js, Python, Ruby etc. As a frontend developer utilizing the JAMStack is definitely the way to go. The benefits of the JAMStack are:
reduced complexity
lower costs
faster shipping
increased autonomy
JAMStack apps allow us, as frontend devs, to use only a CDN which lets us skip servers, databases, load balancers, etc. CDNs are cheap - most often than not free. On top of that, the lowered complexity requires less time and effort spent on devops. Fewer moving parts make it easier to ship quickly and with more confidence. This is one of the first times where the proverbial saying "It works on my machine" most often than not means that the site is actually working. A simplified stack means a single developer is able to take projects from an idea all the way to deployment. Not saying you can't still have a team to work on the app but because you won't need a fullstack engineer or a frontend and backend developer in order to maintain the entire app.
Let's build a JAMStack App
So first things first we are going to need a few things installed. Although you don't need to write any backend code you will still need node and npm installed to download several tools that we are going to use. In this post we are going to use basic HTML and JavaScript to build this simple website.
First File
cd source\repos
mkdir JAMStackSite
cd JAMStackSite
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My First JAMStack Site</title>
</head>
<body>
<main>
<h1>Hello Dev.to Readers!</h1>
<h2>Recently Updated Repos</h2>
<div id="content">Loading...</div>
</main>
<script type="module" src="./main.js"></script>
</body>
</html>
cd <project folder>
npx serve
We now have a website that is running and is technically a JAMStack app. You can now deploy...I'm kidding. This is just the start.
Let's add some styling. Create a file called style.css then put this code in. I chose the colors that Gatsby uses. If you don't like the colors or you have a favorite color of your own that you would rather use then by all means modify the code below to match colors you like.
html,
body {
color: #555;
font-family: sans-serif;
font-size: 18px;
margin: 0;
}
main {
margin: 3rem auto;
max-width: 90vw;
width: 50ch;
}
h1 {
color: #b17acc;
}
h2 {
color: #639;
}
Now we need to add the link tag to the stylesheet.
<link ref="stylesheet" href="./style.css" />
Let's add some basic JavaScript to make this an official JAMStack app. We are going to use basic JavaScript. Those of you that are familiar with Babel are going to be surprised that we don't have to use it in order to get our modern JavaScript to work. Let's check it out.
const listRepos = async username => {
const repos = await fetch(
`https://api.github.com/users/${username}/repos?type=owner&sort=updated`
)
.then(res => res.json())
.catch(error => console.error(error));
const markup = repos
.map(
repo => `
<li>
<a href="${repo.html_url}">${repo.name}</a>
(⭐️ ${repo.stargazers_count})
</li>
`
)
.join('');
const content = document.getElementById('content');
content.innerHTML = `<ul>${markup}</ul>`;
};
listRepos('RedHoodJT1988'); // insert your GitHub username here or use mine if
// if you don't have one.
I know it isn't much of a site but you are now using an api to fetch github repos that have been updated recently and rendered them to a page. If for whatever reason when you refresh your browser if you don't see the content there please rerun this command:
npx serve
What does Gatsby have to do with this post?
At the moment nothing. If enough people ask or seem interested in learning more on the JAMStack I will definitely do a series that will show how to build a pretty awesome eCommerce site using Gatsby and the JAMStack. Gatsby is by no means the only static site generator out there that is used or can be used with the JAMStack. You can use anything from Vanilla JavaScript, as demonstrated in this post to your favorite framework such as React or Angular.
Quick side note
I didn't necessarily steal this code or pirate it in any way. I did make changes and modify it from the Intro to JAMStack course on frontendmasters.com by Jason Lengstorf. I highly recommend checking the course out if you are able to afford the subscription. I know they have a free subscription if you are just starting out in JavaScript. This course however is not on it. I love frontendmasters and I hope they are not upset by this post. I will be more than happy to remove it if it upsets anyone on frontendmasters or with Mr. Lengstorf.
Hope you enjoyed the article and had as much fun writing and creating this basic site as I did.
Cheers.
Top comments (11)
In my opinion, JAMstack is not about specific technologies. JAMstack is a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience. It is the combination of underlying tooling that makes JAMstack so exciting. JAMstack is composed of 3 components: Javascript, APIs, and Markup. Read more about JAMstack here 👉 agilitycms.com/resources/posts/top...
I'm not trying to stir up drama or anything, but the code you posted is almost line-for-line the exact same code they walk through in the front-end Masters course on the jamstack.
I'm aware. I changed a few of the colors on mine. I wanted to give people an idea on how easy using the JAMStack is and that is one of the best courses on it. However I also know how expensive FrontEnd Masters is, especially for someone just starting out so I "borrowed" from Jason and that course. That is the only thing I took and in the subsequent posts I write about using Gatsby and the JAMStack it won't be just using what he does. I didn't see the harm in posting about something I thought was useful. But if it in any way upsets frontendmasters.com or Jason Lengstorf or if Dev.to gets upset I have no problem with removing the post. I wasn't trying to steal the code or anything like that. I just wanted people to know how easy it was and that course one is super great but also really expensive for someone starting out. Love everything that guy puts out on frontendmasters.
I went ahead and added at the bottom where I got the idea and some of the code from to plug frontendmasters. Thank you for bringing that to my attention.
Totally understandable! I've been recently digging into the JAM myself so am glad to see more people talking about it either way!
Yeah. I really love it. I am currently a fullstack developer but I started out as a frontend and just like Jason says at the beginning of the course had to figure out how to write backend code. I don't hate the backend side of writing web apps or apps in general but I do really like the simplistic style and approach that the JAMStack offers. Plus Gatsby is just great and Netlify as well. Which of course Jason Lengstorf both worked/works for. Haha.
Can you create GDPR compliant apps using JAM stack? I am still not 100% convinced that I own the data if I don't own the server.
Yes. Netlify has a page that explains how they protect your data here: netlify.com/gdpr/ hope that helps answer your question.
Ah thank you looks more promising than the last time I dealt with this topic :-)
No problem. They are starting to take that in to account and make sure that the proper procedures are in place. I really like Netlify. I'm sure there are others that do the same as Netlify but Netlify is the one I'm most familiar with.
Waiting the série
Awesome. I will get started on it as soon as I can. Thanks for the reply.