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
170
Thinking metrics on React apps
jcemer
0
130
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
94
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
590
Tudo o que a web (podia ser) ainda será
jcemer
8
570
Embarque App
jcemer
0
460
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
短縮URLをお手軽に導入しよう
nakasho
0
110
EDRの検知の仕組みと検知回避について
chayakonanaika
4
1.3k
Active Directory攻防
cryptopeg
PRO
7
4.5k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
120
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
920
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
790
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
1.5k
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.2k
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
2.7k
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
270
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
320
全文検索+セマンティックランカー+LLMの自然文検索サ−ビスで得られた知見
segavvy
2
130
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Optimizing for Happiness
mojombo
376
70k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Music & Morning Musume
bryan
46
6.4k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Writing Fast Ruby
sferik
628
61k
Practical Orchestrator
shlominoach
186
10k
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