noBackend e Offline First: foque em criar experiências

556 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
556
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
8
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

×