1. HTML5
PushState (dans Rails)

2. Oocto.com

3. Constat

4. Hier
Pages WEB Stateful
L’URL était lié à l’état
La navigation changeait l’état
Full compatible

5. Aujourd’hui
Utilisation massive de de Ajax
Ajax casse les états
Fragment Stateless
URL ne marque pas l’état
Navigation ne fonctionne plus

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

7. Solution

8. Demain
HTML 5 History API !

9. 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 ]);
};

10. PushState
2 méthodes
pushState
replaceState
1 événement
onpopstate

11. Compatibilité
IE Firefox Chrome Safari Opera iOS Android
2.1
6 3.6 3.2 2.2
7 9 4.0 2.3
8 10 17 5 4.2 3
9 11 18 5.1 11.6 5 4
10 12 19 5.2 12.0
13 20

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

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

14. Demo

15. Et Rails dans tout ça ?
Intégration facile (As usual...)
jquery-pjax
rack-pjax

16. jquery-pjax
Simple !
Ra jouter «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?

17. rack-pjax
Middleware de 40 lignes
Seulement le titre et le conteneur sont
envoyés au client.

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

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

20. Merci !