Those Who Control The Past Control The Future: The HTML5 History API

1. Those Who Control The Past Control The Future: The HTML5 History API Sean Adkinson (@seanadkinson) Jama Software 2012 HTML5 Developer Conference

2. What is it? The HTML5 History API gives JavaScript the ability to control the browser’s URL …without reloading the page

3. Why History API now? • AJAX and single-page applications • New resources should have new URLs • The History API gives you the ability to use AJAX, and maintain proper URLs

4. “#!” Solution • Uses browser in-page link functionality • Problems with this solution • Only accessible to the client • Doesn’t work without JavaScript • Can’t use browser in-page links • It’s a hack

5. History API Spec • Two additional window.history methods • One additional window event

6. Push State window.history.pushState(data, title, path);

7. Replace State window.history.replaceState(data, title, path);

8. Pop State window.onpopstate = function(event); demo

9. Single-Page Strategy • URL  State, one-to-one • When state is changed, push new corresponding URL • On pop state (and initial page load), display based on URL  State • If starting a new project, just use a framework like Backbone demo

10. Multi-Page Strategy • Intercept link clicks • Retrieve and display content • Back-end returns only HTML • Push/replace state Github is a great example demo

11. Browser Support

12. History.js • Abstraction layer • History.pushState(data, title, url); • History.replaceState(data, title, url); • window.onstatechange • URLs can be pasted between IE  Firefox • Adapters for jQuery, Zepto, MooTools, more • http://bit.ly/historyjs

13. References • http://diveintohtml5.info/history.html • http://html5doctor.com/history-api/ • https://github.com/balupton/History.js/

14. Sean Adkinson Jama Software @seanadkinson

15. Questions?