The State of the Web

In this presentation, I talk about the HTML5 History API

Transcript

1. The State of the Web @keithpitt
2. Who Am I? Keith Keith Pitt Magic Keith Steve (long story)
3. First Technical Talk. Be Gentle... (Ok, if you want, rough me up a little)
4. State
5. Web State
6. Web State Web Pages/Applications are Stateful The back & forward buttons in the browser traverse state The URL is a link to the state Search engine crawlers take a snapshot of each possible state, and indexes them
7. AJAX Breaks This Somebody please think of the children!
8. How AJAX breaks state The back & forward buttons no longer behave as expected Links no longer work correctly Search engines can no longer crawl
9. Solution?
10. Hack the # Anchor Lots of ugly hacks, especially in IE where we need to use an iFrame.
11. Better Solution?
12. HTML5 History API Only works in Webkit. Firefox 4 is supposed to have it.
13. HTML5 History API 2 new methods: pushState replaceState 1 new event on the window object: onpopstate
14. pushState // This object is passed to the onpopstate event when it is fired. You // can fill this object with what ever you like. var stateObject = { title: 'This Awesome Post', createdAt: '2010-10-10', author: 'keithpitt' }; // At the moment, most browsers are ignoring this property, so just fill it with // the title of the new page. According to Firefox, they _may_ use it in the // future. var title = 'This Awesome Post'; // The full URL of the new page. var url = '/posts/this-awesome-post'; history.pushState(stateObject, title, url);
15. replaceState Same API as pushState, but doesn’t add anything to the history stack.
16. onpopstate $(window).bind('popstate', function(event) { alert('ZOMG, State Changed!'); })
17. JIZZ IN MY PANTS Solution?
18. HTML5 History API AND The # Anchor Hack
19. jQuery Address HTML5 History API where supported. Reverts back to the # Anchor hack. Works in IE6 http://www.asual.com/jquery/address/
20. Example $.address.state('/'); $.address.change(function(event) { alert('ZOMG, State Changed!'); }); $.address.value('/some/random/url');
21. Demo
22. @keithpitty
23. @keithpitt
24. Thats It! See more at my blog at keithpitt.com