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.

Transcript

1. aplicações
   

   web
   um estudo

   sobre
   react
   

   View Slide

2. jcemer.com
   twitter.com/jcemer
   

   View Slide

3. globo.com
   talentos.globo.com
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. o que são
   aplicações
   

   View Slide

9. View Slide

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

    View Slide

11. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    e melhor suporte
    

    View Slide

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

    View Slide

18. priorizar o conteúdo
    #1 de 3
    

    View Slide

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

    View Slide

20. atentar para a
    performance
    #3 de 3
    

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

24. considere também a
    performance percebida
    

    View Slide

25. View Slide

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

    View Slide

27. ...
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. 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 Slide

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

    caos fácil fácil
    

    View Slide

34. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. um punhado de
    ingredientes
    modernos
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. #1.1 react
    estados e propriedades
    

    View Slide

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

    View Slide

45. dados do usuário

    escolha da 

    quantidade
    dados do servidor

    preço para diferentes

    quantidades
    

    View Slide

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

    View Slide

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

    View Slide

48. guardam estado e
    encaminham dados para 

    seus descendentes
    componentes react
    

    View Slide

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

    View Slide

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

    View Slide

51. descendentes

    propriedades
    ancestrais

    estado
    

    View Slide

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

    estado
    

    View Slide

53. #1.2 react
    ciclo de vida
    

    View Slide

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

    nos dados
    ciclo de vida
    

    View Slide

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

    #ComponentDidMount
    

    View Slide

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

    #ComponentDidUpdate
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. #1.3 react
    dom virtual
    

    View Slide

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

    View Slide

63. #1.4 react
    transitions
    

    View Slide

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

    View Slide

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

    View Slide

66. #2 react 

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

    View Slide

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

    View Slide

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

    View Slide

69. /busca
    /v/12
    rotas

    são definidas por
    componentes
    

    View Slide

70. /busca
    /v/12
    

    View Slide

71. /v/12
    /v/13
    reuso

    diferentes rotas podem
    apontar para os mesmos
    componentes
    

    View Slide

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

    View Slide

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

    comportamento 

    é adicionado à 

    interface
    Valor: R$50,00
    Quantidade: 1
    

    View Slide

74. entregar html 

    é garantia de
    performance e 

    boa indexação 

    em buscadores
    

    View Slide

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

    View Slide

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

    View Slide

77. .css {}
    svg
    

    View Slide

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

    View Slide

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

    View Slide

80. moderno
    compatível
    mais expressivo
    

    View Slide

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

    View Slide

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

    View Slide

83. verificar, 

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

    View Slide

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

    https://github.com/airbnb/enzyme
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

88. testemunho 

    daqueles que
    puseram
    as mãos
    na massa
    

    View Slide

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

    @aitherios
    

    View Slide

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

    @rodrigowillrich
    

    View Slide

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

    @celio_la
    

    View Slide

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

    @rodrigowillrich
    

    View Slide

93. o react pode ser adotado
    gradualmente no projeto
    pablo

    @machadoum
    

    View Slide

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

    @celio_la
    

    View Slide

95. a comunidade é
    bastante ativa
    celio

    @celio_la
    

    View Slide

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

    @aitherios
    

    View Slide

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

    @jcemer
    

    View Slide

98. obrigado

    foi um prazer
    @jcemer
    

    View Slide