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
140
Cache em aplicações web
jcemer
0
270
Aplicações Web - um estudo sobre React
jcemer
1
170
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
580
Embarque App
jcemer
0
470
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
260
ソフトウェア開発におけるインターフェイスという考え方 / PHPerKaigi 2025
k1low
9
3.9k
Riverpod & Riverpod Generatorを利用して状態管理部分の処理を書き換えてみる簡単な事例紹介
fumiyasac0921
0
110
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
200
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
140
モノリスの認知負荷に立ち向かう、コードの所有者という思想と現実
kzkmaeda
0
110
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.2k
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
2
200
OPENLOGI Company Profile for engineer
hr01
1
22k
LINE API Deep Dive Q1 2025: Unlocking New Possibilities
linedevth
1
160
日本MySQLユーザ会ができるまで / making MyNA
tmtms
1
360
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
How GitHub (no longer) Works
holman
314
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
620
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Why Our Code Smells
bkeepers
PRO
336
57k
Building an army of robots
kneath
304
45k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
Site-Speed That Sticks
csswizardry
4
450
Scaling GitHub
holman
459
140k
The Language of Interfaces
destraynor
157
24k
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