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

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 Contre-nature HTTP

Où mettre le mode déconnecté ?

Comment faire ?

Ofﬂine 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

Container App PROXY Server UI ONLINE ? features! ofﬂine 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 stylesheet.css ! ! NETWORK: * ! ! FALLBACK: /online /offline.html ! ! ! myApp.appcache 10 cache-control : no-cache! MIME-type : text/cache-manifest

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

Et bien d’autres… File System API! ! IndexedDB! ! navigator.online!
! Page Visibility API! ! Battery Status API! ! Cookie :)

Quelques librairies

JQuery Server Observer Plugin LIB ! $.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

jQuery Ofﬂine Plugin LIB jQuery.retrieveJSON("/url", {data: "toSend"}, function(json, status, data)
{ }); ! jQuery.clearJSON("/url", {data: “toSend"}); https://github.com/wycats/jquery-ofﬂine

http://github.hubspot.com/ofﬂine/

http://brian.io/lawnchair/

https://github.com/mozilla/localForage

http://remotestorage.io/

https://www.ﬁrebase.com/

http://hood.ie

http://www.breezejs.com/

https://github.com/forbesmyester/SyncIt

La sécurité

Container XSS Stockée XSS Basée sur le DOM XSS Réﬂé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! ofﬂine 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éc...

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

More Decks by Rossi Oddet

Other Decks in Technology

Featured

Transcript