Development

The Rise of the JAMstack, Why You Should Learn JavaScript in 2020

Share
The Rise of the JAMstack, Why You Should Learn JavaScript in 2020

The JAMstack is a newly adopted technology stack that you can use to make websites and applications. It’s gained some serious popularity in recent years and the possibilities with it just keep getting bigger.

The JAM on JAMstack

JavaScript, APIs, and, Markup - that’s it. This technology stack seems a little ambiguous at first, but that’s the beauty of it, your options are wide open with the JAMstack. Let’s take a look at each piece of this tech stack...

JavaScript

This is any JavaScript framework that you choose. React, Vue, or Angular - anything works. This puts some serious flexibility in the hand of a front end developer and allows you to use what you’re best at for your projects.

API’s

Unlike traditional applications utilizing a database on a self-hosted server, the JAMstack moves to use 3rd party API’s to source the data for their front end Javascript applications. A headless content management system (CMS) is a perfect pairing for your favorite JavaScript library, giving you the developer all the flexibility you need, and the non-technical users that may need to edit content the ability to do so without calling you up at all hours of the night…

Markup

At a website's core, they are just HTML markup rendered in the browser. With the JAMstack you’ll serve this markup to your website via a site generator or build tool with whichever JavaScript library you’ve opted for.

Does this make any sense yet?

I searched hard and long for a proper definition of the toolkit for the JAMstack. Looking back, I now realize that what makes it so powerful is the freedom you get from it. The options are endless!

A Practical Example

This site was built completely on the JAMstack. The development was done using my favorite static site generator, GatsbyJS. I write Javascript code and it builds and spits out optimized HTML to serve on my website, perfect. 

Now for the API bit. Every bit of content you see on this site, images, pictures, etc. are all completely editable by the non-technical team members at Built Better Technology. This was done by using BuildingBlocks CMS to house the content for the site. 

So when my gatsby site builds, it looks for the data in BuildingBlocks CMS, then proceeds to build the pages with that data and spits out the HTML to the website you’re seeing here. 

Boom! Javascript, APIs, and markup. Oh, and did I mention that Gatsby is server-side rendered? This means that you get all the speed of running a website on the server, but all the magic of dynamic and completely editable content you would get from using say a pure React approach.

These are just the technologies that we use at Built Better Technology, but the options are endless!

But what about hosting?

This is where the JAMstack shines in my opinion. In the past, you would have to do some real leg work to get all the bells and whistles of server-side rendering, dynamically generated content, etc. But JAMstack is just JavaScript, so you can host your JAMstack site anywhere that a regular website can be hosted.

My personal favorite, and what we use at Built Better Technology is Netlify. They’re very JAMstack friendly and it’s free for personal use. It’s as simple as connecting your GitHub repo with your JAMstack site and clicking build (most of the time anyway).

Some Overlooked Perks Of JAMstack

My favorite thing about utilizing the JAMstack for development, and one that I think gets often overlooked are the benefits to development workflow with my other projects. By using the JAMstack for all my web-based projects that warrant it, I’m always working with the same tools that I’d use in my larger applications that require a traditional full-stack/server approach.

Let's look at another practical example. I’m working on a website all day for a client, coding in GatsbyJS (just a React library), and interacting with external APIs for all my data fetching needs. Now it’s 4:30 and it’s time to switch to my full stack side project, which is also utilizing React for the front end. Now, there’s significantly less context switching between projects. I’m using the same programming language (Javascript) all day and even the same framework (React)! 

Couple this with a full-stack layout like the MERN stack (MongoDB, ExpressJS, NodeJS, and React) and you are coding completely in JavaScript all day making anything you can think of. Get ready to get seriously productive!

Finally, all these technologies I’ve listed have excellent documentation and huge communities behind them that get bigger every day, making it a lot easier for when you get inevitably stuck.

Summing Up

These are just a few paths you can take in the vast land of web development in 2020, but if you’re early on in your development career or you want to greatly improve your workflows, it’s a very safe bet to count on JavaScript going forward.

Just remember, whatever technology you choose to learn, make sure it helps you solve the problem you're trying to address. Don’t just learn it because it has a cool name like the JAMstack. There are no right and wrong answers in today's development world, just trade-offs (...unless you’re using PHP, that’s almost always the wrong answer).

We hope this helped, and that you’ll consider picking up some of these technologies for a test run on your next project.


Thanks for reading!

Subscribe

Like what you see and want more?
Subscribe today and we’ll keep you up to date.