PushState or Bust

Transcript

1. PushState @danwrong or Bust

2. None

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

22. None

23. Page refresh!

24. None

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?

31. None

32. Questions?