Post on 02-Aug-2015
nobackend eofflinefirstjoselito.ninja // @joselitojunior1 // alagoasdevday.com.br
Olá, meu nomeé Joselito Júnior
» Modelo e atriz
» Instrutor, palestrante
» Vencedor de hackathon profissional
» Fundador do GDG Recife
» Fã de Fórmula 1
» Apaixonado por entender e resolver
Vamos falar sobre
Internet
The State of LTE, OpenSignal. Acesso em 17/04/2014
4G?Alagoas:- Maceió
Pernambuco:- Recife- Jaboatão
4G?Minas Gerais: 4 CidadesRio de Janeiro: 4 CidadesSão Paulo: 8 Cidades
Demais estados: capitais
Ter interneto tempo todo
é normal?
Estar Offline
é comumbem mais comum do que parece
Estar Offline
Nãoé um problema
Estar Offline
Nãodeveria ser um problema
Desktop Connected World
Mobile First
Offline First
Offline Firsté sobre UX
Offline Firsté sobre PESSOAS
+ Pessoas+ Usuários
+ $
Mudanças
Offline tem que sermais do que tratar erros
Trate a rede de dados como uma
funcionalidade
NãoperderásinformaçãoPrimeiro mandamento do Offline First
Armazenamento» localStorage
» sessionStorage
» WebSQL
» IndexedDB
ArmazenamentoSincronize ao invés de salvar!
ArmazenamentoSincronize ao invés de salvar!
» Se o usuário está online, envie e sincronize com servidor
» Se não, salve localmente e sincronize depois!
ArmazenamentoSincronize ao invés de salvar!
ArmazenamentoSincronize ao invés de salvar!
Use o StorageEvent!- key- oldValue- newValue- url
ArmazenamentoSincronize ao invés de salvar!
Tem jeito mais fácil? Tem.
Falaremos em breve.
Service WorkersÉ um Web Worker que tomou muito Whey. Roda no background do navegador e não tem acesso ao DOM.
Service WorkersÉ um Web Worker que tomou muito Whey. Roda no background do navegador e não tem acesso ao DOM.
Rende outra talk inteira.
Service WorkersÉ um Web Worker que tomou muito Whey. Roda no background do navegador e não tem acesso ao DOM.
Rende outra talk inteira.
Por exemplo, essa: Offline Web do jeito certo com ServiceWorkers, Sérgio Lopes.
App CachePoderosissímo e um grande filho da p*ta.
<html manifest="offline.appcache">
O manifesto deve estar em todas as páginas que você desejam que devem se cacheadas.
App CacheCACHE MANIFESTindex.htmlstylesheet.cssimages/logo.pngscripts/main.jshttp://cdn.example.com/scripts/main.js
App CachePodemos dividir em 3 seções principais:
» CACHE
» NETOWRK
» FALLBACK
App CacheCACHE
Aquivos abaixo do cabeçalho CACHE (ou sem cabeçalho, é a seção default) serão armazenados na primeira vez que forem acessados.
App CacheNETWORK
Aqui que começa a confusão.
Arquivos listados aqui podem vir do servidor se eles não estão no cache.
Na maioria dos casos, usa-se *, para todas as páginas.
NETWORK:*
App CacheFALLBACK
Os arquivos na seção de fallback tem dois "parâmetros". O primeiro, o arquivo original (ou pasta), do servidor. O segundo, o arquivo que vai substituir os arquivos.
FALLBACK:/ fallback.htmlcardapio/pizzas/calabresa.jpg cardapio/pizza.jpgcardapio/pizzas/ cardapio/pizza.jpg
App CacheCuidados
» O cache tem prioridade ao que está no servidor.
» O manifesto só será atualizado se o conteúdo dele for alterado.
» Arquivos não cacheados nao vão carregar em páginas cacheadas
» E mais: Application Cache is a Douchebag, Jake Archibald.
Offline First ❤
SPAStaticFront-end driven
E a parte fácil?
noBackend
"noBackend"
Não é não de "não existe"É não de "não se preocupe"
localStorage.setItem("chave", "valor");
app.login(user, pass);
app.signUp(email, user, pass);
EmailsendEmail({ to: "marilene@alagoasdevday.com.br", subject: "Hoje à noite\n\n…", content: "<h1>Olá Marilene</h1><p>…</p>", attachments: [ 'vinhos.pdf' ]});
{\o/}Dreamcode
APIs do Hoodievar hoodie = new Hoodie(url);
» hoodie.store
» hoodie.account
» hoodie.id()
» on()
» online ou offline
» change, update
Plugins do HoodieAppCache Nanny
Automatização completa do manifesto!
» hoodie install appcache
» npm install -S appcache-nanny
» hoodie.appCache.start();
Parse e Firebase» Comerciais e mais robustos (BaaS)
» Armazenamento sob demanda
» Plugins
» Push (local) e outros serviços
API Parsevar user = new Parse.User();user.set("username", "my name");user.set("password", "my pass");user.set("email", "email@example.com");
user.set("phone", "415-392-0202");
user.signUp(null, { success: function(user) { ... }, error: function(user, error) { ... }});
API Parsevar base64 = "V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE=";var file = new Parse.File("myfile.txt", { base64: base64 });
API Parsevar parseFile = new Parse.File("myfile.zzz", fileData, "image/png");
parseFile.save().then(function() { // Imagem salva}, function(error) { // Ou ocorreu um erro ou a imagem não foi enviada ao Parse});
atwood's law“Any application that can be written in JavaScript, will eventually be written in JavaScript.”Jeff Atwood
E isso é só o começo
offlinefirst.org
nobackend.org
Isso é tudo pessoal!
Obrigado!Joselito Júniorjoselito.ninja@joselitojunior1
Slides em: http://jfnj.me/addnobackendoffline