Jurassic JavaScriptPark: rodando offline até na ilha Nublar!

Jurassic JavaScript Park Rodando oﬄine até na Ilha Nublar!

@eduardojmatos eduardomatos.me OI, EU SOU O EDU

Soluções de comunicação que aproximam médicos e pacientes

PORQUE AINDA FALAMOS SOBRE OFFLINE EM 2015?

http://ispspeedindex.netﬂix.com/country/brazil/

MÉDIA DE CONEXÃO MÓVEL 2,5MB 20,4MB 8,8MB http://www.reclameaqui.com.br/noticias/noticias/com-media-de-velocidade-abaixo-da-mundial-internet-brasileir_1585/

COMO ISSO DEVERIA IMPACTAR NOSSO DESENVOLVIMENTO?

UX Sensação de rapidez Não deve ser frustrante Deve ser
honesta sobre conectividade Não deve perder informações

TÁ, E COMO FAZ?

APPLICATION CACHE CACHE DE ARQUIVOS NO BROWSER

<html manifest="manifest.appcache"> CACHE MANIFEST CACHE: http://jurassicpark.com/images/dino1.jpg http://jurassicpark.com/images/dino2.jpg http://jurassicpark.com/images/dino3.jpg NETWORK: https://facebook.com/sdk.js
FALLBACK: index.html offline.html

PROBLEMAS O AppCache só atualiza o conteúdo do manifesto se
ele mesmo for atualizado Os arquivos sempre virão do ApplicationCache mesmo se você estiver online … Recomendo fortemente a leitura: http://sergiolopes.org/palestra-appcache-html5-ofﬂine/

HÁ ESPERANÇA

MAS AINDA NÃO É O IDEAL… O Application Cache é
ok para cachear assets Mas precisamos de algo mais evoluído para controlar de forma programática, sem modo texto

AppCache Service Workers

O FUTURO DO CACHE NO BROWSER SERVICE WORKERS

if ('serviceWorker' in navigator) { navigator.serviceWorker.register( '/js/sw.js',  { scope: '/'
}  ).then(function(reg) { if(reg.installing) { console.log('Service worker installing'); } else if(reg.waiting) { console.log('Service worker installed'); } else if(reg.active) { console.log('Service worker active'); } }).catch(function(error) { // registration failed console.log('Registration failed with ' + error); }); };

// /js/sw.js this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([
'/index.html', '/js/app.js', '/css/styles.css', '/images/gallery/jurassic_park.jpg' ]); }) ); });

this.addEventListener('fetch', function(event) { var response; event.respondWith(caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(r)
{ response = r; caches.open('v1').then(function(cache) { cache.put(event.request, response); }); return response.clone(); }).catch(function() { return caches.match('/images/gallery/jurassic_park.jpg'); })); });

MAS VAMOS FALAR SOBRE DADOS Como faço pra armazenar informações
além de assets?

FORMAS DE SE ARMAZENAR DADOS • cookies • localStorage •
WebSQL • IndexedDB

COOKIE Forma mais primitiva de armazenar informação no browser

document.cookie = "dino=T-Rex"; document.cookie = "dino=T-Rex;expires=Fri, 31 Dec 9999 23:59:59
GMT";

https://github.com/js-cookie/js-cookie

Cookies.set("dino", "Velociraptor", { expires: 7 }); Cookies.get("dino"); // returns "dino"
Cookies.remove("dino");

PRÓS CONTRAS Simples de implementar Sem uma biblioteca o controle
ﬁca complicado Browsers suportam amplamente Problemas de segurança (Cookie stealing e XSS, CSFR, etc.) Ótimo para informações curtas Limite de 4093 bytes

LOCALSTORAGE Forma mais moderninha de armazenamento

localStorage.setItem("dino", "Aragosaurus"); localStorage.getItem("dino"); // returns "Aragosaurus" localStorage.dino = "Aragosaurus";

https://github.com/addyosmani/basket.js

basket.require( { url: "jquery.js" }, { url: "underscore.js" }, {
url: "backbone.js" } ); var req; var ttl; basket.require({ url: "jquery.min.js", key: "jquery" }); req = basket.get("jquery");

https://github.com/marcuswestin/store.js

store.set("dino", "Datousaurus"); store.get("dino"); // returns "Datousaurus" store.remove("dino"); store.clear(); store.set("dino", {
name: "Datousaurus", diet: "herbivorous" });

PRÓS CONTRAS Fácil implementação Limite de 5M por domínio Amplo
suporte É síncrono Melhor segurança Os dados ﬁcam lá eternamente, mesmo não visitando mais o site

WEBSQL SQL no seu browser

// name, version, description, size (bytes) var db = openDatabase("dinos",
"1", "todo list example db", 2 * 1024 * 1024); // executeSql // (SQL string, arguments, success, error) db.transaction( function (tx) { tx.executeSql( "CREATE TABLE IF NOT EXISTS dinos (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)", [], function (tx, results) { console.log("ok!"); }, function (err) { console.log("error!", err); } ); } );

db.transaction( function (tx) { tx.executeSql( "SELECT * FROM dinos WHERE
id > ?", ["1"], function (tx, results) { var row = ""; for (var i=0; i<results.rows.length; i++) { console.log("Dino name:", results.rows.item(i).name); } }, function (err) { console.log("query problems...", err); } ); }, function (err) { console.log("transaction problems...", err); } );

db.transaction( function (tx) { tx.executeSql( "INSERT INTO dinos(name) VALUES(?)", ["Megalosaurus"],
function ( tx, results ) { console.log("ok! inserted!"); }, function (err) { console.log("not inserted :("); } ); }, function (err) { console.log("inserting problems...", err); }, function () { console.log("transaction completed!"); } );

PRÓS CONTRAS Banco de dados no browser Sintaxe SQL pode
assustar quem não está acostumado Performance razoável Deprecated. Apenas alguns browsers ainda dão suporte. Não é full SQL supported. Crash com muitos dados (10,000 rows já apresenta certa lentidão)

INDEXEDDB like a localStorage, but coolest

request.onsuccess = function (event) { db = event.target.result; var trans
= db.transaction(["dinos"], "readwrite"); var transRequest = trans.objectStore("dinos"); transRequest.onsuccess = function (event) { var result = transRequest.result || event.result; if (!result) return; console.log("dino", result.key, result.value.text); cursor.continue(); } var dinoName = "Velociraptor"; var storeRequest = transRequest.put(dinoName); storeRequest.onsuccess = function (event) { console.log(event.target.result) } storeRequest.onerror = function (event) { console.log(event) } };

PRÓS CONTRAS Mais evoluído que localStorage Suporte em browsers modernos
Pode trabalhar com uma quantidade maior de dados Se o usuário fechar o browser no meio de uma transaction, o dado se perde Pode trabalhar em Workers Mais complexo que as outras formas de armazenamento Tem índices

FUNCIONA NO MEU FRAMEWORK DO ❤?

LOCALSTORAGE https://github.com/grevory/angular-local-storage https://github.com/jeromegn/Backbone.localStorage

WEBSQL https://github.com/paulocaldeira17/angular-websql https://github.com/BJTerry/backbone.websqlofﬂine

INDEXEDDB https://github.com/bramski/angular-indexedDB https://github.com/vincentmac/backbone-idb

OK, MAS TUDO ISSO AINDA PARECE MUITO COMPLICADO...

MOZILLA.LOCALFORAGE https://github.com/mozilla/localForage

// In localStorage, we would do: var obj = {
value: "Dinofauro" }; localStorage.setItem("dino", JSON.stringify(obj)); console.log(obj.value); // With localForage, we use callbacks: localforage.setItem("dino", obj, function (err, result) { console.log(result.value); });

localforage.getItem("dino", function(err, value) { if (err) { console.error(“Oops...”); } else
{ console.log("Dino:", value); } });

var db = new PouchDB("dinoDB"); db.put({ _id: 1, name: "Dinofauro
Fefiz" }); db.changes().on("change", function () { console.log("Alterou alfuma foisa"); }); db.replicate.to("http://dinofauro.com/dinoDB");

AGORA SIM! PODEMOS RODAR NOSSA APLICAÇÃO ATÉ NA ILHA NUBLAR!!!

NÃO É SÓ POR DIVERSÃO É QUESTÃO DE UX!!!

SEJA SENSATO! Em alguns casos o cenário ofﬂine nem pode
existir, como em serviços de chat, transmissão de áudio e vídeo, e etc. O esforço vale a pena somente quando o cenário pede esse tipo de arquitetura

HTTP://EDUARDOJMATOS.GITHUB.IO/FRONTINRIO2015

[email protected] @eduardojmatos http://eduardomatos.me OBRIGADO ;) http://bit.ly/ofﬂine-frontinrio2015

Jurassic JavaScriptPark: rodando offline até na...

Jurassic JavaScriptPark: rodando offline até na ilha Nublar!

More Decks by Eduardo Matos

Other Decks in Programming

Featured

Transcript