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.

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

May 15, 2016
Tweet

Transcript

  1. aplicações 
 web um estudo
 sobre react

  2. jcemer.com twitter.com/jcemer

  3. globo.com talentos.globo.com

  4. None
  5. None
  6. None
  7. None
  8. o que são aplicações

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

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

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

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

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

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

    menos custo 
 e melhor suporte
  17. três aspectos importantes em aplicações

  18. priorizar o conteúdo #1 de 3

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

  20. atentar para a performance #3 de 3

  21. 0,1 segundos é impercebível 1 segundo é aceitável 10 segundos

    é mais que o suficiente para perder o usuário
  22. usuários esperam que as páginas carreguem em 
 2 segundos

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

    seu site forrester consulting - http://bit.ly/1ttKspI
  24. considere também a performance percebida

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

  27. ...

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

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

  30. alterar os elementos do documento sem critérios não é performático

    fugir da chuva de reflows não é tarefa fácil
  31. os estados da aplicação e a barra de endereço devem

    ter sincronia o botão voltar do navegador precisa ter sentido
  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
  33. a organização do código precisa ser planejada e praticada javascript

    e css viram
 caos fácil fácil
  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?!
  35. instabilidades na conexão de rede precisam ser endereçadas internet caiu

    e voltou, e agora?!
  36. os motores de busca devem reconhecer o conteúdo do seu

    site algumas aplicações também precisam ser encontradas
  37. já existem diversas tecnologias para auxiliar nestas situações

  38. um punhado de ingredientes modernos

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

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

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

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

  43. #1.1 react estados e propriedades

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

    os do usuário
  45. dados do usuário
 escolha da 
 quantidade dados do servidor


    preço para diferentes
 quantidades
  46. é tudo aquilo que pode sofrer alteração durante o ciclo

    de vida da aplicação estado
  47. • dados recebidos do servidor • dados de formulário •

    ações do usuário • ...
  48. guardam estado e encaminham dados para 
 seus descendentes componentes

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

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

  51. descendentes
 propriedades ancestrais
 estado

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

    
 estado
  53. #1.2 react ciclo de vida

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

    ciclo de vida
  55. código pode ser executado antes e depois da interface ser

    montada #ComponentWillMount
 #ComponentDidMount
  56. ...e quando a interface precisar de ajustes #ComponentWillUpdate
 #ComponentDidUpdate

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

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

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

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

    componentes
  61. #1.3 react dom virtual

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

    lotes dom virtual
  63. #1.4 react transitions

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

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

  66. #2 react 
 router https://github.com/ reactjs/react-router

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

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

    navegador
  69. /busca /v/12 rotas
 são definidas por componentes

  70. /busca /v/12

  71. /v/12 /v/13 reuso
 diferentes rotas podem apontar para os mesmos

    componentes
  72. são desenhadas para executarem com facilidade na plataforma node.js em

    servidores react + router
  73. Valor: R$50,00 Quantidade: 1 execução no cliente
 comportamento 
 é

    adicionado à 
 interface Valor: R$50,00 Quantidade: 1
  74. entregar html 
 é garantia de performance e 
 boa

    indexação 
 em buscadores
  75. #3 webpack https://webpack.github.io

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

    componentes webpack
  77. .css {} svg

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

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

  80. moderno compatível mais expressivo

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

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

  83. verificar, 
 transformar e empacotar são palavras chaves em código

    front-end
  84. #6 jest + enzyme http://facebook.github.io/jest
 https://github.com/airbnb/enzyme

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

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

  87. • store unificada para os dados • stream de eventos

    • escopo de css • css inline • ...
  88. testemunho 
 daqueles que puseram as mãos na massa

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

  90. react permite focar nos estados da interface ao invés das

    modificações a serem aplicadas rodrigo
 @rodrigowillrich
  91. as alteração na interface ficam mais leves e performáticas celio


    @celio_la
  92. react router permite definir as rotas de maneira simples e

    declarativa rodrigo
 @rodrigowillrich
  93. o react pode ser adotado gradualmente no projeto pablo
 @machadoum

  94. ciclo de vida dos componentes facilita as boas práticas de

    renderização celio
 @celio_la
  95. a comunidade é bastante ativa celio
 @celio_la

  96. react ajudou a construir o globoplay e já apoia o

    desenvolvimento de outros produtos renan
 @aitherios
  97. estas tecnologias possibilitam focar no conteúdo e navegação sem preocupações

    com performance jean
 @jcemer
  98. obrigado
 foi um prazer @jcemer