Why JAM Stack?
Tags: webdev, javascript, devops, career
Published: 2019-03-10 15:00:50

---
title: Why JAM Stack?
published: true
description: How learning about JAM stack can be useful for a web developer 
tags: webdev, javascript, devops, career
canonical_url: https://www.maxongzb.com/why-jam-stack-read-time-4-mins
---
![Photo by Miguel Bruna on Unsplash](https://thepracticaldev.s3.amazonaws.com/i/htouxdgk4ss93o4q6hbp.jpg)

## Introduction
When I was starting out in looking for alternatives to migrate my blog as it was previously in Wix. 

I was considering using **WordPress** due to its **support** by many hosting providers and **affordable prices** that allows me to host my blog. 

I stumble across youtube videos or articles, talking about **static site generator**. 

Which summarises as **security**, **affordability**, **speed** and **time for maintenance** for websites build using it.

## What is JAM Stack?
You might be wondering, why am I talking about static site generators instead of talking about JAM stack?  Well to me it's actually one and the same. 

Let's break down what does JAM mean. **JAM** stands for  the first **J** for **Javascript**, **A** stands for **API** and **M** is **Markup**. 

![iso-scene-takeshape-red](//images.ctfassets.net/ly2f59p4unnn/4iUFLqzAIGF6gPAmxWiE6c/d72a09938ed06d56e68a40034615d75e/iso-scene-takeshape-red.jpg)

###  J for Javascript
For the javascript in JAM, it could be the big 3 in front-end web development.

For most web developers that are **Vue**, **React** and **Angular** which has their own **static side generators** to **present** their **data**.  

This does not mean other static site generators could not be used for the **J** portion of the JAM stack which **Hugo**, **Jekyll**, **Next** does come to mind for it. 

### A for API
API for JAM stack is usually used to provide a specific functionality like **content delivery**, **email**, **payment** other related services for a website.

Therefore JAM stack could be used for a variety of websites like e-commences besides just company websites or blogs.
 
### Markup
Markup is the bread and butter used to create **content** for static sites that are served as an API endpoint.

Since they are usually converted into HTML, CSS or Javascript through the use of static site generators. 

The time it takes for a website to load is lighting fast.

## Advantages of JAM stack
![global-competitive-advantage-success-pillars-ahero-t](//images.ctfassets.net/ly2f59p4unnn/DJLktwh2DEmAgvn1vRbgJ/25192395ec11331980bfa454982278c4/global-competitive-advantage-success-pillars-ahero-t.jpg)

### Ease of Development and Deployment  
Due to the ecosystem and services by a wide variety of service providers. 

The **development** and **deployment** of JAM stack based websites can be relatively painless and could be scaled with ease.

Take for example my personal blog, I use **netlify** as a hosting and deployment service for static sites. 

The building process starts by whenever I push my code changes to my Gitlab repository.

Then it pulls content from **Contentful** endpoint and various other services endpoint. 

Which combined with the code changes that I pushed is converted into the various static file through **Gatsby**.

These newly generated static files are then deployed on **Netlify** as a website that with CDN, HTTPS and form submission provided for **free** by **Netlify**.

### Content Creation
Content is usually in a **markdown** file format but could be other file formats depending on your static site generator. 

It is relatively easy to learn even for a person who is not a developer to manage and create content for markdown files.  

These could be in gitLab or **Contentful**, who provides an API endpoint that your static site generator could pull content directly.

Lastly by no means that content should only be in markdown. 

In fact, content could be pulled from CMS like WordPress & Contentful or through external API sources which display data

### Cost in Maintenance & Managing the Website
Usually, the cost associated with maintaining a website includes the **hosting**, **updating of versions** and **content update**.

It is really **affordable** or **free** to host a static site with a bunch of hosting providers ranging from **Netlify** that I use myself, **AWS**, **Github** or **GitLab**. 

Unlike WordPress, there is a need to **regularly update** due to security reasons. 

A static site website removes the need to update your website by using **static files** it is hard for any hackers.

To hack your website by taking **advantage** of the **security vulnerability** founded in your static files. 

## Conclusion
![conclusion@2x-1](//images.ctfassets.net/ly2f59p4unnn/5sJzQ2UpSyXJUkmU2w2ZtI/79387724b14850dd73123b99676717e5/conclusion_2x-1.png)

To date, there are more and more websites that are deployed with static sites due to the above advantages that I had listed out. 

One of the notable websites that use the static sites is **FreeCodeCamp** a popular online platform for developer to have a **Coding Bootcamp** education for **free**.

It is actually funny as during that point of the time I didn't know about it.

Despite, I had made changes to the **guides** during the **Hacktoberfest** for **FreeCodeCamp** in **markdowm**. 

It was when I was reading **Quincy Larson**'s the **founder** of **FreeCodeCamp** first article on the **Dev Community**. 

That talks about why they had migrated their website to be static sites.

I would consider anyone who is interested in **JAM stack** to take a look at his article to understand further why did they migrate their website to JAM stack.

If you like my article either **sign up** for max [adventurer's newsletter](http://eepurl.com/dOUoUb) or you can **follow** to get the **latest** update of my article on **Dev** 

This post was originally posted on max's blog at [Why JAM Stack?](https://www.maxongzb.com/why-jam-stack-read-time-4-mins/) and [Photo by Miguel Bruna on Unsplash](https://unsplash.com/photos/2f-8PGW45rI)

## References
* [Jam Stack][1]
* [Betting My Career On JAM Stack][2]
* [How freeCodeCamp.org uses the JAMstack + a single API server to help millions of people learn to code every month][3]
* [Static Sites vs CMS][4]
* [GatsbyJS][5]
* [Contentful][6]
* [Netlify][7]


[1]: https://jamstack.org/
[2]: https://dev.to/lvrbrtsn/betting-my-career-on-jamstack--4def
[3]: https://dev.to/ossia/how-freecodecamporg-uses-the-jamstack--a-single-api-server-to-help-millions-of-people-learn-to-code-every-month-4d5g
[4]: https://developer.okta.com/blog/2018/06/07/static-sites-vs-cms
[5]: https://www.gatsbyjs.org/
[6]: https://www.contentful.com/
[7]: https://www.netlify.com/