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
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
So what are our options?
Slide 8
Slide 8 text
Hashbangs
Slide 9
Slide 9 text
twitter.com/#!/mentions
Slide 10
Slide 10 text
// Link to fragment identifier
@danwrong
// Listen for change, do change state
window.addEventListener('hashchange', function() {
var path = location.hash.replace(/^#!/, '');
$.get(path, function(state) {
render(state);
});
});
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.
Slide 14
Slide 14 text
PushState
Slide 15
Slide 15 text
// 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);
});
Slide 16
Slide 16 text
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.
Slide 17
Slide 17 text
PushState falling
back to Hashbang
Slide 18
Slide 18 text
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
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
Slide 28
Slide 28 text
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