HTML5 PushState

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

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

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

Et Rails dans tout ça ?

Intégration facile (As usual...)
jquery-pjax
rack-pjax

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?

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

HTML5 PushState

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (19)

Similaire à HTML5 PushState

Similaire à HTML5 PushState (20)

HTML5 PushState