BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?

539 views

Published on

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
539
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?

  1. 1. Voteriez-vous pour un web déconnecté ? Rossi Oddet @rossioddet http://blog.roddet.com
  2. 2. 2014, l’année de l’Internet des Objets
  3. 3. Pourquoi toute cette frustration ?
  4. 4. HTTP ! Request
  5. 5. HTTP ! Response
  6. 6. Pas de ça chez HTTP !
  7. 7. Résumons
  8. 8. Une système sans mode déconnecté ? Inutile quand la connexion est perdue Contre-nature Humaine Inadaptée à la vie réelle Contre-nature HTTP
  9. 9. Où mettre le mode déconnecté ?
  10. 10. Comment faire ?
  11. 11. Offline First ! 1. Développer son système en mode déconnecté 2. Ajouter les fonctionnalités du mode connecté Arrêtez de considérer la perte de connexion comme une erreur technique
  12. 12. Container App PROXY Server UI ONLINE ? features! offline features! online SENSORS SYNC
  13. 13. Et si mon container est le navigateur ?
  14. 14. + Des Librairies + Surtout votre talent de développeur ! Attention à la sécurité !
  15. 15. Application Cache <html manifest="myApp.appcache"> ! ! ! </html> index.html CACHE MANIFEST ! CACHE: favicon.ico script.js stylesheet.css ! ! NETWORK: * ! ! FALLBACK: /online /offline.html ! ! ! myApp.appcache 10 cache-control : no-cache! MIME-type : text/cache-manifest
  16. 16. Web Storage 8 ! localStorage.setItem(key,value); ! ! localStorage.getItem(key); ! ! localStorage.removeItem(key); ! ! localStorage.length ! ! localStorage.key(index) ! ! localStorage.clear() localStorage vs sessionStorage Stockage Clé/Valeur
  17. 17. Et bien d’autres… File System API! ! IndexedDB! ! navigator.online! ! Page Visibility API! ! Battery Status API! ! Cookie :)
  18. 18. Quelques librairies
  19. 19. JQuery Server Observer PluginLIB ! $.serverObserver.enable({ url: "http://xxx", frequency: 5000, onServerOnline: function() { // The server is available }, onServerOffline: function() { // The server is unavailable } }); ! $.serverObserver.disable() ! $.serverObserver.isServerOnline() https://github.com/antoine-richard/jquery-server-observer
  20. 20. jQuery Offline PluginLIB jQuery.retrieveJSON("/url", {data: "toSend"}, function(json, status, data) { }); ! jQuery.clearJSON("/url", {data: “toSend"}); https://github.com/wycats/jquery-offline
  21. 21. http://github.hubspot.com/offline/
  22. 22. http://brian.io/lawnchair/
  23. 23. https://github.com/mozilla/localForage
  24. 24. http://remotestorage.io/
  25. 25. https://www.firebase.com/
  26. 26. http://hood.ie
  27. 27. http://www.breezejs.com/
  28. 28. https://github.com/forbesmyester/SyncIt
  29. 29. La sécurité
  30. 30. Container XSS StockéeXSS Basée sur le DOM XSS Réfléchie Déni de service! Corruption des données! Vol de données! …
  31. 31. https://www.owasp.org/index.php/OWASP_Testing_Guide_v4_Table_of_Contents Nouvelle rubrique
  32. 32. Et surtout…
  33. 33. Container App PROXY UI ONLINE ? features! offline features! online SENSORS SYNC Votre talent !!!
  34. 34. Et si vous décidiez vous aussi d’être “tendance” ?
  35. 35. Soyez “réactif” avec le mode déconnecté !
  36. 36. http://www.reactivemanifesto.org/ responsive event-driven scalable resilient
  37. 37. Et si tout le monde jouait le jeu ?
  38. 38. Voteriez-vous pour un web déconnecté ?

×