PushState or Bust

There's only one sane way to make use of pushState. This presentation explains which way that is and why its the only real choice.

Transcript

1. PushState @danwrong or Bust
3. http://storify.com/timhaines/hashbang-conversation
4. “We MUST stop page refreshes!” - JavaScript Nerds
5. Why? ‣ Do snazzy transitions between pages ‣ Your client-side MVC app gives you no choice ‣ Reduce amount of bytes over the wire ‣ Reduce burden on the server
6. Breaking the web ‣ The back button ‣ Bookmarking and link sharing ‣ Search engine crawling ‣ Redirects, 404 and other HTTP level stuff ‣ Works (at least minimally) across browsers
7. So what are our options?
8. Hashbangs
9. twitter.com/#!/mentions
10. // Link to fragment identifier <a href="#!/danwrong">@danwrong</a> // Listen for change, do change state window.addEventListener('hashchange', function() { var path = location.hash.replace(/^#!/, ''); $.get(path, function(state) { render(state); }); });
11. http://danwebb.net/2011/5/28/it-is-about-the-hashbangs
12. TL;DR !=
13. Have we killed the web? ‣ The back button ‣ Bookmarking and link sharing ‣ Search engine crawling ‣ Redirects, 404 and other HTTP level stuff ‣ Works (at least minimally) across browsers Meh. Meh. Meh.
14. PushState
15. // fetch new state $.get('/danwrong', function(state) { history.pushState(state, "Twitter / danwrong", "/danwrong"); render(state); } // Handle back / forward button window.addEventListener('popstate', function(e) { render(e.state); });
16. Have we killed the web? ‣ The back button ‣ Bookmarking and link sharing ‣ Search engine crawling ‣ Redirects, 404 and other HTTP level stuff ‣ Works (at least minimally) across browsers Meh.
17. PushState falling back to Hashbang
18. Have we killed the web? ‣ The back button ‣ Bookmarking and link sharing ‣ Search engine crawling ‣ Redirects, 404 and other HTTP level stuff ‣ Works (at least minimally) across browsers
19. PushState or bust
20. If pushState is supported use it...
21. otherwise...
23. Page refresh!
25. <a href="/mentions" class="ps">Mentions</a> if (history.pushState) { document.addEventListener('click', function(e) { if (e.target.className == 'ps') { $.get(e.target.href, function(state) { render(state); history.pushState(state, state.title, e.target.href); }); e.preventDefault(); } }); }
26. Meanwhile, on the server...
27. class ConnectController def mentions @mentions = get_mentions if request.xhr? render :json => { :title => 'Twitter / mentions', :section => 'connect', # render just the page content but not the global "chrome" :page_html => MentionsView.new(@mentions).render } end # otherwise render the whole page as normal end end
28. Have we killed the web? ‣ The back button ‣ Bookmarking and link sharing ‣ Search engine crawling ‣ Redirects, 404 and other HTTP level stuff ‣ Works (at least minimally) across browsers
29. PushState or bust
30. But what about my client- side MVC app?
32. Questions?