HTML5 PushState

3 522 vues

Publié le

Feature méconnue de HTML5 : PushState et son intégration dans Rails.
(Slides de la présentation au Paris.rb du 11/03/12)

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
3 522
Sur SlideShare
0
Issues des intégrations
0
Intégrations
96
Actions
Partages
0
Téléchargements
20
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

HTML5 PushState

  1. 1. HTML5PushState (dans Rails)
  2. 2. Oocto.com
  3. 3. Constat
  4. 4. HierPages WEB StatefulL’URL était lié à l’étatLa navigation changeait l’étatFull compatible
  5. 5. Aujourd’huiUtilisation massive de de AjaxAjax casse les états Fragment Stateless URL ne marque pas l’état Navigation ne fonctionne plus
  6. 6. Aujourd’huiSolution: 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. 7. Solution
  8. 8. DemainHTML 5 History API !
  9. 9. History APIinterface 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. 10. PushState2 méthodes pushState replaceState1 événement onpopstate
  11. 11. 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
  12. 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 latechnologie qui aurait du être implémentée par le navigateurde façon native.
  13. 13. Exemples d’implémentationGithub Pour le TreeView (Navigation dans les sources)Facebook NewsFeed, Pages profils, etc...Flickr Navigation dans les photosOocto Navigation dans les onglets des projets...
  14. 14. Demo
  15. 15. Et Rails dans tout ça ? Intégration facile (As usual...) jquery-pjax rack-pjax
  16. 16. jquery-pjaxSimple ! Ra jouter «data-pjax-container» + une classe sur les liensSystème de fallbackFait une requête AJAX et ensuite push Filtre la la balise <title> Filtre le conteneurEnvoi un argument «_pjax» render :layout => params[:pjax].blank?
  17. 17. rack-pjaxMiddleware de 40 lignesSeulement le titre et le conteneur sontenvoyés au client.
  18. 18. ConclusionRapide à mettre en place60% des navigateurs compatiblesImplémentation transparenteAu lieu d’appauvrir l’expérience pour touson l’améliore pour certains...
  19. 19. Linkographiehttp://danwebb.net/2011/5/28/it-is-about-the-hashbangshttps://github.com/eval/rack-pjaxhttps://github.com/defunkt/jquery-pjax/http://railscasts.com/episodes/294-playing-with-pjaxhttp://www.w3.org/TR/html5-author/history.html#the-history-interfacehttps://developer.mozilla.org/en/DOM/Manipulating_the_browser_historyhttp://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstatehttp://blog.new-bamboo.co.uk/2011/2/2/degradable-javascript-applications-using-html5-pushstatehttp://www.w3.org/Provider/Style/URI.htmlhttps://github.com/asual/jquery-addresshttps://github.com/balupton/history.jshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  20. 20. Merci !

×