HTML5PushState (dans Rails)

Oocto.com

Constat

Hier

Pages WEB Stateful

L’URL était lié à l’état

La navigation changeait l’état

Full compatible

Aujourd’hui

Utilisation massive de de Ajax

Ajax casse les états

Fragment Stateless

URL ne marque pas l’état

Navigation ne fonctionne plus

Aujourd’hui

Solution:

Hack par l’utilisation de Hashbang : #!

https://twitter.com/#!/florian_elam

Problèmes

N’est pas envoyé dans l’HTTP request

Comptabilité JS (Moteurs de recherche...)

Solution

Demain

HTML 5 History API !

History API

interface History { readonly attribute long length; readonly attribute any state; void go([delta]); void back(); void forward(); void pushState(data, title [, url ]); void replaceState (data, title [, url ]);};

PushState

2 méthodes

pushState

replaceState

1 événement

onpopstate

Compatibilité

IE Firefox Chrome Safari Opera iOS Android

2.16 3.6 3.2 2.27 9 4.0 2.38 10 17 5 4.2 39 11 18 5.1 11.6 5 410 12 19 5.2 12.0

13 20

Librairies/Polyfill

jQuery Address (Hashtag + pushState)

History.js (Hashtag + pushState)

pjax (Full pushState + Fallback)

Un polyfill est un morceau de code (ou plugin) qui fournit la technologie qui aurait du être implémentée par le navigateur de façon native.

Exemples d’implémentation

Github

Pour le TreeView (Navigation dans les sources)

Facebook

NewsFeed, Pages profils, etc...

Flickr

Navigation dans les photos

Oocto

Navigation dans les onglets des projets...

Demo

Et Rails dans tout ça ?

Intégration facile (As usual...)

jquery-pjax

rack-pjax

jquery-pjax

Simple !

Rajouter «data-pjax-container» + une classe sur les liens

Système de fallback

Fait une requête AJAX et ensuite push

Filtre la la balise <title>

Filtre le conteneur

Envoi un argument «_pjax»

render :layout => params[:pjax].blank?

rack-pjax

Middleware de 40 lignes

Seulement le titre et le conteneur sont envoyés au client.

Conclusion

Rapide à mettre en place

60% des navigateurs compatibles

Implémentation transparente

Au lieu d’appauvrir l’expérience pour tous on l’améliore pour certains...

Linkographie

http://danwebb.net/2011/5/28/it-is-about-the-hashbangs

https://github.com/eval/rack-pjax

https://github.com/defunkt/jquery-pjax/

http://railscasts.com/episodes/294-playing-with-pjax

http://www.w3.org/TR/html5-author/history.html#the-history-interface

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate

http://blog.new-bamboo.co.uk/2011/2/2/degradable-javascript-applications-using-html5-pushstate

http://www.w3.org/Provider/Style/URI.html

https://github.com/asual/jquery-address

https://github.com/balupton/history.js

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Merci !