nobackend e offline first: foque em criar experiências

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!


» Se o usuário está online, envie e sincronize com servidor

» Se não, salve localmente e sincronize depois!


Use o StorageEvent!- key- oldValue- newValue- url


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.


Rende outra talk inteira.


Rende outra talk inteira.

Por exemplo, essa: Offline Web do jeito certo com ServiceWorkers, Sérgio Lopes.

https://www.youtube.com/watch?v=mchPQdKbbus

https://www.youtube.com/watch?v=mchPQdKbbus

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.

http://alistapart.com/article/application-cache-is-a-douchebag

http://alistapart.com/article/application-cache-is-a-douchebag

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: "[email protected]", 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 protected]");

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

nobackend e offline first: foque em criar experiências

Technology