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)