1. aplicações
webum 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