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
250
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
180
Thinking metrics on React apps
jcemer
0
150
Cache em aplicações web
jcemer
0
280
Aplicações Web - um estudo sobre React
jcemer
1
180
Desenvolvedor mobile precisa aprender Web
jcemer
1
110
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
600
Tudo o que a web (podia ser) ainda será
jcemer
8
610
Embarque App
jcemer
0
470
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
270
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
Modern Linux
oracle4engineer
PRO
0
160
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
440
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
110
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
670
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Making Projects Easy
brettharned
117
6.4k
Facilitating Awesome Meetings
lara
55
6.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Designing for Performance
lara
610
69k
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