Tom Dale, an Ember core developer, gave a talk on modern web applications this September 20th in San Francisco. During the talk, he presented a compelling argument why the URL is crucial to a modern web application and should be designed with utmost attention. To motivate his talk, he compared the URL’s role in today’s Internet to the role a telephone number in a telephone network. I’m presenting my viewpoint on the topic based on his talk with my own perspective.
Telephone Numbers
Let’s step back a century for a minute. When the United States was first getting wired with the telephone network, people called into switchboards located within each city. The switchboard operator (a person) would talk to the caller to route the line to the destination. As the system grew larger, switch numbers were offered to help operators find the connecting line faster. Electronic switching replaced switchboard operators and expanded the length of telephone numbers to their current 10 digits. The first 3 digits represents the area. The second 3 digits represents the regional switchboard. The last 4 digits is the person’s number.
In addition to representing local telephone numbers, special area numbers were introduced for specific purposes, for example, 800 for toll-free calls. These special numbers were bought by businesses to represent their national presence. The choice of telephone number was, and still is, very important for both residential customers and companies today.
URLs: The Telephone Number of the Internet
The first generation Internet was launched in the early 1990s. Hypertext documents on the Internet each had their own unique URL. If someone wanted to reopen the document, the person would navigate back to the same URL. The URL connects the reader to the document in the same way a the telephone number connects an individual’s call.
Websites with personalized content (the 2nd generation Internet) started appearing soon after. These websites required state to be maintained between page reloads, for instance, to maintain a login session. Although some early URLs added hashes to save state, state is often saved in the web browser using a cookie in the request-response cycle. A URL, thus, cannot retrieve the exact state of a website.
Front-End Web Applications
In the early 2000s websites started having more interactive content. Instead of reloading a web page for this content, front-end web applications were introduced to run inside the web browser. The website would download a Flash plugin, Java applet, or something similar. Site-specific code would then run inside the plugin for the web application. URLs didn’t reflect the state of these web applications because plugins weren’t allowed to rewrite URLs (because of a security sandbox).
Downloading web browser plugins was a hack attempt at building web applications. In the late 2000s, the JavaScript language and runtime matured to the point where they could now run web applications. The first popular JavaScript web framework, Backbone.js, in 2010 demonstrated this 3rd generation of the Internet. In the years since, we’ve seen the phenomenal growth of subsequent front-end web frameworks such as Angular and Ember.
URLs for Front-End Web Applications
Since front-end web applications do not reload the web page, they do not change the URL. JavaScript APIs, however, are capable of rewriting and parsing the URL. Web developers can take advantage of these capabilities to expose state in front-end web applications. Web frameworks such as Backbone, Angular, and Ember have client-side routers to help developers parse URLs appropriately.
The open challenge is to design these URLs to expose the appropriate state for front-end web applications. Tom Dale suggests the URL has three components, which mirror the MVC (model-view-controller) design of Angular and Ember. I’m currently researching other state representations in URLs.
1 |
Template: /view/model/?some=controller
|
1 |
Example: /photos/3/?sort=rating
|
Summary
The URL is the gateway to a web application. In years past, we were unable to represent a web application’s state in the URL because of technical limitations. Today, modern front-end web applications can represent a state. It is now up to web developers to design URLs with the same care and attention that telephone numbers received in the last century.