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
2. jcemer.com twitter.com/jcemer
3. globo.com talentos.globo.com
8. o que são aplicações
10. o gmail é a mais notável das aplicações web
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
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