HTML5 PushState

3,472 views
3,418 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,472
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 !

×