HTML5
Single-page
Interfaces

Use arrow keys to navigate and Ctrl/Cmd -/+ to adjust text and positioning

Agenda

• Spectrum of Web Applications
• Managing HTML & Other Assets
• Implementing Navigation
• Module Communication
• Data Management & Caching

Spectrum of Web Apps

• Static
• Server Rendered
• Hybrid Design
• Single-page Interface
• Mileage Stats applies
  a hybrid design

Mileage Stats

Managing HTML

Considerations

• Are you also supporting down-level experiences?
  • If so, you will have at least 2 copies of the HTML
  • Don't try to hard to reuse the HTML from each experience
• How is the HTML getting to the browser? Ajax?
• How is the HTML getting changed?

Options

• Templates
• Observable pattern
• Combine HTML and data on the server

Navigation

• Harmony with the browser
• The URL matters
  • Specific resource
  • Application state
• Implementation Options
  • Rewrite links
  • Capture events
  • Fragment Identifier
• HTML5 History API

   
              $('#AboutLink').click(function() {
                  history.pushState(
                      {foo: 'bar'}, // state object
                      'About Us',   // title (ignored)
                      '#about'      // new URL
                  ); // also changes address bar
              });
              

   
              $(window).bind('popstate', function(e) {
                  // address bar has already changed
                  var state = e.state;
              });
              

  • 'pushState' adds to history
  • Going back fires 'popstate'
• Libraries like BBQ can help
  with Browser compatibility

   
                  var state = $.bbq.getState() || {};
                  state.foo = 'bar;
                  $.bbq.setState(state, 2);
                  

Communication

• Preferably loosely-coupled
  • Publish/Subscribe
  • Events through callbacks
• Can also use direct method calls

Getting & Caching Data

Using a JavaScript Object

• jQuery does most of the work
• Decouple by injecting a sendRequest function
• Caching uses a URL based key

 
    mstats.dataStore = {
      _data = {},
      get: function(token),
      set: function(token, payload),
      clear: function(token),
      clearAll: function()
    };
    

 
    mstats.dataManager = {
      dataDefaults = {
        dataType: 'json',
        type: 'POST' },
      sendRequest: function(options),
      resetData: function(endpoint),
    };
    

Caching with Local Storage

• Hard limit of 5Mb per origin
• Name/value pairs stored as strings

 
        window.localStorage.setItem('foo', 'foo data');
        var foo = localStorage.getItem('foo');
        localStorage.removeItem('foo');
        

• Monitor changes with the 'storage' event

 
        $(window).bind('storage', function(e) {
            var key = e.key,
                url = e.url,
                oldValue = e.oldValue,
                newValue = e.newValue;
        });
        

Feature Detection

• Feature detection > browser detection
  • Browsers evolving too quickly
  • Browsers are auto-updating
• Modernizr: http://modernizr.com
  • Exposes boolean properties
  • Places CSS classes on HTML element
• HTML5 Boilerplate: http://html5boilerplate.com
  • Includes MUCH more than just Modernizr

Summary

• Spectrum of Web Applications
• Managing HTML & Other Assets
• Implementing Navigation
• Module Communication
• Data Management & Caching

Questions?

Contact Info

• dons@microsoft.com
• http://blogs.msdn.com/donsmith
• @locksmithdon

• http://msdn.com/practices
• @mspnp

This presentation is online @