DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for WTF is JAMstack???
Grant Watson
Grant Watson

Posted on

WTF is JAMstack???

Original post found here

I am a subscriber to a podcast series called Coding Blocks (https://www.codingblocks.net/). It is a fun series to listen to for developers from juniors to seniors. And throughout the series, they have made some statements toward JAMstack, but the episode they published February 3, 2019 titled β€œJAMstack for J.A.M”. This episode inspired me to go into a deep dive of what JAMstack is and where I would used versus other technologies.

Let’s go into defining what JAMstack is:

JAMstack stands for JavaScript, APIs, and Markup. The term was coined by Mathias Biilmann to describe β€œa modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.” β€” from https://www.contentful.com/r/knowledgebase/jamstack-cms/

Sites that are similarly built with Jekyll, Hugo, Next and Gatsby, you may have already used, or at least seen sites built on JAMstack. The main selling point for using JAMstack is to host up static sites to the public.

The JAM of JAMstack stands for JavaScript, API and Markup. Let’s break down what each represent in the stack:

JavaScript

Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use

APIs

Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom functions

Markup

Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a static site generator.

Well, what are the benefits? Why not use SPAs?

A single page application (SPA) is a web application that loads a single static HTML page and dynamically hydrates it with new content on user interaction. In this very light definition of an SPA, seeing that it generally serves the user static pages with JS and APIs, they can be considered JAMstack, but should never be assumed to be JAMstack. The long and short of why you may choose JAMstack over SPA is for those wanting better control over SEO. SPAs fall short on SEO.

Main benefits of JAMstack:

Faster performance - serve pre built markup and assets over a CDN

More secure - No need to worry about server or database vulnerabilities

Less expensive - hosting static files for cheap or even free

Better developer experience - frontend devs can focus solely on frontend

Scalability - If your product goes viral with many users, the CDN compensates

Foundations of JAMstack

JAMstack is a set of tools that can be used to build an ecosystem. There are three foundations that are more like conventions rather than a set of specific tools that you have to use to fit in the definition of the term JAMstack.

JavaScript

JS is the first foundation of the whole stack. You can love it or you can hate it but you have to admit that JavaScript is one of the most popular programming languages these days with an incredibly vibrant community. The request and response cycles are based on client side thanks to this technology. You can use either pure JavaScript or use any other framework or library available on the market such as React or Vue.

API

Though I did mention the static websites, the next foundation of the JAMstack are APIs. Thanks to it you can use backend functionality without having a database or the backend engine on your own server. You still have backend, yes, but deploy only a static website. You can use any API you want, public or private. There are many third-part sites you can choose from. You can also connect to the other backend app that you have created.

Markup

The presentation layer of your website. With the JAMstack ecosystem usually, it’s a static site generator where templated markup is prebuilt at the build time. You can write your own HTML and CSS code or use a framework such as Hugo, Jekyll or Gatsby, which will greatly improve the time of template development.

History of JAMstack

It all started with the LAMP stack where LAMP stands for Linux Apache MySQL and PHP. The term refers to the tech stack where a website is running on a Linux server with the MySQL database and PHP programming language. You might hear about WAMP or MAMP which is the same but refers to Windows and Mac OS.

This movement started in the late ’90s. Back then most of the websites on the Internet were running on MySQL and PHP. Before PHP there was just static HTML which allows building static websites. Since LAMP was coined, static websites were not cool for a long time. In 2016 a small group of developers established the term JAMstack and started to slowly promote it among other developers and the whole dev community.

A year later, in 2017, the JAMstack community has grown and static websites became something more than just information pages where the content was changed only by editing page files and uploading them on the server. It was possible to build dynamic websites and apps. The new stack has hit the mainstream and it became very popular in a relatively short time.

Benefits for the developer

The biggest benefit for the developers using JAMstack is the saved time on every step of the development process. JAMstack provides a great developer experience since generating code is way faster than writing it from scratch. Also, the deployment process is easier because you don’t have to think about the database and other backend stuff, you just deploy a static website where most of the content is usually already present. Let’s have a look at how to build a website with JAMstack.

Getting started with the JAMstack

If you’re new to this whole idea of the JAMstack, you might be a little overwhelmed at this point. Knowing where to start is sometimes the hardest part.

First, remember that we’re talking about frontend-centric development here. If you’re new to web development in general, you’ll want to make sure to sharpen your JavaScript skills. Then learning as much as you can about APIs will allow you to push your projects to the next level.

Once you've got this covered, well, the sky’s the limit as they sayβ€”as long as you can find the tools to match your ambitions.

New projects

Starting from scratch is the best way to build a β€œpure” JAMstack. This way you can really choose all the necessary pieces to create what you want. As I explained earlier, building and hosting are decoupled. The first thing you’ll want to decide is what to use to build your site/app.

The modern frontend ecosystem may make your life hard here. Not because of a lack of relevant tools. Actually, it’s just the opposite! There are hundreds of possibilities, even if some clearly stand out.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.