Jamstack is an increasingly popular web development philosophy that aims to speed up both the web development process and webpage download times. Drawing from the devops movement and the continuous integration/continuous delivery (CI/CD) techniques that are becoming the norm in many organizations, Jamstack upends long-held techniques for building interactive web pages, shifting load-time code execution away from web servers and toward in-browser JavaScript and external services accessed via application programming interfaces (APIs).
What is Jamstack? Jamstack, defined
Jamstack is a web application model based on three pillars, which provide the initials in its name: JavaScript, APIs, and markup. Web pages for a Jamstack site consist of standard markup language, so they can be built and tested anywhere, without dependencies on app servers or server-side technologies like Node.js. Any interactive functionality is provided by standard JavaScript code that executes in the browser, which makes calls to reusable APIs over HTTPS to get access to external data or any other functionality that can’t be built into the webpage itself.
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.
An important thing to keep in mind is that static in this context doesn’t mean that these are simple web 1.0 pages that aren’t interactive. Remember, these pages can include advanced JavaScript that executes in the browser and makes API calls to databases, server-side functionality, or hosted serverless functions. But because none of that execution happens on the web server itself, a static site doesn’t need an industrial-powered web host complete with a database. Many static sites are deployed to content delivery networks, or CDNs, where content is mirrored on multiple servers around the world in order to be delivered quickly to users anywhere.
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.
Jamstack CMS
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.
CMSes for Jamstack sites work differently, and they are generally referred to as headless. A headless CMS offers a UI for entering and managing content and a database or other means of storing it, but does not itself generate HTML code for a browser to parse. Instead, the website’s static HTML pages use JavaScript to make calls to the CMS’s APIs, and the CMS returns the content in a format that JavaScript can turn into a webpage.
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.
Jamstack conference
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.
[ Also on InfoWorld: The 6 best JavaScript IDEs | The 10 best JavaScript editors ]
Jamstack tutorials
Looking to go deeper? Check out these Jamstack tutorials that will give you some hands-on experience in building a Jamstack site:
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!
Copyright © 2020 IDG Communications, Inc.