Posted on by & filed under Content - Highlights and Reviews.

Single-page web apps are all the rage. They offer a rich UI usually powered by a JSON API from the server. This works great once the app has already been downloaded, but for those visiting the app for the first time there’s a lot of work their browser needs to do to get stuff on their screen.

The browser has to do all of the following and more the first time it loads your fancy web app:

  1. Download the HTML.
  2. Download the CSS.
  3. Download the JS.
  4. Process the JS.
  5. Figure out where in the app the user should be based on the hash URL.
  6. Hit the API to download data from the server.
  7. Possibly download any templates needed to render the data.
  8. Generate HTML from your template.
  9. Inject your HTML into the DOM.

Using the HTML5 History API we can dynamically update the URLs so that our server can render the pages instad of the client, effectively cutting out steps 5-9 in our list. With the server doing the heavy lifting the first time around, our app can then focus on its dynamically loaded goodness on subsequent requests.

Here’s a simple example:

For this to work your server needs to provide a way to serve HTML and JSON from a similar URL. Here I’m assuming you can modify the return type based on the file extension of the URL.

The HTML5 History API let’s you update a browsers history without changing the page. Using this to your advantage you can make sure that when a user lands on your site they’ll get the content they want as quickly as possible.

This technique has been referred to as conditional-tier rendering, because it allows the same data to be rendered in different ways depending on what will provide the user with the greatest experience.

There are a few things to avoid while using the HTML5 History API.

  1. Don’t update the URL too often or the users back button will be a nightmare.
  2. Be careful with having a single URL that serves JSON in one instance and HTML in another (using the Accept header for example). Some browsers might incorrectly serve up the wrong version from its cache when you re-visit the page.

Safari Books Online has the content you need

Check out these HTML5 books available from Safari Books Online:

Using HTML5, web developers can create standards-based browser applications with extraordinary richness and power, incorporating everything from drag-and-drop to native audio and video—all without any third-party plug-ins. Simply put, every web developer needs to master HTML5—and the sooner you do so, the greater advantage you’ll have. HTML5 Developer’s Cookbook provides all the expert advice and proven code you need to start building production-quality HTML5 applications right now.
Whether you need an example-driven programmer’s guide or a complete desk reference, JavaScript: The Definitive Guide is the most authoritative book on the language that runs the Web. This sixth edition offers comprehensive coverage of ECMAScript 5 (the new language standard) and also the new APIs introduced in HTML5.
The Definitive Guide to HTML5 provides the breadth of information you’ll need to start creating the next generation of HTML5 websites. It covers all the base knowledge required for standards-compliant, semantic, modern website creation. It also covers the full HTML5 ecosystem and the associated APIs that complement the core HTML5 language.
With scores of practical recipes you can use in your projects right away, the HTML5 Cookbook helps you gain hands-on experience with HTML5’s versatile collection of elements. You get clear solutions for handling issues with everything from markup semantics, web forms, and audio and video elements to related technologies such as geolocation and rich JavaScript APIs.

About this author

Jamund Ferguson is a UI Product Architect at oDesk where he helps other people find the joy of working from home. He’s a passionate advocate for mobile web and an enthusiastic node.js hacker. He works from his home outside of Salt Lake City where he lives with his wife and two kids. You can find him on Twitter at @xjamundx.

Tags: html5,

Comments are closed.