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