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

24/07/2015 - Campus Party Recife

Transcript

1. nobackend e
   offlinefirst
   joselito.ninja // @joselitojunior1 // recife.campus-party.org
   

   View Slide

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
   resolver problemas
   

   View Slide

3. View Slide

4. Vamos falar sobre
   Internet?
   

   View Slide

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

   View Slide

6. 4G?
   Pernambuco:
   - Recife
   - Jaboatão
   

   View Slide

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

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. Ter internet
    o tempo todo
    é normal?
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. Estar Offline
    é comum
    bem mais comum
    do que parece
    

    View Slide

16. Estar Offline
    Não
    é um problema
    

    View Slide

17. Estar Offline
    Não
    deveria ser um
    problema
    

    View Slide

18. Desktop Connected World
    

    View Slide

19. Mobile First
    

    View Slide

20. Offline First
    

    View Slide

21. Offline First
    é sobre UX
    

    View Slide

22. Offline First
    é sobre PESSOAS
    

    View Slide

23. + Pessoas
    + Usuários
    + $
    

    View Slide

24. Mudanças
    

    View Slide

25. Offline tem que ser
    mais do que tratar erros
    

    View Slide

26. Trate a rede de dados como uma
    funcionalidade
    

    View Slide

27. View Slide

28. Não
    perderás
    informação
    Primeiro mandamento do Offline First
    

    View Slide

29. Armazenamento
    » localStorage
    » sessionStorage
    » WebSQL
    » IndexedDB
    

    View Slide

30. Armazenamento
    Sincronize ao invés de salvar!
    

    View Slide

31. 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!
    

    View Slide

32. Armazenamento
    Sincronize ao invés de salvar!
    

    View Slide

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

    View Slide

34. Armazenamento
    Sincronize ao invés de salvar!
    Tem jeito mais fácil? Tem.
    Falaremos em breve.
    

    View Slide

35. Service Workers
    É um Web Worker que tomou muito Whey.
    Roda no background do navegador e não tem
    acesso ao DOM.
    

    View Slide

36. 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.
    

    View Slide

37. 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.
    

    View Slide

38. App Cache
    Poderosissímo e um grande filho da p*ta.
    
    O manifesto deve estar em todas as
    páginas que você desejam que devem se
    cacheadas.
    

    View Slide

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

    View Slide

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

    View Slide

41. 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.
    

    View Slide

42. 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:
    *
    

    View Slide

43. 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
    

    View Slide

44. View Slide

45. 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.
    

    View Slide

46. Offline First ❤
    SPA
    Static
    Front-end driven
    

    View Slide

47. E a parte fácil?
    

    View Slide

48. noBackend
    

    View Slide

49. "noBackend"
    

    View Slide

50. Não é não de "não existe"
    É não de "não se preocupe"
    

    View Slide

51. localStorage.setItem("chave", "valor");
    

    View Slide

52. app.login(user, pass);
    

    View Slide

53. app.signUp(email, user, pass);
    

    View Slide

54. Email
    sendEmail({
    to: "marilene@recife.campus-party.org",
    subject: "Hoje à noite\n\n…",
    content: "Olá Marilene…
    p>",
    attachments: [ 'vinhos.pdf' ]
    });
    

    View Slide

55. {\o/}
    Dreamcode
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

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

    View Slide

66. Plugins do Hoodie
    AppCache Nanny
    Automatização completa do manifesto!
    » hoodie install appcache
    » npm install -S appcache-nanny
    » hoodie.appCache.start();
    

    View Slide

67. Parse e Firebase
    » Comerciais e mais robustos (BaaS)
    » Armazenamento sob demanda
    » Plugins
    » Push (local) e outros serviços
    

    View Slide

68. 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) { ... }
    });
    

    View Slide

69. API Parse
    var base64 =
    "V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE=";
    var file = new Parse.File("myfile.txt",
    { base64: base64 });
    

    View Slide

70. 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
    });
    

    View Slide

71. View Slide

72. atwood's law
    “Any application that can be written in
    JavaScript, will eventually be written in
    JavaScript.”
    Jeff Atwood
    

    View Slide

73. E isso é só o começo
    

    View Slide

74. offlinefirst.org
    

    View Slide

75. nobackend.org
    

    View Slide

76. Isso é tudo pessoal!
    

    View Slide

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

    View Slide