Embed Size (px)
Citation preview
Voteriez-vous pour un web déconnecté ?
Rossi Oddet@rossioddethttp://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 ?
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
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 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 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
jQuery Offline PluginLIB
jQuery.retrieveJSON("/url", {data: "toSend"}, function(json, status, data) { }); !jQuery.clearJSON("/url", {data: “toSend"});
https://github.com/wycats/jquery-offline
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 2015] Refactoring avec 1,22% de code couvert par les tests ... Golden Master testing à la rescousse !](https://img.pdfslide.fr/doc/110x75/55b8e6a0bb61eb8b088b4745/breizhcamp-2015-refactoring-avec-122-de-code-couvert-par-les-tests-golden-master-testing-a-la-rescousse-.jpg)
![[BreizhCamp, format 15min] Une api rest et GraphQL sans code grâce à PostgREST, sub0 et PostgreSQL](https://img.pdfslide.fr/doc/110x75/5a6d49597f8b9af2418b520d/breizhcamp-format-15min-une-api-rest-et-graphql-sans-code-grace-a-postgrest.jpg)
![[BreizhCamp 2016] La relecture de code : avant tout des pratiques](https://img.pdfslide.fr/doc/110x75/58ec0b731a28abf9228b4623/breizhcamp-2016-la-relecture-de-code-avant-tout-des-pratiques.jpg)
