Introduction to the Jamstack - the New Frontier in Web Development

#javascript #webdev #codenewbie #react

As a Web Developer, you've probably heard of the Jamstack. It's the buzzword in web development. But what exactly is it?

Jamstack is an abbreviation that stands for JavaScript, APIs, and Mark-up. It is an architecture that promises, among other things, faster, cheaper, and more secure sites. And, increasingly, more and more websites are switching over.

To be clear, JAMstack is not a specific technology, nor is it driven or controlled by any single entity. It's a community-led movement, an architecture with a collection of standards and best practices that gives faster and more secure websites.

But to understand why it's so revolutionary, we have to understand what stacks are, what technologies traditional websites use, and why they are becoming more and more obsolete.

Legacy websites

There are many Web Development stacks out there: LAMPstack, MEANstack, WAMPstack, among others. These refer to the technologies used such as Linux, MySQL, and PHP. While they have their different technologies and applications, they all pretty much work in the same way: legacy websites are programs that run on a server, and query data from a database, building each page every time a user loads a page. WordPress websites follow this architecture.

This approach has its advantages - they tend to be easier for the average person to run, they can be highly dynamic because the page is only built at load time, and they are less reliant on third-party providers for dynamic functionality - since they run on a literal server!

However, legacy websites tend to be slow (especially for those on unstable internet connections), harder and more expensive to scale, and less secure. So, in 2015, Mathias Biilmann, the CEO of Netlify, coined the term JAMstack, which was later renamed Jamstack, referring to a new Web architecture that he and Chris Bach, a co-founder, were working on at Netlify, and that other Web developers were starting to explore.

The Jamstack

Instead of a server processing a request, a pre-built HTML page is served from a Content Delivery Network (CDN) and delivered to the user. No server involved.

However, just because no server is involved in the serving of webpages doesn't mean no servers are involved in the process at all. To understand why this is, we have to delve into the three component parts of Jamstack:

J is for JavaScript

Introduced to the world in 1995 by Netscape, JavaScript has become synonymous with the web. It provides a way to code logic into websites, allowing them to respond to users actions (for example: checkboxes, form submissions, calls to action) - every time a websites does something more than just display static information, you have JavaScript to thank for it!

Jamstack uses client-side JavaScript, with libraries like React and Vue, to design and make web apps that feel and act like mobile apps.

You might already be familiar with popular JavaScript UI libraries like React, Vue, and Angular.

A is for APIs

Application Programming Interfaces (APIs) are what allow two or more programs to talk to each other. They are how things like cryptocurrency trading bots can communicate with cryptocurrency exchanges without a human in the mix.

Just because we've decoupled the website's frontend from its backend doesn't mean we can't make use of any server functionality. Third-party services can provide dynamic functionality like database access, payments, and authentication. Jamstack takes the microservices approach, which is different from the monolithic approach (I go through this in more detail below).

Headless CMSs are another example of APIs. Normal Content Management Services (CMSs) (like WordPress) deal with both the website content and the frontend. Jamstack decouples this, meaning Headless CMSs deal only with the content, leaving the frontend to Static Site Generators.

The decoupling of these services from the actual websites gives greater portability, increased speed, and a lower risk of attack.

M is for Mark-up

The M part of Jamstack is probably its most important part. It stands for Mark-up. This means that Static HTML files are served to the user.

But this not only includes how the website is served to the user - almost all websites have JavaScript, APIs, and Mark-up in some form - M also includes how the pages are made in the first place. There are generally two approaches to generating Static HTML files:

Hand typing: You can type out the HTML files yourself. This is more suited to small, simple websites.
Static Site Generators: This is the most popular approach for Jamstack websites. An SSG generates Static HTML files from raw data (usually written in a lightweight mark-up language like Markdown) and templates. I go into this in more detail in another article.

Because of the functionality and advantages that dynamic websites have over conventional static ones, static websites often get a bad rap for being too basic. While Jamstack sites are static in the sense that Static HTML files are served to the end user, APIs and Mark-up also make Jamstack websites comparably dynamic.

CDNs

Unlike traditional web servers, which are usually in one place and serve dynamic, server-generated pages, Content Delivery Networks (CDNs) are geographically distributed, storing website data on several servers around the world so requests can be serviced from the server geographically closest to the user. CDNs are still servers, but because they are distributed, you can't really pinpoint the exact physical server your website is hosted on.

CDNs themselves can't generate web pages, but since Jamstack web pages are pre-built, they can be served from CDNs.

Because CDNs host static sites, they don't have bandwidth and processing limitations, so this lowers the risk of your website going down. It also makes CDNs cheaper - in fact, most provide free hosting!

Examples of serverless hosting providers are Netlify and Vercel.

The Microservices vs. Monolithic Architecture

Traditional websites are, simply put, built as a unit. They have all their functionality - comments, contact forms, authentication - built in. This functionality can still be in the form of plugins (like in the case of WordPress) but they are still a part of the overall website structure, and not external. This model is called a monolithic architecture.

The Jamstack takes the microservices approach where parts of a website are broken up and outsourced to third parties through APIs. Examples can be using a payments provider like Square or Paypal to process payments, or using Auth0 for authentication.

A useful analogy created by The New Stack is that of an air ticket booking website. The process of booking a ticket contains many sub-steps which, in this scenario, are reserving the ticket, billing the customer, and sending a confirmation email that the ticket is booked. In a monolithic architecture, all three processes would be built into a single application. In a microservices architecture, however, each stage works independently of the other and can be outsourced to third parties. The core function of the website might be to book the ticket, but billing could be outsourced to a payments company like Stripe, and emailing could be outsourced to an email company like Mailchimp, all through APIs.

Conclusion

Jamstack websites are usually called Static Sites because of how they are served to the user, but this sometimes gives the misconception that they can't have dynamic functionality when in fact they can through the use of APIs and Headless CMSs.

The Jamstack is a movement that's spreading across the web development world. Many established Web Developers are switching over. Maybe it's time you switched over too, don't you think?