Jamstack combines modern devops-inspired development philosophies with old-school static HTML pages to allow developers to build fast websites faster
What is Jamstack? Jamstack, defined
To understand why the Jamstack philosophy is revolutionary, consider the LAMP stack, which exemplifies the way most developers have thought about web development for most of the last 15 years. LAMP stands for Linux (the OS that powers most web servers), Apache (the server software running on those Linux machines), MySQL (the database where information the web application needed is stored), and PHP/Perl/Python (the language that server-side code is written in). When you point your browser to a LAMP-based website, the web server executes the server-side code that generates the web page on the fly, drawing data as needed from the MySQL database.
The LAMP architecture allows for the creation of dynamic and interactive websites, but it also requires a powerful web server—and the more traffic a site gets, the more computing power on the server side it needs. Even with a fully featured server, dynamic web pages can take a long time to build and load. In a world of people with short attention spans browsing the web on their phones, that delay has become increasingly unacceptable.
Jamstack was born as part of the “static web” movement, which arose in the mid 2010s as a reaction against this traditional model of how a website should work. To understand Jamstack, you need to understand today’s technology behind static websites.
Static sites, static site generators, and Jamstack
If you had to explain to a complete newbie how the web works, it might go something like this: Somewhere in a web server’s filesystem there are HTML files, accessible by HTTP addresses, which a web browser downloads and then interprets to create a web page. But that’s a description of a static site: It assumes the HTML files already exist when the web browser goes looking for them. As we’ve already seen, much of the web over the past decade has been dominated by dynamic sites, which instead generate HTML files on the fly in response to web requests, often based on parameters passed to the web server via forms or in the URL itself.
In the very early days of the web, when web pages were invariably static, many web developers wrote the HTML code by hand. As web pages grew more complex, tools like Macromedia’s Dreamweaver arrived, which could generate those static HTML pages programmatically. As the static web movement took off in the mid 2010s, a new wave of so-called static site generators began to emerge, including Gatsby, Hugo, and Jeckyll. Unlike WYSIWYG tools like Dreamweaver, static site generators are command-line driven, and designed to be integrated with CI/CD processes. HTML files are generated by the tools, often based on content written in Markdown, and automatically uploaded to a version control repository like GitHub. As these files are marked ready for production, static pages on the live website are automatically updated.
Mathieu Dionne, marketing lead at Snipcart, describes the early days of this new world of static sites in a blog post, and mentions that around 2015, “the Netlify founders … had just come up with the term ‘Jamstack’ to work around the negative connotation of ‘static web.’” In other words, we’ve been describing the Jamstack process throughout this section. But now we need to briefly discuss Netlify and their role in the ecosystem.
What is Netlify?
Netlify is a cloud computing and web hosting company. Netlify cofounder Mathias Biilmann coined the term Jamstack, and Netlify’s services are tailored to customers who want to build sites based on the Jamstack philosophy.
Netlify claims to have cracked a specific problem that had been holding back static sites, which is cache invalidation. Database-driven dynamic websites may eat up a lot of server resources, but you can be certain that they’ll serve up the latest version of your website to any visitor who stops by. Because Jamstack websites are often hosted on the multiple distributed servers of a CDN, updates are less straightforward. It can take anywhere from a few minutes to hours for each CDN server to figure out that its cached version of the site is no longer valid. Netfliy’s CDN provides instant cache invalidation for HTML files to work around this problem.
But Netlify isn’t the only hosting provider in the Jamstack space, and it doesn’t have any kind of trademark or proprietary control over the term. There are a number of Jamstack hosting and deployment solutions available, and most of the big cloud providers are getting in on the action, including AWS, Google Firebase, and Microsoft Azure.
If you’re someone who has to deal with a website on a day-to-day basis, you know that getting the website built and hosted is just the beginning. You also need a way to create new content and add it to your site. Because the people who’ll be doing that typically won’t be programmers, they’ll need a user-friendly tool — namely, a content management system, or CMS. Traditional CMSes, like WordPress, offer a back-end UI where you can enter website content, manage a database where that content is stored, and build dynamic web pages that present that content in response to browser requests.
This system thoroughly separates content from presentation, which is of course a longstanding ideal of programming. Because the CMS has an accessible API, multiple web pages can easily access it. For instance, if you’ve built separate mobile, desktop, and smartwatch versions of your website, all of these versions can access the same content stored in the CMS.
Netlify, as you might expect, has their own offering in this space, called NetlifyCMS, but there are a number of other offerings available; developer Nebojsa Radakovic breaks them down for you in a blog post. There are a lot of up-and-comers on that list, as well as one very familiar name. While we used WordPress as an example of a traditional CMS, WordPress can be run as a headless CMS to power a Jamstack site as well.
Netlify also works to create a Jamstack community and sponsors Jamstack conferences. The company held events in New York, London, and San Francisco in 2019, and hosted a virtual event in May of 2020. As of this writing, you can sign up for the San Francisco event scheduled for October 6-7, 2020, though the coronavirus pandemic still has fall conference plans up in the air.
If you’d like updates, you can follow the conference on Twitter. You can also check out past talks on the Jamstack Conf YouTube channel.
Looking to go deeper? Check out these Jamstack tutorials that will give you some hands-on experience in building a Jamstack site:
- Developer David Neal has a good introductory tutorial on building a Jamstack site, starting very simply and then getting more and more complex.
- Over on the LogRocket blog, software engineer Ogundipe Samuel provides an in-depth, step-by-step look at building an e-commerce site on Jamstack principles.
- Netlify offers a three-plus hour video tutorial that covers a lot of ground from the basics to more advanced topics.
Once you’ve mastered the basic concepts outlined here, you’ll be prepared to start working with Jamstack development in your professional life. Happy learning!
Josh Fruhlinger is a writer and editor who lives in Los Angeles.