noBackend e Offline First: foque em criar experiências #frontinfortaleza

nobackend e ofﬂineﬁrst joselito.ninja // @joselitojunior1 // frontinfortaleza.com.br

Olá, meu nome é Joselito Júnior » Modelo e atriz
» Instrutor, palestrante » Vencedor de hackathon proﬁssional » Fundador do GDG Recife » Fã de Fórmula 1 » Apaixonado por resolver problemas

Vamos falar sobre Internet?

The State of LTE, OpenSignal. Acesso em 17/04/2014

4G? Ceará: - Fortaleza Pernambuco: - Recife - Jaboatão

4G? Minas Gerais: 4 Cidades Rio de Janeiro: 4 Cidades
São Paulo: 8 Cidades Demais estados: capitais

Ter internet o tempo todo é normal?

Estar Ofﬂine é comum bem mais comum do que parece

Estar Ofﬂine Não é um problema

Estar Ofﬂine Não deveria ser um problema

Desktop Connected World

Mobile First

Ofﬂine First

Ofﬂine First é sobre UX

Ofﬂine First é sobre PESSOAS

+ Pessoas + Usuários + $

Mudanças

Ofﬂine tem que ser mais do que tratar erros

Trate a rede de dados como uma funcionalidade

Não perderás informação Primeiro mandamento do Ofﬂine First

Armazenamento » localStorage » sessionStorage » WebSQL » IndexedDB

Armazenamento Sincronize ao invés de salvar!

Armazenamento Sincronize ao invés de salvar! » Se o usuário
está online, envie e sincronize com servidor » Se não, salve localmente e sincronize depois!

Armazenamento Sincronize ao invés de salvar!

Armazenamento Sincronize ao invés de salvar! Use o StorageEvent! -
key - oldValue - newValue - url

Armazenamento Sincronize 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.

Roda no background do navegador e não tem acesso ao DOM. Rende outra talk inteira.

Roda no background do navegador e não tem acesso ao DOM. Rende outra talk inteira. Por exemplo, essa: Ofﬂine Web do jeito certo com ServiceWorkers, Sérgio Lopes.

App Cache Poderosissímo e um grande ﬁlho da p*ta. <html
manifest="ofﬂine.appcache"> O manifesto deve estar em todas as páginas que você desejam que devem se cacheadas.

App Cache CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js http://cdn.example.com/scripts/main.js

App Cache Podemos dividir em 3 seções principais: » CACHE
» NETOWRK » FALLBACK

App Cache CACHE Aquivos abaixo do cabeçalho CACHE (ou sem
cabeçalho, é a seção default) serão armazenados na primeira vez que forem acessados.

App Cache NETWORK 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 Cache FALLBACK 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.html cardapio/pizzas/calabresa.jpg cardapio/pizza.jpg cardapio/pizzas/ cardapio/pizza.jpg

App Cache Cuidados » 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.

Ofﬂine First ❤ SPA Static Front-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);

Email sendEmail({ to: "[email protected]", subject: "Hoje à noite\n\n…", content: "<h1>Olá
Marilene</h1><p>…</ p>", attachments: [ 'vinhos.pdf' ] });

{\o/} Dreamcode

APIs do Hoodie var hoodie = new Hoodie(url); » hoodie.store
» hoodie.account » hoodie.id() » on() » online ou ofﬂine » change, update

Plugins do Hoodie AppCache 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 Parse var 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 Parse var base64 = "V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE="; var ﬁle = new
Parse.File("myﬁle.txt", { base64: base64 });

API Parse var parseFile = new Parse.File("myﬁle.zzz", ﬁleData, "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

ofﬂineﬁrst.org

nobackend.org

Isso é tudo pessoal!

Obrigado! Joselito Júnior joselito.ninja @joselitojunior1 Slides em: http://jfnj.me/slides Avalie: http://plp.io/twfa

noBackend e Offline First: foque em criar exper...

noBackend e Offline First: foque em criar experiências #frontinfortaleza

More Decks by Joselito

Other Decks in Technology

Featured

Transcript