Chances are good that you are building, have built, or are someday going to build a web application.1 So let’s take a high level look at what constitutes a modern web application, and how we got here.
Remember the 1990s? A time when gas was cheap, grunge was in, and people were still smarter than their mobile phones? Of course, it was also the decade in which the Web was born. Seemed like everyone had a “web page”, some people even had whole “web sites”, connected by “hyperlinks”. Ahhh, good times. Let’s take a look back at how web servers worked in those glory years…
Note: While the details have gotten dramatically more interesting (read: complicated) over the last decade, these basic principles still fundamentally power any web application you use or build today, so pay attention!
Request/Response is the Heartbeat of the Web
The core of the web is powered by a series of requests and responses. A request is most often made by your browser; it contacts an HTTP server, which is a just a program running on a machine2 with a public IP address somewhere. The job of the HTTP server is to look at the URL you are requesting3, and figure out what to send back to you. It acts much like a waiter, who brings your food requests to the kitchen, drink requests to the bar, and maybe the occasional request to the maître d’ or the valet. The HTTP server will process requests for a web page to one place, for an image to another place, and may even redirect your browser to an entirely different server to handle some requests.
Note: It turns out that humans are pretty sloppy when it comes to writing HTML, and browsers over the years have grown extremely forgiving. The code shown here isn’t “proper” in a strict sense. The syntactically valid version (that a good developer ought to be writing) is more verbose, but follows the same basic principles.
For those that forget the HTML they learned from a 700-page Teach yourself HTML in 21 Days book in 1996, here’s a quick reminder. This is basic stuff, but stick with me, and we’ll see how it evolves into the “real” web applications we build today.
All those bracketed characters are the HTML markup.5 When you open this file in a web browser (go ahead, download it and open it up, you’ll see…), it looks like this:
When your browser requests the URL
http://www.example.com/about/team/bob.html</strong>, this simple web-server looks in the corresponding directories, finds that path on disk, and responds to the browser with the contents of the bob.html file.
When the browser gets the HTML, in addition to rendering it, it notices that there’s an image at http://www.example.com/about/team/bob-headshot.png</strong>, referenced in an HTML tag6, so the browser issues a second request. The HTTP server again finds the requested file in the path corresponding to the URL, and returns the contents of the image file.
<li> Display comments on an article in real-time without having to modify the article page HTML for each new comment. </li> <li> Provide configurable messages for different target audiences to a site. </li> <li> Show web-pages with real-time data (like the current weather). </li>
Let’s see a simple example of how this might work. The PHP scripting language is a venerable7 web language specifically designed to co-mingle code and plain HTML.
Unfortunately, it’s not enough to just put this on the HTTP server and run it like before. The server needs to do more than simply return the contents of that file on disk. We tell the HTTP server8 that any file in our website directory that has a “.php” file extension should instead be passed to the PHP program. And the server responds to the browser with whatever that program prints out.
I really mean almost everyone…it’s looking like this web thing isn’t a fad after all ↩︎
A computer similar to your desktop at home, but running in a rack in a datacenter most likely ↩︎
Plus some other data, like your browser settings, your language settings, information in your cookies, and more. ↩︎
Just plain old text files, like the ones made by TextEdit on your Mac or Notepad.exe on the Windows machine you had once upon a time. ↩︎
The files are “marked up”, like a copy editor marks up a first draft with proofreading symbols. Hence the “markup language” in HTML (Hyper Text Markup Language) ↩︎
<img src="http://www.example.com/about/team/bob-headshot.png" height="320" width="240"/>↩︎
Yeah, that’s code for “old and crusty and not cool any more”, but it’s still alive and kicking, so don’t be a hater. ↩︎
Each HTTP server has configuration files that it loads to determine behaviors like which programs to run to generate code for which URLs ↩︎