Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Front in Fortaleza

joseli.to

May 16, 2015
Tweet

More Decks by joseli.to

Other Decks in Technology

Transcript

  1. nobackend e
    offlinefirst
    joselito.ninja // @joselitojunior1 // frontinfortaleza.com.br

    View full-size 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 full-size slide

  3. Vamos falar sobre
    Internet?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Ter internet
    o tempo todo
    é normal?

    View full-size slide

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

    View full-size slide

  9. Estar Offline
    Não
    é um problema

    View full-size slide

  10. Estar Offline
    Não
    deveria ser um
    problema

    View full-size slide

  11. Desktop Connected World

    View full-size slide

  12. Mobile First

    View full-size slide

  13. Offline First

    View full-size slide

  14. Offline First
    é sobre UX

    View full-size slide

  15. Offline First
    é sobre PESSOAS

    View full-size slide

  16. + Pessoas
    + Usuários
    + $

    View full-size slide

  17. Offline tem que ser
    mais do que tratar erros

    View full-size slide

  18. Trate a rede de dados como uma
    funcionalidade

    View full-size slide

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

    View full-size slide

  20. Armazenamento
    » localStorage
    » sessionStorage
    » WebSQL
    » IndexedDB

    View full-size slide

  21. Armazenamento
    Sincronize ao invés de salvar!

    View full-size slide

  22. 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 full-size slide

  23. Armazenamento
    Sincronize ao invés de salvar!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. Offline First ❤
    SPA
    Static
    Front-end driven

    View full-size slide

  37. E a parte fácil?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. app.login(user, pass);

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. {\o/}
    Dreamcode

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 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 full-size slide

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

    View full-size slide

  51. E isso é só o começo

    View full-size slide

  52. offlinefirst.org

    View full-size slide

  53. nobackend.org

    View full-size slide

  54. Isso é tudo pessoal!

    View full-size slide

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

    View full-size slide