1. The State of the Web
@keithpitt

2. Who Am I?

3. Who Am I?

4. Who Am I?
Keith

5. Who Am I?
Keith
Keith Pitt

6. Who Am I?
Keith
Keith Pitt
Magic Keith

7. Who Am I?
Keith
Keith Pitt
Magic Keith
Steve (long story)

8. First Technical Talk. Be Gentle...

9. First Technical Talk. Be Gentle...
(Ok, if you want, rough me up a little)

10. State

11. Web State

12. Web State

13. Web State
Web Pages/Applications are Stateful

14. Web State
Web Pages/Applications are Stateful
The back & forward buttons in the browser traverse
state

15. Web State
Web Pages/Applications are Stateful
The back & forward buttons in the browser traverse
state
The URL is a link to the state

16. 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

17. AJAX Breaks This

18. AJAX Breaks This
Somebody please think of the children!

19. How AJAX breaks state

20. How AJAX breaks state
The back & forward buttons
no longer behave as
expected

21. How AJAX breaks state
The back & forward buttons
no longer behave as
expected
Links no longer work
correctly

22. How AJAX breaks state
The back & forward buttons
no longer behave as
expected
Links no longer work
correctly
Search engines can no
longer crawl

23. Solution?

24. Hack the # Anchor

25. Hack the # Anchor
Lots of ugly hacks, especially in IE where
we need to use an iFrame.

26. Better Solution?

29. HTML5 History API

30. HTML5 History API
Only works in Webkit. Firefox 4
is supposed to have it.

31. HTML5 History API

32. HTML5 History API
2 new methods:

33. HTML5 History API
2 new methods:
pushState

34. HTML5 History API
2 new methods:
pushState
replaceState

35. HTML5 History API
2 new methods:
pushState
replaceState
1 new event on the window object:

36. HTML5 History API
2 new methods:
pushState
replaceState
1 new event on the window object:
onpopstate

37. 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);

38. replaceState
Same API as pushState, but doesn’t add anything to
the history stack.

39. onpopstate
$(window).bind('popstate', function(event) {
alert('ZOMG, State Changed!');
})

40. JIZZ IN MY PANTS
Solution?

41. HTML5 History API
AND
The # Anchor Hack

42. jQuery Address

43. jQuery Address
HTML5 History API where supported.
Reverts back to the # Anchor hack.
Works in IE6
http://www.asual.com/jquery/address/

44. Example
$.address.state('/');
$.address.change(function(event) {
alert('ZOMG, State Changed!');
});
$.address.value('/some/random/url');

45. Demo

46. @keithpitty

47. @keithpitt

48. Thats It!
See more at my blog at keithpitt.com