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
230
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
160
Thinking metrics on React apps
jcemer
0
130
Cache em aplicações web
jcemer
0
260
Aplicações Web - um estudo sobre React
jcemer
1
160
Desenvolvedor mobile precisa aprender Web
jcemer
1
89
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
580
Tudo o que a web (podia ser) ainda será
jcemer
8
550
Embarque App
jcemer
0
460
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
The People First Approach to Engineering Success - DevNot 2024
zikriyeurkmez
0
220
AWS DDKを利用したDataOps事始め
beex
1
170
マルチテナントのサービスインフラに大きなテナントを受け入れるまで
7474
0
720
APIs for AI: Have we failed?
zdne
0
110
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
14k
Azure AI servicesと歯のおはなし/AzureTravelers_Fukuoka2024_baba
nina01
1
110
VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~ / 20241019_cloudsign_VueFesJapan2024_1
bengo4com
8
3.9k
The road to green code (with Sonar)
bluehats
0
150
AWS Lambda と Amazon SQS で「わかった気になれる」FreeRTOS 入門
soracom
PRO
2
140
プログラミング写経のすすめ
natsutan
0
160
Application Signalsで始めるSLO ユーザー満足度を数値化する第一歩
niftycorp
PRO
2
140
Amazon CloudWatchで小さく始めるWebサービスのオブザーバビリティ / How to start Observability for Web Sevices with Amazon CloudWatch
sms_tech
3
190
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.6k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
RailsConf 2023
tenderlove
28
860
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Optimizing for Happiness
mojombo
375
69k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
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