Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lapidando o Globo Play
Search
Jean Carlo Emer
December 05, 2015
Technology
1
240
Lapidando o Globo Play
Estudo de caso de um produto inovador em termos de tecnologia e conceito.
Jean Carlo Emer
December 05, 2015
Tweet
Share
More Decks by Jean Carlo Emer
See All by Jean Carlo Emer
Web & Mobile
jcemer
1
170
Thinking metrics on React apps
jcemer
0
150
Cache em aplicações web
jcemer
0
270
Aplicações Web - um estudo sobre React
jcemer
1
180
Desenvolvedor mobile precisa aprender Web
jcemer
1
100
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
600
Tudo o que a web (podia ser) ainda será
jcemer
8
590
Embarque App
jcemer
0
470
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
非root化Androidスマホでも動く仮想マシンアプリを試してみた
arkw
0
120
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
160
Новые мапы в Go. Вова Марунин, Clatch, МТС
lamodatech
0
2k
Part1 GitHubってなんだろう?その2
tomokusaba
2
710
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
110
Асинхронная коммуникация в Go: от понятного к душному. Дима Некрасов, Otello, 2ГИС
lamodatech
0
2k
社内 Web システムのフロントエンド技術刷新: React Router v7 vs. TanStack Router
musasabibyun
0
140
さくらのクラウド開発の裏側
metakoma
PRO
0
310
データベース04: SQL (1/3) 単純質問 & 集約演算
trycycle
PRO
0
730
20 Years of Domain-Driven Design: What I’ve Learned About DDD
ewolff
1
300
Next.jsと状態管理のプラクティス
uhyo
2
700
Dataverseの検索列について
miyakemito
1
190
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
It's Worth the Effort
3n
184
28k
Building Applications with DynamoDB
mza
94
6.4k
A Tale of Four Properties
chriscoyier
159
23k
How GitHub (no longer) Works
holman
314
140k
Site-Speed That Sticks
csswizardry
6
540
Documentation Writing (for coders)
carmenintech
71
4.8k
Docker and Python
trallard
44
3.4k
What's in a price? How to price your products and services
michaelherold
245
12k
The Language of Interfaces
destraynor
158
25k
Transcript
lapidando o
jcemer.com twitter.com/jcemer
porto alegre
Globo Play é o produto de vídeos da TV Globo
None
None
None
None
O projeto Globo Play
Mobile first Projeto
Desktop 2007 2008 2009 2010 2011 2012 2013 2014 2015
Mobile Mobile revolution *Usuários em milhares fonte: Comscore 2k*
Desktop 12AM 7AM 10AM 5PM 8PM 12AM Uso dos dispositivos
ao longo do dia fonte: Comscore Mobile
Uso de mobile web em relação a mobile nativo 2013
1.8x 16k* x 9k *Unique visitors em milhares 1.7x 28k x 16k 2014 2.1x 43k x 20k 2015
“It should be accessible from any kind of hardware that
can connect to the internet: stationary or mobile, small screen or large Sir Tim Berners Lee
Graceful degradation
Graceful degradation Progressive enhancement
Experiencia fluida Projeto
“Queremos sair do paradigma de páginas e alcançar uma experiência
apoiada em camadas Product Owner
Definir o fluxo de navegação no produto utilizando JavaScript
Ter liberdade para gerar diferentes empacotamentos e praticar testes A/B
Server render Projeto
Fugir das várias requisições para compor a primeira página
Utilizar o mesmo código para o back-end e front-end da
aplicação
Não prejudicar o SEO do produto
Cliente Servidor APP API de dados
Tecnologias utilizadas
A correta escolha de tecnologias faz parte de bons resultados
Req HTML Click JSON Gene Add JSON Click Animate class
ue rate Request st 1. 2. 3. 4. 5. 6. 7. 8. 9.
Req HTML Click JSON Gene Add JSON Click class ue
rate Req uest st
As tecnologias foram definidas após uma série de experimentos
React CSS SVG HTML MapperSmith jQuery JavaScript Web APIs React
Router
React Tecnologias
O DOM não é performático quando aplicamos modificações a revelia
“A solução é escrever código como se recriasse o DOM
toda vez que o estado muda Time do Virtual DOM
var newTree = render(data) var patches = diff(tree, newTree) rootNode
= patch(rootNode, patches) tree = newTree
Componentes de software encapsulam uma série de funcionalidades relacionadas
Componentes podem ser compostos para formar um sistema mais complexo
React permite encapsular, compor e reusar código na plataforma Web
Componentes do React mantêm estado e recebem propriedades dos seus
ancestrais
Set state Dirty Re render
MapperSmith Tecnologias
Internet Rede interna Cliente Servidor APP API de dados
Lightweight, isomorphic, dependency-free, REST client mapper for JavaScript https://github.com/tulios/mappersmith
var manifest = { host: 'http://my.api.com', resources: { Book: {
all: {path: '/books.json'}, byId: {path: '/books/{id}.json'} }, Photo: { byCategory: {path: '/photos/{category}.json'} } } }
Internet Rede interna API de dados $.ajax require('http')
Mappersmith cached gateway permite utilizar LocalStorage e Redis para economizar
requisições https://github.com/tulios/mappersmith-cached-gateway
Servicos consumidos
O Globo Play é a consolidação do trabalho de várias
equipes da globo.com
Acervo de vídeos e programas API de vídeos Localização do
usuário e informações sobre o sinal de ao vivo API de live
Identificação do usuário Serviço de login Comentários Recomendação de conteúdo
Destaques editoriais Área administrativa Elastic Search Acervo de vídeos e
programas para busca
Player com suporte a publicidade e integração com diversas APIs
Player de vídeo
Desafios enfrentados
1Organizar código em componentes
“A container does data fetching and then renders its corresponding
sub- component. That’s it. Jason Bonta https://medium.com/@dan_abramov/smart-and-dumb- components-7ca2f9a7c7d0
Componentes puros dependem apenas de propriedades e estado para renderizar
O escopo de responsabilidade dos componentes é constantemente revisto
2Compreender o ciclo de vida dos componentes
http://busypeoples.github.io/post/react-component-lifecycle Inicialização
Alteração do estado
Alteração de propriedades
Os componentes são evoluídos ao longo do desenvolvimento
3Entregar a melhor experiência para todos os dispositivos
Maior que 1200px Até 1024px Até 768px
Media Queries são utilizadas no CSS e JavaScript para garantir
a melhor experiência
4Utilizar apenas plugins de interface compatíveis com React
React headroom React slick React smartbanner React swipeable
O ecossistema do React é emergente e é preciso ficar
antenado para adotar novas bibliotecas
5Testar o código dos componentes
Experimentamos Jasmine, Karma, Jest, Sinon, Rewire...
Jest é utilizado para os testes, mas é lento e
tem uma filosofia controversa
Mocha + expect + shallow render juntos parecem uma ótima
alternativa https://blog.algolia.com/how-we-unit-test-react- components-using-expect-jsx
6Gerenciar estados globais da aplicação
Serviços com auxílio de mixins compartilham estado entre componentes
7Integrar com serviços externos
Cada serviço externo precisa ser analisado e integrado a aplicação
8Lidar com a imaturidade das bibliotecas
Algumas adequações precisam ser feitas no código do produto
9Evoluir as tecnologias utilizadas
Novas versões do React e outras dependências surgiram ao longo
do tempo de desenvolvimento
Migramos para a última versão do React recentemente
É necessário viabilizar a evolução do React Router e outras
dependências
Mixins estão com os dias contados, é preciso dar atenção
a arquitetura Flux e ao Redux
...
Ruby on Rails Bluegreen deploy New Relic Storage de assets
Webpack
Novos desafios surgem a todo momento e este é o
maior barato da nossa profissão
Resultado do projeto
None
None
None
None
“Se o nível de mudança interno está aquém do externo,
o colapso é iminente Jack Welch
Obrigado apostem na web @jcemer