nobackend e
offlinefirstjoselito.ninja // @joselitojunior1 // alagoasdevday.com.br
Olá, meu nome
é Joselito Júnior
» Modelo e atriz
» Instrutor,
palestrante
» Vencedor de
hackathon
profissional
» Fundador d...
Vamos falar sobre
Internet
TheStateofLTE,OpenSignal.Acessoem17/04/2014
4G?
Alagoas:
- Maceió
Pernambuco:
- Recife
- Jaboatão
4G?
Minas Gerais: 4 Cidades
Rio de Janeiro: 4 Cidades
São Paulo: 8 Cidades
Demais estados: capitais
Ter internet
otempotodo
é normal?
Estar Offline
é comumbem mais comum
do que parece
Estar Offline
Nãoé um problema
Estar Offline
Nãodeveriaser um
problema
DesktopConnectedWorld
Mobile First
Offline First
Offline First
é sobre UX
Offline First
é sobre PESSOAS
+ Pessoas
+ Usuários
+ $
Mudanças
Offline tem que ser
mais do quetratar erros
Trate arede de dados como uma
funcionalidade
Não
perderás
informaçãoPrimeiro mandamento do Offline 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 l...
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.
ServiceWorkers
É um Web Worker que tomou muito Whey.
Roda no background do navegador e não tem
acesso ao DOM.
ServiceWorkers
É um Web Worker que tomou muito Whey.
Roda no background do navegador e não tem
acesso ao DOM.
Rende outra ...
ServiceWorkers
É um Web Worker que tomou muito Whey.
Roda no background do navegador e não tem
acesso ao DOM.
Rende outra ...
AppCache
Poderosissímo e um grande filho da p*ta.
<html manifest="offline.appcache">
O manifesto deve estar em todas as
pági...
AppCache
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js
AppCache
Podemos dividir em 3 seções principais:
» CACHE
» NETOWRK
» FALLBACK
AppCache
CACHE
Aquivos abaixo do cabeçalho CACHE (ou sem
cabeçalho, é a seção default) serão
armazenados na primeira vez q...
AppCache
NETWORK
Aqui que começa a confusão.
Arquivos listados aqui podem vir do
servidor se eles não estão no cache.
Na m...
AppCache
FALLBACK
Os arquivos na seção de fallback tem dois
"parâmetros". O primeiro, o arquivo
original (ou pasta), do se...
AppCache
Cuidados
» O cache tem prioridade ao que está no
servidor.
» O manifesto só será atualizado se o
conteúdo dele fo...
Offline First❤
SPA
StaticFront-end driven
Eaparte 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: "marilene@alagoasdevday.com.br",
subject: "Hoje à noitenn…",
content: "<h1>Olá Marilene</h1><p>…</
p...
{o/}Dreamcode
APIs do Hoodie
var hoodie = new Hoodie(url);
» hoodie.store
» hoodie.account
» hoodie.id()
» on()
» online ou offline
» cha...
Plugins do Hoodie
AppCache Nanny
Automatização completa do manifesto!
» hoodie install appcache
» npm install -S appcache-...
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",...
API Parse
var base64 =
"V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE=";
var file = new Parse.File("myfile.txt",
{ base64: base64 });
API Parse
var parseFile = new
Parse.File("myfile.zzz", fileData,
"image/png");
parseFile.save().then(function() {
// Imagem ...
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!JoselitoJúnior
joselito.ninja
@joselitojunior1
Slides em: http://jfnj.me/
addnobackendoffline
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
noBackend e Offline First: foque em criar experiências
Próximos SlideShares
Carregando em…5
×

noBackend e Offline First: foque em criar experiências

547 visualizações

Publicada em

noBackend e Offline First: foque em criar experiências

Publicada em: Tecnologia
0 comentários
7 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
547
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

noBackend e Offline First: foque em criar experiências

  1. 1. nobackend e offlinefirstjoselito.ninja // @joselitojunior1 // alagoasdevday.com.br
  2. 2. 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
  3. 3. Vamos falar sobre Internet
  4. 4. TheStateofLTE,OpenSignal.Acessoem17/04/2014
  5. 5. 4G? Alagoas: - Maceió Pernambuco: - Recife - Jaboatão
  6. 6. 4G? Minas Gerais: 4 Cidades Rio de Janeiro: 4 Cidades São Paulo: 8 Cidades Demais estados: capitais
  7. 7. Ter internet otempotodo é normal?
  8. 8. Estar Offline é comumbem mais comum do que parece
  9. 9. Estar Offline Nãoé um problema
  10. 10. Estar Offline Nãodeveriaser um problema
  11. 11. DesktopConnectedWorld
  12. 12. Mobile First
  13. 13. Offline First
  14. 14. Offline First é sobre UX
  15. 15. Offline First é sobre PESSOAS
  16. 16. + Pessoas + Usuários + $
  17. 17. Mudanças
  18. 18. Offline tem que ser mais do quetratar erros
  19. 19. Trate arede de dados como uma funcionalidade
  20. 20. Não perderás informaçãoPrimeiro mandamento do Offline First
  21. 21. Armazenamento » localStorage » sessionStorage » WebSQL » IndexedDB
  22. 22. Armazenamento Sincronize ao invés de salvar!
  23. 23. 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!
  24. 24. Armazenamento Sincronize ao invés de salvar!
  25. 25. Armazenamento Sincronize ao invés de salvar! Use o StorageEvent! - key - oldValue - newValue - url
  26. 26. Armazenamento Sincronize ao invés de salvar! Tem jeito mais fácil? Tem. Falaremos em breve.
  27. 27. ServiceWorkers É um Web Worker que tomou muito Whey. Roda no background do navegador e não tem acesso ao DOM.
  28. 28. ServiceWorkers É um Web Worker que tomou muito Whey. Roda no background do navegador e não tem acesso ao DOM. Rende outra talk inteira.
  29. 29. ServiceWorkers É 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.
  30. 30. AppCache Poderosissí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.
  31. 31. AppCache CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js http://cdn.example.com/scripts/main.js
  32. 32. AppCache Podemos dividir em 3 seções principais: » CACHE » NETOWRK » FALLBACK
  33. 33. AppCache CACHE Aquivos abaixo do cabeçalho CACHE (ou sem cabeçalho, é a seção default) serão armazenados na primeira vez que forem acessados.
  34. 34. AppCache 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: *
  35. 35. AppCache 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
  36. 36. AppCache 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.
  37. 37. Offline First❤ SPA StaticFront-end driven
  38. 38. Eaparte fácil?
  39. 39. noBackend
  40. 40. "noBackend"
  41. 41. Não é não de "não existe" É não de "não se preocupe"
  42. 42. localStorage.setItem("chave", "valor");
  43. 43. app.login(user, pass);
  44. 44. app.signUp(email, user, pass);
  45. 45. Email sendEmail({ to: "marilene@alagoasdevday.com.br", subject: "Hoje à noitenn…", content: "<h1>Olá Marilene</h1><p>…</ p>", attachments: [ 'vinhos.pdf' ] });
  46. 46. {o/}Dreamcode
  47. 47. APIs do Hoodie var hoodie = new Hoodie(url); » hoodie.store » hoodie.account » hoodie.id() » on() » online ou offline » change, update
  48. 48. Plugins do Hoodie AppCache Nanny Automatização completa do manifesto! » hoodie install appcache » npm install -S appcache-nanny » hoodie.appCache.start();
  49. 49. Parse e Firebase » Comerciais e mais robustos (BaaS) » Armazenamento sob demanda » Plugins » Push (local) e outros serviços
  50. 50. API Parse var 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) { ... } });
  51. 51. API Parse var base64 = "V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE="; var file = new Parse.File("myfile.txt", { base64: base64 });
  52. 52. API Parse var 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 });
  53. 53. atwood's law “Any application that can be written in JavaScript, will eventually be written in JavaScript.” Jeff Atwood
  54. 54. E isso é só o começo
  55. 55. offlinefirst.org
  56. 56. nobackend.org
  57. 57. Isso étudo pessoal!
  58. 58. Obrigado!JoselitoJúnior joselito.ninja @joselitojunior1 Slides em: http://jfnj.me/ addnobackendoffline

×