Chapter 1: History of the Jamstack
Welcome to the Jamstack. This completely new web development paradigm has excited the information technology industry and is becoming steadily more popular, with new companies constantly forming around it. This book is one of the first of a few tutorials available focused on practical and hands-on experience with the Jamstack.
A technology stack represents a specific collection of languages, databases, and operating systems, such as the LAMP stack. The acronym LAMP stands for Linux, an operating system; Apache, a web server; MySQL, a database; and PHP, a programming language. The Jamstack is actually not a stack in this sense, but rather a new methodology and toolset to produce websites and web applications.
In this chapter, we're going to first look at the history of the web, introduce the Jamstack, and discuss its advantages. To understand how the Jamstack evolved into what it is today, we need to look back at the more-than-two-decade history of the World Wide Web. Web design and web development, the two main industries that evolved from the World Wide Web, developed into two very popular and lucrative occupations, but it wasn't always that way.
These are the main topics that we will cover in this chapter:
- The evolution of the Jamstack
- The rise of the Jamstack
- Our Jamstack
- Getting started with the Jamstack
The evolution of the Jamstack
The evolution of the Jamstack can be easily explained by looking at how the World Wide Web evolved, starting with its most central component, HyperText Markup Language (HTML).
HTML
The very first web pages were simply comprised of text with HTML tags, providing markup instructions with the ability to link pages together. In fact, HTML is often mistaken by the average person as a programming language, but it was, at the most fundamental level, a series of symbols that represented formatting instructions. It still gets included in programming language lists, together with actual programming languages such as C and Java. It is merely a markup language, though, despite having evolved rapidly to now include accessibility and semantic features. This means that it is not much more than markup. In its earliest versions, however, it simply provided general formatting instructions.
For example, we could use an h1 tag to represent the header of a page, which would make the text appear larger, or a bold tag to make the text bold. Each page would consist of text, links, and HTML tags.
The following code snippet provides an example of this:
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to my webpage.</h1>
</body>
<html>
As the number of web pages on websites grew, weekly—or even daily—tasks involved updating up to 50 pages manually. Every time a change was needed in a shared part of a web page (such as the header, footer, or navigation pane), these repeated actions proved to be quite tedious.
Let's investigate some solutions that were devised for this problem.
Server-side includes
One attempt to remedy this repeated manual work was called a server-side include, or SSI. This markup element was created to allow web designers to include pieces of pages (for example, the header) without having to repeat content and markup. Then, when the page was generated, the tag would be replaced with the resultant HTML output.
For example, three links on a web page, Home, About Us, and Contact Us, would have the following markup:
<a href="home.html">Home</a>
<a href="about_us.html">About Us</a>
<a href="contact_us.html">Contact Us</a>
This HTML could be placed inside a file called navigation.ssi. The include would be called as follows:
<!--#include virtual="navigation.ssi" -->
After the web server processed this, the result shown on the page would be the same as that shown in the preceding example. Next, another similar approach was used to allow for dynamic content to be produced.
The Common Gateway Interface
The Common Gateway Interface or CGI, allowed programs written in languages such as Perl to be included in a web page, providing added functionality such as a page counter. The actual place in the HTML page that called this code would again be replaced with the resulting HTML output.
A Perl script that counted the number of page visitors was placed into the cgi-bin directory and called as follows:
<p>This page has been visited
<!--#exec cgi="/cgi-bin/counter.pl"--> times.</p>
This would produce the following result on the web page:
<p>This page has been visited 5349 times.</p>
The number 5349 was produced by this code and displayed on the page.
Forms
Another important part of the history of web development was forms. Forms allowed a simple web page to transform itself into an actual web application. Web forms replicated the functionality of traditional forms found in desktop applications. Web forms also enabled end users, as opposed to the webmaster, to add content—for example, in forums, submission forms were used.
On the public-facing portion of a website, submissions from these forms added even more content as websites grew quickly in size. Sites soon effectively became software applications, more than just a collection of files with markup. Soon, more than just serving simple pages, web server modules were created to preprocess entire pages as programs.
Web page preprocessors
Another interesting part of the evolution of modern web development was the ability to use whole page preprocessors, such as PHP. In fact, this language, recursively called PHP: Hypertext Preprocessor, explains exactly what it does. These files had a different file extension, and the web server (such as Apache) could process the entire page as an actual program and output the result as HTML tags and content.
Next, let's move into the modern era: Content Management Systems (CMS).
Content Management Systems
Soon, databases such as MySQL were included in affordable web hosting plans so that webmasters could easily use them. Database tables could be queried, and the results would enrich and add meaning t...
