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.

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