Téléchargé 21 fois
![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 ]);
};](https://image.slidesharecdn.com/parisrb-pushstate-120412044050-phpapp01/85/HTML5-PushState-9-320.jpg)
![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?](https://image.slidesharecdn.com/parisrb-pushstate-120412044050-phpapp01/85/HTML5-PushState-16-320.jpg)
Téléchargé parFlorian L
HTML5 PushState
Le document traite de l'utilisation de l'API HTML5 History et de la méthode pushState dans le contexte des applications web. Il souligne les problèmes causés par l'utilisation généralisée d'AJAX sur la navigation et présente des solutions telles que l'intégration de polyfills comme jQuery-Pjax. La conclusion met en avant la compatibilité croissante avec les navigateurs modernes et l'amélioration de l'expérience utilisateur.
HTML5 PushState
- 1.
- 2.
- 3.
- 4. Hier Pages WEB Stateful L’URLétait lié à l’état La navigation changeait l’état Full compatible
- 5. Aujourd’hui Utilisation massive dede Ajax Ajax casse les états Fragment Stateless URL ne marque pas l’état Navigation ne fonctionne plus
- 6. Aujourd’hui Solution: Hackpar 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.
- 8.
- 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 jQueryAddress (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.
- 15. Et Rails danstout ç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 40lignes Seulement le titre et le conteneur sont envoyés au client.
- 18. Conclusion Rapide à mettreen place 60% des navigateurs compatibles Implémentation transparente Au lieu d’appauvrir l’expérience pour tous on l’améliore pour certains...
- 19.
- 20.