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