Jamstack: The Future of Web Development

Before talking about the jam stack jamstack, a little history.

I started building websites during college pre-2010 and I remember when I first learned HTML and CSS.

I was hooked.

My accounting and finance classes were teaching me how to go beyond macros in Microsoft Excel by programming with VBA. We pushed Excel to the limit by creating complex financial calculators and even turning it into a full-blown database application (including a GUI).

I got the programming bug.

My twin brother and I made the mistake of staying in town during one of the 7-week breaks in college. There was nothing to do. We were in Rexburg, Idaho... 'nuff said.

I remember looking at several websites and thinking to myself, "how are websites made?" I've been going down that rabbit hole ever since.

I learned everything I could. Ultimately leading me to the programming languages PHP and Javascript. The web now made much more sense to me and what I could do with the technology. I immediately started looking for ways I could take my newfound powers knowledge and use it.

Before Jamstack

After looking at my uncle's website at the time, I approached him and asked if I could redo it. An embarrassing amount of time was spent building him what would today be called a static website. I wasn't nearly proficient enough in PHP or Javascript at that point to go the dynamic website route.

I coded virtually every piece by hand. There was a LOT of refactoring and browser refreshing.

My uncle had an eCommerce site selling Halloween products (he makes custom animatronic Halloween props).

The new website was much more performant, better looking, and...way too hard to manage. Anytime he wanted to add a product he would have to copy a template and manually change/update the details.

Around this time monolithic applications (or content management systems—CMS) based on PHP that focussed on eCommerce were making huge improvements to their capabilities and offerings.

Needless to say, my uncle didn't stick with my custom coded site for very long (no offense taken!).

I realized there was much more to learn.

It was then that I started diving into the world of WordPress (among other services such as BigCommerce or WooCommerce) and slowly but surely upping my programming knowledge.

These monolithic applications opened up an entirely new world for me. Databases, APIs, content management, plugins, etc.

From there on out I started building people WordPress (and on occasion other platforms) sites (ones they used and still use to this day—yeah!).

I noticed a few things when comparing the hand-coded websites I created vs the WordPress (or monolithic) based ones.

What is a Static Website?

A static website is just a bunch of HTML files. Each file can be a page or something else on the website.

Because the files exist without the need for a call to a server or database the site is typically blazing fast, great for SEO, and highly customizable. The jamstack plays into this well, but I'll delve into that in a bit.

While there a lot of benefits to a hand-coded, static website, it can get difficult to maintain if you start to have too many pages (like in the case of my uncle who had lots of different products and variations). It also typically requires a developer.

What is a Monolithic Application?

In short, a monolithic application is a website where the database, backend logic, and frontend logic are all tightly coupled into one application. The most popular being WordPress.

Monolithic applications solve a lot of the problems that static websites tend to have. They provide a database for storing users, content, and assets (images and other files), they make managing content such as pages easy, and a whole ton of other things made possible by plugins. The jamstack tackles this a bit differently which I'll explain soon.

A monolithic application tries to do everything. This is awesome but at the same time, not so awesome. A perfect example is user management.

Many of the sites I build for people simply don't need user accounts with logins. WordPress is notorious for its security issues.

You also have to manage a web server, application logic, and database. All of which will take down the entire site (for every single person) if one problem or bug arrises. Caching issues anyone?

What is Jamstack?

Highly scalable. Faster websites. Extremely secure. Amazing DX (developer experience). These are just some of the many benefits of the jamstack).

I became aware of this new term jamstack a couple of years ago. In summary, I quickly realized I could code websites similar to how I did for my uncle, but also get all the benefits a monolithic system provides (via microservices—more on that later).

This is what the jamstack is in a nutshell. A decoupling of the frontend from the backend.

Jamstack is an acronym for javascript APIs and markup:

  • J: Javascript (dynamic, programmatic, client-side)
  • A: APIs (services made available via a database or server-side—reusable APIs)
  • M: Markup (or in other words content)
  • Stack: Technology agnostic (the stack is simply the methodological approach to building a website or app)

Another way of looking at how I had built my uncle's website is pre-rendering (where all content is available without the need for a database or server—in other words, pre-built). I coded everything the browser would need to show a working website. There was no need to make any round trips to a server.

On a monolithic application, any time a user visits a webpage a call to the server is required. The server pulls from the database and builds the associated page for rendering in the browser. This approach is inherently slower than a static page but allows for a straightforward way to create dynamic pages.

When it comes to statice pages built with the jamstack there's a catch. A jamstack website can be just as dynamic as a monolithic website by using modern javascript and APIs (often called microservices).

Need user management? There's a service for that.

Need a CMS to house your content? There's a service for that.

Need newsletter collection forms? There are services for that.

Or...you can build all of these yourself too!

I've always felt like the jamstack does more than decoupling the frontend from the backend. It's a decoupling of all the major moving parts of a website. Allowing for each service to do what it's best at (instead of trying to do everything on one server in one application).

This is precisely what the jamstack is. A website or application that does not depend on a single web server hosting a monolithic application.

Jamstack.org has a great description of how you can tell if a site is not built on the jamstack:

  • A site built with a server-side CMS like WordPress, Drupal, Joomla, or Squarespace
  • A single-page app that uses isomorphic rendering to build views on the server at runtime
  • A monolithic server-run web app that relies on Ruby, Node, or another backend language

Why Is Jamstack Suddenly So Popular?

In a nutshell, jamstack is increasingly favored for its DX (developer experience) but more so because of its performance implications.

With the web now accessed primarily by mobile devices, the need for faster, more performant websites, has become a necessity. Connection speed varies widely across not only the country but the world. Making sure your website loads quickly is vital to good user experience. People just don't have the patience for a slow-loading site anymore.

While there are several other benefits one of the biggest is SEO. Google loves websites that are fast and that get the user what they want. This makes jamstack a great partner for you digital marketing junkies out there.

Considerations Before Migrating to Jamstack

There are some things to consider before jumping on the jamstack train.

The first is the nature of decoupling. Where your monolithic application can do many things out of the box (or via plugin) such as forms, comments, galleries, visual page building, etc, you'll have to use third-party solutions or build your own. Managing many different providers can be a new cost in and of itself.

Making major or even some minor modifications to the website require a developer (typically frontend developers).

The jamstack isn't WordPress. It's not for the tech illiterate. It's a bit more technical.

You can't just go into a visual page builder and completely revamp your navigation for example. You'll have to make sure you have a good developer that can quickly make those changes for you.

Note: there is progress being made on the visual builder standpoint for jamstack. Some examples are:

All this said I'm not trying to downplay WordPress. I love WordPress. It's been vital to my journey. What excites me about the jamstack is that it's much more my style (unopinionated, open, git-based, primarily frontend, lots and lots of javascript).

While I don't agree that jamstack is a regression (the community is young and growing FAST!), I do think it's not currently for everyone. Small and midsized businesses may find a migration to be a lot of work and a big change to what they're comfortable with, but the rewards are proving to be worth it.

What Tools Are Used for Jamstack Websites

Central to all jamstack websites are frontend frameworks, static site generators, and headless CMSs.

Many of these tools either didn't exist or were not mature enough back when I built my uncle's website. The following tools would've not only made creating the site easier but would've made managing it simpler (i.e. adding new products or pages).

Here are just a few of the most popular tools broken down by type.

Frontend Frameworks

A javascript framework is a "collection[s] of JavaScript code libraries...that provide developers with pre-written JS code to use for routine programming features and tasks—literally, a framework to build websites or web applications around."— SkillCrush:

Static Site Generators

Simply a build tool that's used to take the content and code of the website and generate pre-rendered HTML files:

Headless CMSs

Unlike traditional CMSs, headless CMSs house all of your content and focus on providing a robust API you can use to source that content when generating your website. WordPress can actually be used as a headless CMS by building the frontend separate from the backend:

Jamstack Hosting

I would be neglectful if I didn't talk about hosting for jamstack websites. But wait, I thought you didn't need a server? This is true, but the hosting providers you use are typically still considered hosts.

The main difference between something like Siteground (shared hosting) or Cloudways (cloud hosting) vs a jamstack host like Netlify or Vercel is the way they do their hosting. The former relies on the traditional server stack for running monolithic applications while the latter is focused on robust CDN's (content delivery network), site builds, and CI (continuous integration) & CD (continuous delivery).

One of the biggest benefits for clients I work with is hosting costs. I once launched a site for a client who received tens of thousands of visits to their website in a very short period with hundreds of concurrent users and it didn't cost them a dollar. No server scaling was required.

Jamstack Landscape

The jamstack landscape is rapidly evolving. There are more headless CMSs than I can keep track of and a new one seems to pop up every few weeks.

More and more aspects of the web are being built with jamstack in mind. Not just websites. Anywhere from web apps (jamstack app) to PWAs (progressive web app).

A great aspect of the community is how much of the technology being built around jamstack is open source. It's modern web development at its finest.

It's an exciting movement in the web development space and it sure has my attention. I wish I had more of these tools when I built my first website for my uncle. Maybe he'd still be using it?

If you're interested in migrating your site to the jamstack I can help (or at least point you in the right direction), just say hi or send me the deets of your jamstack projects. Check out the projects on my homepage to see examples of jamstack sites I've built (all of my projects are built from scratch).

Either way, hopefully, you have a better idea of what is jamstack, it's associated technologies, and the benefits/downsides of this new approach to website building.

Jamstack Links

Here are links to some of my favorite jamstack centered sources: