An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Some of Our Sources
- BoingBoing
- Mashable
- Technology Review
- TutsPlus - Design
- Fuel Your Creativity
- CSS Tricks
- Design Modo
- Android Headlines
- Willems Lab
- TechPowerUp
Help Webnuz
Referal links:
What is the JAMStack
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\reposmkdir JAMStackSitecd 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 serveWe 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 serveWhat 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.
Hope you enjoyed the article and had as much fun writing and creating this basic site as I did.
Cheers.
Original Link: https://dev.to/redhoodjt1988/what-is-the-jamstack-16em
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To