The State of the Web - Speaker Deck

Slide 1

Slide 1 text

The State of the Web @keithpitt

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

State

Slide 5

Slide 5 text

Web State

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

AJAX Breaks This Somebody please think of the children!

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Solution?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Better Solution?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

JIZZ IN MY PANTS Solution?

Slide 18

Slide 18 text

HTML5 History API AND The # Anchor Hack

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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