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

Aplicações Web - um estudo sobre React

Aplicações Web - um estudo sobre React

Esta palestra tem como objetivo revisitar conceitos de aplicações escritas para funcionar na Internet. Veremos quais as vantagens e principais tendências para criação de experiências de usuário diferenciadas. Iremos abordar escrita de código no universo React focando em resultados.

Jean Carlo Emer

May 15, 2016
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

Transcript

  1. aplicações

    web
    um estudo

    sobre
    react

    View full-size slide

  2. jcemer.com
    twitter.com/jcemer

    View full-size slide

  3. globo.com
    talentos.globo.com

    View full-size slide

  4. o que são
    aplicações

    View full-size slide

  5. o gmail é a mais
    notável das
    aplicações web

    View full-size slide

  6. o facebook é a
    mais usada das
    aplicações web

    View full-size slide

  7. aplicações possuem
    diferentes estados
    em uma única
    página

    View full-size slide

  8. a navegação pelo
    conteúdo torna-se
    mais fluída em uma
    aplicação

    View full-size slide

  9. uma camada entre
    navegador e
    servidor reduz a
    carga de dados

    View full-size slide

  10. aplicações web
    criam experiências
    compatíveis as das
    ferramentas nativas
    por menos custo 

    e melhor suporte

    View full-size slide

  11. três
    aspectos
    importantes
    em aplicações

    View full-size slide

  12. priorizar o conteúdo
    #1 de 3

    View full-size slide

  13. primar uma boa
    experiência de
    navegação
    #2 de 3

    View full-size slide

  14. atentar para a
    performance
    #3 de 3

    View full-size slide

  15. 0,1 segundos é
    impercebível
    1 segundo é aceitável
    10 segundos é mais que
    o suficiente para perder o
    usuário

    View full-size slide

  16. usuários esperam
    que as páginas
    carreguem em 

    2 segundos
    forrester consulting - http://bit.ly/1ttKspI

    View full-size slide

  17. após 3 segundos
    quase a metade
    dos usuários irão
    abandonar seu site
    forrester consulting - http://bit.ly/1ttKspI

    View full-size slide

  18. considere também a
    performance percebida

    View full-size slide

  19. http://
    blog.teamtreehouse.com/
    perceived-performance

    View full-size slide

  20. alguns
    desafios
    técnicos
    pra não queimar
    as aplicações

    View full-size slide

  21. o ambiente do
    navegador possui
    algumas limitações

    View full-size slide

  22. alterar os elementos do
    documento sem critérios
    não é performático
    fugir da chuva de reflows
    não é tarefa fácil

    View full-size slide

  23. os estados da aplicação
    e a barra de endereço
    devem ter sincronia
    o botão voltar do navegador
    precisa ter sentido

    View full-size slide

  24. a lógica para controle das
    interações é complexa e
    precisa ser bem pensada
    deixar o usuário num estado
    inconsistente não é uma boa

    View full-size slide

  25. a organização do código
    precisa ser planejada e
    praticada
    javascript e css viram

    caos fácil fácil

    View full-size slide

  26. manter o código enxuto e
    planejar seu download faz
    parte da experiência
    o código da sua aplicação será
    baixado a cada acesso?!

    View full-size slide

  27. instabilidades na conexão
    de rede precisam ser
    endereçadas
    internet caiu e voltou, e agora?!

    View full-size slide

  28. os motores de busca
    devem reconhecer o
    conteúdo do seu site
    algumas aplicações também
    precisam ser encontradas

    View full-size slide

  29. já existem diversas
    tecnologias para
    auxiliar nestas
    situações

    View full-size slide

  30. um punhado de
    ingredientes
    modernos

    View full-size slide

  31. #1 react
    https://github.com/
    facebook/react

    View full-size slide

  32. é uma biblioteca para
    fazer interfaces com o
    usuário
    react

    View full-size slide

  33. são usados para formar
    sistemas mais
    complexos
    componentes

    View full-size slide

  34. Valor: R$50,00
    Quantidade: 1

    View full-size slide

  35. #1.1 react
    estados e propriedades

    View full-size slide

  36. existem dois tipos
    de dados dinâmicos:
    os do servidor e os
    do usuário

    View full-size slide

  37. dados do usuário

    escolha da 

    quantidade
    dados do servidor

    preço para diferentes

    quantidades

    View full-size slide

  38. é tudo aquilo que pode
    sofrer alteração durante o
    ciclo de vida da aplicação
    estado

    View full-size slide

  39. • dados recebidos do
    servidor
    • dados de formulário
    • ações do usuário
    • ...

    View full-size slide

  40. guardam estado e
    encaminham dados para 

    seus descendentes
    componentes react

    View full-size slide

  41. são dados recebidos dos
    ancestrais que não podem
    sofrer modificação local
    propriedades

    View full-size slide

  42. Valor: R$50,00
    Quantidade: 1
    onChange property
    quantity state
    price property

    View full-size slide

  43. descendentes

    propriedades
    ancestrais

    estado

    View full-size slide

  44. os componentes mais
    ancestrais são mais
    complexos porque
    devem guardar 

    estado

    View full-size slide

  45. #1.2 react
    ciclo de vida

    View full-size slide

  46. define como a aplicação
    reage a mudanças 

    nos dados
    ciclo de vida

    View full-size slide

  47. código pode ser
    executado antes e depois
    da interface ser montada
    #ComponentWillMount

    #ComponentDidMount

    View full-size slide

  48. ...e quando a interface
    precisar de ajustes
    #ComponentWillUpdate

    #ComponentDidUpdate

    View full-size slide

  49. também é possível
    decidir o que fazer com
    dados recebidos
    #ComponentWillReceiveProps

    View full-size slide

  50. ...e se o html do
    componente realmente
    precisa de ajuste
    #ShouldComponentUpdate

    View full-size slide

  51. por fim, quando o
    componente deixará o
    documento
    #ComponentWillUnmount

    View full-size slide

  52. o ciclo de vida é o
    recurso mais
    poderoso dos
    componentes

    View full-size slide

  53. #1.3 react
    dom virtual

    View full-size slide

  54. aplica apenas as mudanças
    realmente necessárias no
    documento e em lotes
    dom virtual

    View full-size slide

  55. #1.4 react
    transitions

    View full-size slide

  56. permite escrever
    transições de css de
    forma simples
    transitions

    View full-size slide

  57. o react oferece uma
    solução completa
    para definição de
    interfaces

    View full-size slide

  58. #2 react 

    router
    https://github.com/
    reactjs/react-router

    View full-size slide

  59. gerencia as rotas da
    aplicação
    react router

    View full-size slide

  60. router resolve a
    integração da
    aplicação com o
    ambiente do
    navegador

    View full-size slide

  61. /busca
    /v/12
    rotas

    são definidas por
    componentes

    View full-size slide

  62. /v/12
    /v/13
    reuso

    diferentes rotas podem
    apontar para os mesmos
    componentes

    View full-size slide

  63. são desenhadas para
    executarem com facilidade
    na plataforma node.js em
    servidores
    react + router

    View full-size slide

  64. Valor: R$50,00
    Quantidade: 1
    execução no cliente

    comportamento 

    é adicionado à 

    interface
    Valor: R$50,00
    Quantidade: 1

    View full-size slide

  65. entregar html 

    é garantia de
    performance e 

    boa indexação 

    em buscadores

    View full-size slide

  66. #3 webpack
    https://webpack.github.io

    View full-size slide

  67. permite transformar, juntar
    e compactar o código de
    todos os componentes
    webpack

    View full-size slide

  68. #4 babel
    https://babeljs.io

    View full-size slide

  69. transforma código que
    utiliza as novas
    funcionalidades do
    javascript
    babel

    View full-size slide

  70. moderno
    compatível
    mais expressivo

    View full-size slide

  71. #5 eslint
    http://eslint.org

    View full-size slide

  72. padrão de escrita de
    código documentado e
    verificável
    eslint

    View full-size slide

  73. verificar, 

    transformar e
    empacotar são
    palavras chaves em
    código front-end

    View full-size slide

  74. #6 jest +
    enzyme
    http://facebook.github.io/jest

    https://github.com/airbnb/enzyme

    View full-size slide

  75. apoiam a escrita de testes
    isolados para cada
    componente
    jest + enzyme

    View full-size slide

  76. cobrir a lógica dos
    componentes com
    testes é essencial

    View full-size slide

  77. • store unificada
    para os dados
    • stream de
    eventos
    • escopo de css
    • css inline
    • ...

    View full-size slide

  78. testemunho 

    daqueles que
    puseram
    as mãos
    na massa

    View full-size slide

  79. código fica naturalmente
    declarativo, já organizado
    e reaproveitável
    renan

    @aitherios

    View full-size slide

  80. react permite focar nos
    estados da interface ao
    invés das modificações a
    serem aplicadas
    rodrigo

    @rodrigowillrich

    View full-size slide

  81. as alteração na interface
    ficam mais leves e
    performáticas
    celio

    @celio_la

    View full-size slide

  82. react router permite
    definir as rotas de maneira
    simples e declarativa
    rodrigo

    @rodrigowillrich

    View full-size slide

  83. o react pode ser adotado
    gradualmente no projeto
    pablo

    @machadoum

    View full-size slide

  84. ciclo de vida dos
    componentes facilita as
    boas práticas de
    renderização
    celio

    @celio_la

    View full-size slide

  85. a comunidade é
    bastante ativa
    celio

    @celio_la

    View full-size slide

  86. react ajudou a construir o
    globoplay e já apoia o
    desenvolvimento de
    outros produtos
    renan

    @aitherios

    View full-size slide

  87. estas tecnologias
    possibilitam focar no
    conteúdo e navegação
    sem preocupações
    com performance
    jean

    @jcemer

    View full-size slide

  88. obrigado

    foi um prazer
    @jcemer

    View full-size slide