O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

Aplicações Web - um estudo sobre React

986 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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

×