on Invalid Date
As a front-end developer in 2020, it is time that I fulfill the FEDeral mandate that I publish words regarding the JAMStack. If you follow too many developers on Twitter, it’s likely you’ve heard about the Next Big Thing in web development, but I’d like to put this trend (fad? movement?) into context to better understand what’s truly new about this approach and whether it’s worth using.
What even is a stack? You may have heard the term “full-stack developer” and know it refers to someone who does both frontend and backend work, but what is the actual stack? A stack — in the web development world — describes the combination of tools being used to host, serve and render a web project. Traditionally it has four components: an operating system, a server, a database and a programming or scripting language.
Let’s look at a couple notable stacks in recent history.
The LAMP Stack comprises Linux, Apache, MySQL and PHP. This is the stack of the early 2000s, and due to its ubiquity it will be around for many years to come. Notable LAMP sites — include Facebook (which has since migrated away), Wikipedia (technically using MariaDB rather than MysQL, for the record) and Yahoo (remember Yahoo?). Most importantly, though, is Wordpress, which powers something like thirty percent of the web and is almost certainly the biggest reason for the average person to build a LAMP stack site in 2020. Because of its history and popularity, though, there is a huge community of developers with LAMP knowledge, and it’s very easy to find affordable hosting from almost any provider.
Ruby on Rails
As you may have noticed from the lack of an acronym, this is not a stack per se, but it is a highly opinionated web framework that became a popular alternative to the LAMP stack architecture in the mid-to-late 2000s. It is database agnostic, so you could still use a MySQL server, but Rails itself generates models, controllers, tests, database migrations, etc. and famously enforces the Rails method of application building. Github is a notable example of a Rails site. To this day, if a company is building a monolithic server-based website, it will likely choose either Rails or a framework it’s inspired, like Laravel for PHP.
Single Page Applications
Back to the JAMstack
Static Site Generators
The core concept behind JAMstack is that almost any functionality you would need from a server has an API available already. Need CRUD for your MySQL database? Use Hasura to generate a GraphQL endpoint for it. Authentication? Use Auth0. CMS? Well, that’s a whole other blog post, but let’s just say you have options. These are usually referred to as "headless" services, as they have been decoupled from the front-end.
For anything else, use Netlify’s serverless functions or NextJS’s API routes to spin up a little endpoint that handles what you need on the fly.
Benefits and Trade Offs
So should you start building all your sites with the JAMstack? As always, It Depends. Let’s take a look at some of the key decision points.
Static sites are extremely fast. Pages. Unfortunately, they can be very slow to build. If a site has thousands of pages, an SSG generally has to generate every single one of those pages every time the site is built. This can take a long time and severely hold up deployments. Fortunately, features like NextJS’s incremental static page regeneration allows for a hybrid approach where some pages can be generated at build time and the rest aren’t generated until they’re requested.
Some may also argue that static page speeds can be replicated by simply putting Cloudflare’s CDN in front of a Wordpress site, for example, but it’s nice that the speed is there out of the box rather than requiring the setup of a CDN or caching solution on top of the site build.
A common complaint about Wordpress is that they are vulnerable to hacking attempts. This is not so much a problem with Wordpress itself as it is with the fact so many websites are built with it. But the reality is that because JAMstack sites don’t have a server, there isn’t really anything to hack into. And because data fetching can be done in serverless functions, you can also avoid exposing API tokens like you might in a fully client-side site.
On the other hand, you have to put a lot of trust in the services you’re relying on, especially for e-commerce, so it’s important to vet all of your APIs and not rely on the lack of a server for solving all of your security problems.
Monolithic approaches like Wordpress, Ruby on Rails or Laravel are still extremely useful for developers or teams with a need for fully custom backends or simply want to use a tried-and-true approach with endless resources and hosting options. For developers who want to quickly spin up fully custom marketing sites, ecommerce shops and blogs to deliver rich frontend experiences without needing to build custom servers, the JAMstack is an exciting new methodology that provides great experiences for both developers and users.
Using React and Redux to build the Kentucky Performing Arts ticketing experience
By:Mark Biek on 1/14/2020
When planning the KPA ticketing app, the first big decision was deciding which technology stack to use _______ Given the complex and highly-interactive design, we needed something that was going to be developer-friendly while letting us build an application that was highly responsive to user interactions. Nothing’s more frustrating than a slow user interface! VIA has mostly standardized on ReactJS for smaller interactive user experiences as well as single-page web applications so it seemed like a great fit, even though the ticketing app is just a small (but critical!) piece of a much larger site.Read More »
Building a Wordpress Theme with Timber
By:Alec Robertson on 10/6/2020
Timber is a plugin that allows Wordpress to render files written with Twig, a PHP template engine. We built a recent project with it and found that it greatly simplified the theme-building experience. Let's dig into why Timber is so useful for building Wordpress sites and how you can get started with it.Read More »