Voteriez-vous pour un web
déconnecté ?
Rossi Oddet
@rossioddet
http://blog.roddet.com
2014, l’année de
l’Internet des Objets
Pourquoi toute
cette frustration ?
HTTP !
Request
HTTP !
Response
Pas de ça chez HTTP !
Résumons
Une système
sans mode déconnecté ?
Inutile quand la connexion est perdue
Contre-nature Humaine
Inadaptée à la vie réelle
C...
Où mettre le mode
déconnecté ?
Comment faire ?
Offline First !
1. Développer son système en mode déconnecté
2. Ajouter les fonctionnalités du mode connecté
Arrêtez de con...
Container
App
PROXY
Server
UI
ONLINE ?
features!
offline
features!
online
SENSORS
SYNC
Et si mon container est
le navigateur ?
+ Des Librairies +
Surtout
votre talent de développeur !
Attention à la sécurité !
Application Cache
<html manifest="myApp.appcache">
!
!
!
</html>
index.html
CACHE MANIFEST
!
CACHE:
favicon.ico
script.js
...
Web Storage
8
!
localStorage.setItem(key,value);
!
!
localStorage.getItem(key);
!
!
localStorage.removeItem(key);
!
!
loca...
Et bien d’autres…
File System API!
!
IndexedDB!
!
navigator.online!
!
Page Visibility API!
!
Battery Status API!
!
Cookie ...
Quelques librairies
JQuery Server Observer PluginLIB
!
$.serverObserver.enable({
url: "http://xxx",
frequency: 5000,
onServerOnline: function(...
jQuery Offline PluginLIB
jQuery.retrieveJSON("/url", {data: "toSend"}, function(json, status, data) {
});
!
jQuery.clearJSO...
http://github.hubspot.com/offline/
http://brian.io/lawnchair/
https://github.com/mozilla/localForage
http://remotestorage.io/
https://www.firebase.com/
http://hood.ie
http://www.breezejs.com/
https://github.com/forbesmyester/SyncIt
La sécurité
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!
…
https://www.owasp.org/index.php/OWASP_Testing_Guide_v4_Table_of_Contents
Nouvelle rubrique
Et surtout…
Container
App
PROXY
UI
ONLINE ?
features!
offline
features!
online
SENSORS
SYNC
Votre talent !!!
Et si vous décidiez vous
aussi d’être “tendance” ?
Soyez “réactif” avec le
mode déconnecté !
http://www.reactivemanifesto.org/
responsive
event-driven
scalable resilient
Et si tout le monde
jouait le jeu ?
Voteriez-vous pour un web
déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
Prochain SlideShare
Chargement dans…5
×

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

507 vues

Publié le

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
507
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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é ?

×