Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
aplicações

webum estudo

sobre react
jcemer.com
twitter.com/jcemer
globo.com
talentos.globo.com
o que são
aplicações
o gmail é a mais
notável das
aplicações web
o facebook é a
mais usada das
aplicações web
aplicações possuem
diferentes estados
em uma única
página
a navegação pelo
conteúdo torna-se
mais fluída em uma
aplicação
uma camada entre
navegador e
servidor reduz a
carga de dados
aplicações web
criam experiências
compatíveis as das
ferramentas nativas
por menos custo 

e melhor suporte
três
aspectos
importantes
em aplicações
priorizar o conteúdo
#1 de 3
primar uma boa
experiência de
navegação
#2 de 3
atentar para a
performance
#3 de 3
0,1 segundos é
impercebível
1 segundo é aceitável
10 segundos é mais que
o suficiente para perder o
usuário
usuários esperam
que as páginas
carreguem em 

2 segundos
forrester consulting - http://bit.ly/1ttKspI
após 3 segundos
quase a metade
dos usuários irão
abandonar seu site
forrester consulting - http://bit.ly/1ttKspI
considere também a
performance percebida
http://
blog.teamtreehouse.com/
perceived-performance
...
alguns
desafios
técnicos
pra não queimar
as aplicações
o ambiente do
navegador possui
algumas limitações
alterar os elementos do
documento sem critérios
não é performático
fugir da chuva de reflows
não é tarefa fácil
os estados da aplicação
e a barra de endereço
devem ter sincronia
o botão voltar do navegador
precisa ter sentido
a lógica para controle das
interações é complexa e
precisa ser bem pensada
deixar o usuário num estado
inconsistente não é...
a organização do código
precisa ser planejada e
praticada
javascript e css viram

caos fácil fácil
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 aces...
instabilidades na conexão
de rede precisam ser
endereçadas
internet caiu e voltou, e agora?!
os motores de busca
devem reconhecer o
conteúdo do seu site
algumas aplicações também
precisam ser encontradas
já existem diversas
tecnologias para
auxiliar nestas
situações
um punhado de
ingredientes
modernos
#1 react
https://github.com/
facebook/react
é uma biblioteca para
fazer interfaces com o
usuário
react
são usados para formar
sistemas mais
complexos
componentes
Valor: R$50,00
Quantidade: 1
#1.1 react
estados e propriedades
existem dois tipos
de dados dinâmicos:
os do servidor e os
do usuário
dados do usuário

escolha da 

quantidade
dados do servidor

preço para diferentes

quantidades
é tudo aquilo que pode
sofrer alteração durante o
ciclo de vida da aplicação
estado
• dados recebidos do
servidor
• dados de formulário
• ações do usuário
• ...
guardam estado e
encaminham dados para 

seus descendentes
componentes react
são dados recebidos dos
ancestrais que não podem
sofrer modificação local
propriedades
Valor: R$50,00
Quantidade: 1
onChange property
quantity state
price property
descendentes

propriedades
ancestrais

estado
os componentes mais
ancestrais são mais
complexos porque
devem guardar 

estado
#1.2 react
ciclo de vida
define como a aplicação
reage a mudanças 

nos dados
ciclo de vida
código pode ser
executado antes e depois
da interface ser montada
#ComponentWillMount

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

#ComponentDidUpdate
também é possível
decidir o que fazer com
dados recebidos
#ComponentWillReceiveProps
...e se o html do
componente realmente
precisa de ajuste
#ShouldComponentUpdate
por fim, quando o
componente deixará o
documento
#ComponentWillUnmount
o ciclo de vida é o
recurso mais
poderoso dos
componentes
#1.3 react
dom virtual
aplica apenas as mudanças
realmente necessárias no
documento e em lotes
dom virtual
#1.4 react
transitions
permite escrever
transições de css de
forma simples
transitions
o react oferece uma
solução completa
para definição de
interfaces
#2 react 

router
https://github.com/
reactjs/react-router
gerencia as rotas da
aplicação
react router
router resolve a
integração da
aplicação com o
ambiente do
navegador
/busca
/v/12
rotas

são definidas por
componentes
/busca
/v/12
/v/12/v/13
reuso

diferentes rotas podem
apontar para os mesmos
componentes
são desenhadas para
executarem com facilidade
na plataforma node.js em
servidores
react + router
Valor: R$50,00
Quantidade: 1
execução no cliente

comportamento 

é adicionado à 

interface
Valor: R$50,00
Quantidade: 1
entregar html 

é garantia de
performance e 

boa indexação 

em buscadores
#3 webpack
https://webpack.github.io
permite transformar, juntar
e compactar o código de
todos os componentes
webpack
.css {}
svg
#4 babel
https://babeljs.io
transforma código que
utiliza as novas
funcionalidades do
javascript
babel
moderno
compatível
mais expressivo
#5 eslint
http://eslint.org
padrão de escrita de
código documentado e
verificável
eslint
verificar, 

transformar e
empacotar são
palavras chaves em
código front-end
#6 jest +
enzyme
http://facebook.github.io/jest

https://github.com/airbnb/enzyme
apoiam a escrita de testes
isolados para cada
componente
jest + enzyme
cobrir a lógica dos
componentes com
testes é essencial
• store unificada
para os dados
• stream de
eventos
• escopo de css
• css inline
• ...
testemunho 

daqueles que
puseram
as mãos
na massa
código fica naturalmente
declarativo, já organizado
e reaproveitável
renan

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

@rodrigowillrich
as alteração na interface
ficam mais leves e
performáticas
celio

@celio_la
react router permite
definir as rotas de maneira
simples e declarativa
rodrigo

@rodrigowillrich
o react pode ser adotado
gradualmente no projeto
pablo

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

@celio_la
a comunidade é
bastante ativa
celio

@celio_la
react ajudou a construir o
globoplay e já apoia o
desenvolvimento de
outros produtos
renan

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

@jcemer
obrigado

foi um prazer
@jcemer
Aplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre React
Upcoming SlideShare
Loading in …5
×

Aplicações Web - um estudo sobre React

988 views

Published on

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.

Published in: Technology

Aplicações Web - um estudo sobre React

  1. 1. aplicações
 webum estudo
 sobre react
  2. 2. jcemer.com twitter.com/jcemer
  3. 3. globo.com talentos.globo.com
  4. 4. o que são aplicações
  5. 5. o gmail é a mais notável das aplicações web
  6. 6. o facebook é a mais usada das aplicações web
  7. 7. aplicações possuem diferentes estados em uma única página
  8. 8. a navegação pelo conteúdo torna-se mais fluída em uma aplicação
  9. 9. uma camada entre navegador e servidor reduz a carga de dados
  10. 10. aplicações web criam experiências compatíveis as das ferramentas nativas por menos custo 
 e melhor suporte
  11. 11. três aspectos importantes em aplicações
  12. 12. priorizar o conteúdo #1 de 3
  13. 13. primar uma boa experiência de navegação #2 de 3
  14. 14. atentar para a performance #3 de 3
  15. 15. 0,1 segundos é impercebível 1 segundo é aceitável 10 segundos é mais que o suficiente para perder o usuário
  16. 16. usuários esperam que as páginas carreguem em 
 2 segundos forrester consulting - http://bit.ly/1ttKspI
  17. 17. após 3 segundos quase a metade dos usuários irão abandonar seu site forrester consulting - http://bit.ly/1ttKspI
  18. 18. considere também a performance percebida
  19. 19. http:// blog.teamtreehouse.com/ perceived-performance
  20. 20. ...
  21. 21. alguns desafios técnicos pra não queimar as aplicações
  22. 22. o ambiente do navegador possui algumas limitações
  23. 23. alterar os elementos do documento sem critérios não é performático fugir da chuva de reflows não é tarefa fácil
  24. 24. os estados da aplicação e a barra de endereço devem ter sincronia o botão voltar do navegador precisa ter sentido
  25. 25. 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
  26. 26. a organização do código precisa ser planejada e praticada javascript e css viram
 caos fácil fácil
  27. 27. 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?!
  28. 28. instabilidades na conexão de rede precisam ser endereçadas internet caiu e voltou, e agora?!
  29. 29. os motores de busca devem reconhecer o conteúdo do seu site algumas aplicações também precisam ser encontradas
  30. 30. já existem diversas tecnologias para auxiliar nestas situações
  31. 31. um punhado de ingredientes modernos
  32. 32. #1 react https://github.com/ facebook/react
  33. 33. é uma biblioteca para fazer interfaces com o usuário react
  34. 34. são usados para formar sistemas mais complexos componentes
  35. 35. Valor: R$50,00 Quantidade: 1
  36. 36. #1.1 react estados e propriedades
  37. 37. existem dois tipos de dados dinâmicos: os do servidor e os do usuário
  38. 38. dados do usuário
 escolha da 
 quantidade dados do servidor
 preço para diferentes
 quantidades
  39. 39. é tudo aquilo que pode sofrer alteração durante o ciclo de vida da aplicação estado
  40. 40. • dados recebidos do servidor • dados de formulário • ações do usuário • ...
  41. 41. guardam estado e encaminham dados para 
 seus descendentes componentes react
  42. 42. são dados recebidos dos ancestrais que não podem sofrer modificação local propriedades
  43. 43. Valor: R$50,00 Quantidade: 1 onChange property quantity state price property
  44. 44. descendentes
 propriedades ancestrais
 estado
  45. 45. os componentes mais ancestrais são mais complexos porque devem guardar 
 estado
  46. 46. #1.2 react ciclo de vida
  47. 47. define como a aplicação reage a mudanças 
 nos dados ciclo de vida
  48. 48. código pode ser executado antes e depois da interface ser montada #ComponentWillMount
 #ComponentDidMount
  49. 49. ...e quando a interface precisar de ajustes #ComponentWillUpdate
 #ComponentDidUpdate
  50. 50. também é possível decidir o que fazer com dados recebidos #ComponentWillReceiveProps
  51. 51. ...e se o html do componente realmente precisa de ajuste #ShouldComponentUpdate
  52. 52. por fim, quando o componente deixará o documento #ComponentWillUnmount
  53. 53. o ciclo de vida é o recurso mais poderoso dos componentes
  54. 54. #1.3 react dom virtual
  55. 55. aplica apenas as mudanças realmente necessárias no documento e em lotes dom virtual
  56. 56. #1.4 react transitions
  57. 57. permite escrever transições de css de forma simples transitions
  58. 58. o react oferece uma solução completa para definição de interfaces
  59. 59. #2 react 
 router https://github.com/ reactjs/react-router
  60. 60. gerencia as rotas da aplicação react router
  61. 61. router resolve a integração da aplicação com o ambiente do navegador
  62. 62. /busca /v/12 rotas
 são definidas por componentes
  63. 63. /busca /v/12
  64. 64. /v/12/v/13 reuso
 diferentes rotas podem apontar para os mesmos componentes
  65. 65. são desenhadas para executarem com facilidade na plataforma node.js em servidores react + router
  66. 66. Valor: R$50,00 Quantidade: 1 execução no cliente
 comportamento 
 é adicionado à 
 interface Valor: R$50,00 Quantidade: 1
  67. 67. entregar html 
 é garantia de performance e 
 boa indexação 
 em buscadores
  68. 68. #3 webpack https://webpack.github.io
  69. 69. permite transformar, juntar e compactar o código de todos os componentes webpack
  70. 70. .css {} svg
  71. 71. #4 babel https://babeljs.io
  72. 72. transforma código que utiliza as novas funcionalidades do javascript babel
  73. 73. moderno compatível mais expressivo
  74. 74. #5 eslint http://eslint.org
  75. 75. padrão de escrita de código documentado e verificável eslint
  76. 76. verificar, 
 transformar e empacotar são palavras chaves em código front-end
  77. 77. #6 jest + enzyme http://facebook.github.io/jest
 https://github.com/airbnb/enzyme
  78. 78. apoiam a escrita de testes isolados para cada componente jest + enzyme
  79. 79. cobrir a lógica dos componentes com testes é essencial
  80. 80. • store unificada para os dados • stream de eventos • escopo de css • css inline • ...
  81. 81. testemunho 
 daqueles que puseram as mãos na massa
  82. 82. código fica naturalmente declarativo, já organizado e reaproveitável renan
 @aitherios
  83. 83. react permite focar nos estados da interface ao invés das modificações a serem aplicadas rodrigo
 @rodrigowillrich
  84. 84. as alteração na interface ficam mais leves e performáticas celio
 @celio_la
  85. 85. react router permite definir as rotas de maneira simples e declarativa rodrigo
 @rodrigowillrich
  86. 86. o react pode ser adotado gradualmente no projeto pablo
 @machadoum
  87. 87. ciclo de vida dos componentes facilita as boas práticas de renderização celio
 @celio_la
  88. 88. a comunidade é bastante ativa celio
 @celio_la
  89. 89. react ajudou a construir o globoplay e já apoia o desenvolvimento de outros produtos renan
 @aitherios
  90. 90. estas tecnologias possibilitam focar no conteúdo e navegação sem preocupações com performance jean
 @jcemer
  91. 91. obrigado
 foi um prazer @jcemer

×