Learn how Jamstack combines modern development practices with old-school static websites so developers can build fast websites, faster. […]
Jamstack is a trending web development philosophy that aims to speed up both web development and the time it takes to download a webpage. Powered by Devops and CI/CD, Jamstack overturns time-tested techniques for building interactive web pages, shifting load-time code execution away from web servers and towards in-browser JavaScript and external services accessed via APIs. The end result is a developer-friendly approach to creating static web pages that render very quickly and can be easily adapted for different platforms.
Jamstack architecture
Jamstack is a web application architecture built on three pillars that form the initials in its name: JavaScript, APIs, and markup. The web pages on a Jamstack website are made up of standard markup language, so they can be built and tested anywhere without any dependencies on application servers or server-side technologies like Node.js. All interactive functionality is provided by standard JavaScript code that runs in the browser and makes requests to reusable APIs over HTTPS. These requests are used to access external data or other functions that cannot be integrated into the website itself.
To understand why Jamstack is revolutionary, consider the LAMP stack, which exemplifies the way most developers have thought about web development over the last 15 years. LAMP stands for Linux (the operating system that most web servers run on), Apache (the server software that runs on these Linux machines), MySQL (the database that stores the web application's data), and PHP/Perl/Python (the language used to write the server-side code). When you point your browser at a LAMP-based website, the web server runs the server-side code that generates the web page on the fly and retrieves the data from the MySQL database as needed.
The LAMP architecture enables developers to create dynamic and interactive websites, but it also requires a powerful web server – and the more traffic a website has, the more server-side processing power is required. Even with a powerful server, dynamic web pages can take a long time to build and load. In a world of people with short attention spans who often surf the internet on their phones, this lag has become a huge problem.
Jamstack emerged as part of the static website movement that emerged in the mid-2010s in response to this traditional model of how a website works. To understand Jamstack, you need to understand the technology behind static websites.
Static Sites and Jamstack
If you had to explain how the web works to a complete novice, it might go something like this: Somewhere in a web server's file system reside HTML files, accessible via HTTP addresses, which a web browser downloads and then interprets to display a web page to create. But that's a description of a static website: it assumes the HTML files are already there when the web browser searches for them. However, over the past decade, the web has been largely dominated by dynamic websites that 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.
Static website generators
In the early days of the Internet, when web pages were strictly static, many web developers wrote the HTML by hand. As web pages became more complex, tools like Macromedia's Dreamweaver came along and started generating static HTML pages. As the static website movement gained momentum, a new wave of static website generators emerged, including Gatsby, Hugo, and Jeckyll. Unlike WYSIWYG tools like Dreamweaver, the static website generators are command line driven and designed to integrate well with CI/CD processes. These tools generate HTML files, often based on content written in Markdown, and automatically upload them to a version control repository like GitHub. Once these files are marked as production-ready, the static pages on the live site will be automatically updated.
Content Delivery Networks
It is important to note that static in this context does not mean that these are simple Web 1.0 pages that are not interactive. These pages may contain advanced JavaScript that runs in the browser and makes API calls to databases, server-side functions, or hosted serverless functions. However, since none of this runs on the web server, a static website doesn't need a powerful web host with a database. Many static websites are delivered on Content Delivery Networks (CDNs), where the content is mirrored across multiple servers around the world to be quickly available to users anywhere.
Mathieu Dionne, head of marketing at Snipcart, describes the beginnings of this new world of static websites in a blog post, mentioning that around 2015 "the Netlify founders… had just invented the term 'jamstack' to get rid of the negative connotation of ' 'Static Web'.”
We have described the Jamstack process in this section. Now let's briefly talk about Netlify and its role in the Jamstack ecosystem.
Netlify and Jamstack
Netlify is a cloud computing and web hosting company whose co-founder Mathias Biilmann coined the term jamstack. Netlify's services are tailored for clients who want to build websites based on the Jamstack philosophy.
In the years since Netlify has flown the Jamstack flag, the company has used the technology as the backbone of its PaaS offering, providing a content platform for the likes of Nike and Peleton.
Jam stack with Gatsby
Netlify is not the only provider of Jamstack hosting solutions and does not have any trademarks or proprietary rights to the term. There are a variety of Jamstack hosting and delivery solutions, and most of the major cloud providers are included, including Amazon Web Services, Google Firebase, and Microsoft Azure. Other more specialized companies have also entered the space, including Gatsby, Inc. with the static website generator of the same name.
The CMS without a head
Of course, building and hosting a website is just the beginning, as you know if you've ever had the task of managing a website. You also need a way to create new content and add it to your website. Since the people who take on this task are usually not programmers, they need an easy-to-use tool, namely a content management system (CMS). Traditional CMS like WordPress provide a back-end user interface (UI) that allows you to enter website content, manage a database that stores that content, and create dynamic web pages that present that content in response to browser requests.
CMS for Jamstack sites work differently and are commonly referred to as "headless". A headless CMS provides a user interface for entering and managing content and a database or other storage medium, but does not itself generate any HTML code that a browser can interpret. Instead, the website's static HTML pages use JavaScript to call the CMS's APIs, and the CMS returns the content in a format that JavaScript can convert into a web page.
This system completely separates content and presentation, which of course is an ancient programming ideal. Since the CMS has an accessible API, multiple websites can easily use it. For example, if you have created separate versions of your website for mobile, desktop, and smartwatches, all of those versions can access the same content stored in the CMS.
Netlify, as you might expect, has its own offering in this area, called NetlifyCMS, but there are other offerings as well; the developer Nebojsa Radakovic introduces them in his introduction to Headless CMSes. There are many emerging companies on this list, but also one very well-known name. While we used WordPress as an example of a traditional CMS, it can also be run as a headless CMS to power a jamstack site.
Why Jamstack?
We've already mentioned many of the benefits of Jamstack, but it's worth recapitulating them so you have a complete overview:
Speed: Static websites load faster, and it's not just a matter of convenience. Google penalizes slow websites by lowering their search rank, and customers who are used to quick answers often abandon e-commerce transactions when the steps load slowly. Developer convenience: Developers can build static websites using the Devops Creating techniques that have transformed industry practices and productivity. And the Jamstack philosophy results in site stacks that allow for a clean separation of domains, allowing developers to focus on their areas of expertise: front-end designers and developers can build sites without having to know a server-side language, while back-end developers can focus on APIs. Content issues are handled entirely in the CMS area. Flexibility: Static websites can be hosted by traditional web servers, CDNs, specialized services, or a combination of these three choices. And since headless CMSs interact with front-ends via APIs, you can easily build websites for multiple platforms that consume the same content.
When not to use Jamstack
However, with all these benefits, it has to be said that Jamstack is not for everyone. The downside to Jamstack being tailored to the needs of developers is that if you want to run a Jamstack-powered website, you'll be more dependent on developers than you might want. For companies that already have, or are willing to hire, a dedicated web development team with the skills required for Jamstack, that's not a big deal.
Is Jamstack popular?
Despite the hype surrounding Jamstack, the percentage of websites built with Jamstack is currently relatively small. The Web Almanac estimates that by 2021, websites built with static website builders (almost all of which are built using the Jamstack philosophy) will account for only about 1% of all websites. Still, Jamstack is in a period of rapid growth, with its market share having more than doubled each year for the past three years. A clear sign of the growing interest of developers in the technology: About a third of Jamstack developers are brand new on the scene and have less than two years of experience.
*Josh Fruhlinger is a writer and editor based in Los Angeles.
