Software in context


Evolution of the Single Page Application — Part 1 of 2

8th July 2014

This series is an enlargement of a tech-talk I gave to fellow engineers at OpenX about the history of front-end web development. The evolution of the SPA is only one of many ways to tell this story. I was very young when JavaScript was invented, so corrections are welcomed.

So what is a Single Page App?

My personal definition:

A Single Page Application is a web application that requires only a single page load in a web browser.

I prefer this definition because it's concise, but it deserves some qualification. A web application can range from a simple static website with a handful of pages to full blown web-based software like Flickr or Google Maps. Also, what's a page? We'll get to this soon.

The bottom line about a Single Page App is that you only have to navigate somewhere once. Your browser blinks and fully renders the DOM a single time. After this, background JavaScript performs any server interactions and modifies the view as needed. At the time of writing, SPAs are known by their usage of JavaScript frameworks that enable this through techniques such as templating, routing, and view-to-model binding.

If our web app can think about talking to the server and updating its views as two distinct problems, we've just achieved huge wins for user experience and bandwidth conservation. But this is a totally sensible way to write user interfaces in the first place, right? MVC has been around since the 1970s. Why do we need the official concept of a Single Page App to tell us how to design a program? I think the question is best answered by looking back in time. What follows is a brief survey of how web programming has evolved from a script-less internet to robust SPA engineering tools like AngularJS in about 20 years. I've chosen to call this an Evolution on purpose as there are many striking similarities between this story and the biological sense of the term.

The Right Environment: The Internet

In the early '90s the Internet is rapidly expanding due to a handful of tightly-knit inventions mostly credited to Tim Berners-Lee of CERN:

  1. Hypertext – Formally HTML. A language for describing basic text documents—pages—that can contain links to each other.
  2. HTTP - A communication protocol for transferring HTML documents.
  3. URLs - An addressing convention for locating HTML documents.
  4. httpd - "HTTP daemon" is a basic web server that eventually turns into Apache.

These are exposed and exercised by web browsers, which know how to get HTML pages from URLs via HTTP and render them graphically. Notable early browsers are WorldWideWeb in 1991 (also Tim's invention), Mosaic in 1993, and Netscape in '94.

A Single Page Application is defined in terms of the environment in which it exists, but was not made for.

Let's revisit pages. For the purposes of this discussion, page has two definitions: (1) the document that the browser gets from a URL and renders, and (2) all the stuff that occupies the browser viewport at a given time. This second one is the common understanding of a web page. The former is the original definition of a page; every view on the Internet in 1993 is an HTML file that lives on a server somewhere at a particular URL. Most importantly, definition (1) is also the one intended by Single Page App. Thus we see that a SPA is defined in terms of the environment in which it exists, but was not made for.

Anyway, people making the most sophisticated websites in the early '90s are stitching together HTML documents with hyperlinks, editing static files on the server or uploading them with FTP. Anything resembling a modern SPA exists as a desktop application.

Building Blocks of Life: JavaScript

JavaScript is created at Netscape in 1994 and marketed as the little brother of Java. But it's only real use on the client is DHTML. The most common script on the Internet for a decade is:

element.onClick = function() {
    document.getElementById("myImage").src =

During this primordial JavaScript time, the most complicated things created are menu rollovers, tickers, timers, and monkeys whose eyeballs follow your mouse around the screen. There are even reports of small JavaScript games being developed.

Meanwhile, Server-Side Sophistication

In the early to mid-nineties, client-side machines still generally conceived of as terminals; servers are the expensive powerhouses where the possibility of dynamic views are born. There are many, many server side technologies and languages being popularized at this time, but here are 3 of the most influential in my opinion:

  1. Common Gateway Interface - CGI is an interface for arbitrary programs to create programmatic responses to HTTP requests. Instead of a web server simply serving a static file, it can talk to a database or a CPU-intensive algorithm, and generate an HTML page that contains, for example, customer-specific data.
  2. Apache modules - The Apache HTTP Server grows out of httpd, and quickly becomes the most widely used web server in the world. But like much software that experiences rapid growth, it's propelled by a plugin-friendly design that allows it to be used as a platform for a whole ecosystem of custom server-side functionality. Many web developers in the late nineties are writing Apache modules. These range from modules for user authentication like mod_auth to those for language support like mod_php.
  3. The Page Languages - People realize that its easy to describe dynamic HTML documents by distinguishing the parts that change from the parts that don't. One way of accomplishing this is to use a program that processes an HTML-like file and inserts some stuff before sending it back to the web browser. Let's output some HTML for a customer's purchases using the PHP: Hypertext Preprocessor scripting language:

    <h3><?php echo $customer_name; ?>'s Purchases:</h3>
      <?php foreach ($customer_purchases as $purchase) { ?>
        <li><?php echo $purchase; ?></li>
      <?php } ?>

    The syntax above—embedding executable code wherever programmatic output is required—is popularized by what I term the page languages: PHP in 1994, ASP in 1996, and JSP in '99 (only a small sample).

Single Page Ancestors

Below, an ancient SPA:

An ancient SPA

Web programs resembling modern SPAs actually exist starting in the mid-nineties. These troglodytes are due to two technologies introduced in 1995 and 1996, respectively. First, Java Applets are a really cool things that look like:

Java Applets

Flash is a technology with similarly expressive capabilities:


I'm (mostly) joking. At this time Applets are popular for web-based CPU or graphics-intensive tasks like data visualizations, and Macromedia Flash, the increasingly popular option, is powering some of the coolest looking sites on the Internet. You may recall awe-inspiring Flash sites complete with loading bars, "click to enter" links, sound effects, and sexy animated transitions between pages. While many of these sites contain the Single Page App concept (all the content is either loaded up front with ActionScript or gotten on-demand and synthesized into the view), the concept is hidden by graphical pizzazz and a steep learning curve.

Thus the images above do illustrate a valid point: that browsers are simply acting as proxies to third-party platforms that have to be explicitly installed. And it follows that ancestral SPAs are only as good and plentiful as these platforms are powerful and adopted.

Let's regroup. Except for a couple of small exclusive ecosystems, at the turn of the millennium web programming is still very much attached to the old way of thinking about pages: A page is what a web server sends to my browser, and is equivalent to what I see within the four walls of my browser at a given moment. As we can see, this notion is even locked into the names of the most popular web scripting languages at this time! (PHP, ASP, etc).

Most of the innovations in web applications are still happening on the server-side, and in the early 2000s the outlook for the client-side is bleak. The dot-com bubble has burst, and there's a lack of agreement between browser companies about how JavaScript should be standardized and implemented. The dark ages of the client-side web really extend to 2005, when a mutation in the form of a white-paper starts a web programming revolution.

To be continued in Part 2.

Caleb Sotelo

Caleb Sotelo

I'm a Software Engineer and Director of OpenX Labs. I try to write about software in a way that helps people truly understand it. Follow me @calebds.

View Comments