Lapidando o Globo Play

Jean Carlo Emer
Jean Carlo EmerSenior Developer at Work & Co
lapidando o
jcemer.com
twitter.com/jcemer
porto alegre
Globo Play é o produto
de vídeos da TV Globo
Lapidando o Globo Play
Lapidando o Globo Play
Lapidando o Globo Play
Lapidando o Globo Play
O projetoGlobo 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
Tecnologiasutilizadas
A correta escolha de
tecnologias faz parte de bons
resultados
Req
HTML
Click
JSON
Gene
Add
JSON
Click
Animate
class
ue
rate
Request
st1.
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
Servicosconsumidos
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
Desafiosenfrentados
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
Resultadodo projeto
Lapidando o Globo Play
Lapidando o Globo Play
Lapidando o Globo Play
Lapidando o Globo Play
“Se o nível de mudança
interno está aquém do
externo, o colapso é
iminente
Jack Welch
Obrigadoapostem na web
@jcemer
1 of 93

Recommended

Como encarar o desenvolvimento front-end by
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endJean Carlo Emer
2.7K views71 slides
Desenvolvedor mobile precisa aprender Web by
Desenvolvedor mobile precisa aprender Web Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web Jean Carlo Emer
1.5K views72 slides
Aplicações Web - um estudo sobre React by
Aplicações Web - um estudo sobre ReactAplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre ReactJean Carlo Emer
1.2K views98 slides
Cache em aplicações web by
Cache em aplicações webCache em aplicações web
Cache em aplicações webJean Carlo Emer
1.1K views111 slides
Mobile First - Palestra no MobileConf 2013 by
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Horácio Soares
5K views247 slides
Blazor #SnetTalks3 by
Blazor  #SnetTalks3Blazor  #SnetTalks3
Blazor #SnetTalks3André Agostinho
47 views13 slides

More Related Content

What's hot

Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET by
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NETProgressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NETAndre Baltieri
599 views20 slides
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais by
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisJavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisWilliam Oliveira
1.1K views60 slides
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap by
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapThiago Colares
1.6K views42 slides
Curso: Desenvolvimento de aplicativos híbridos (dia 2) by
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Wennder Santos
439 views82 slides
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário by
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário Osmar Petry
540 views57 slides
O Papel do desenvolvedor Front End by
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndRael Max
20K views16 slides

What's hot(20)

Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET by Andre Baltieri
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NETProgressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Progressive Web Apps e o futuro do desenvolvimento Web na Plataforma .NET
Andre Baltieri599 views
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais by William Oliveira
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisJavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
William Oliveira1.1K views
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap by Thiago Colares
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Thiago Colares1.6K views
Curso: Desenvolvimento de aplicativos híbridos (dia 2) by Wennder Santos
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Wennder Santos439 views
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário by Osmar Petry
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário
Osmar Petry540 views
O Papel do desenvolvedor Front End by Rael Max
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
Rael Max20K views
O que você precisa saber para se tornar um dev front-end by Diego Eis
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
Diego Eis10.6K views
Web Tools Pt B R by guestb9d145
Web Tools Pt  B RWeb Tools Pt  B R
Web Tools Pt B R
guestb9d145354 views
Guga Alves apresenta Gutenberg fase 2 e 3 by WordCamp Floripa
Guga Alves apresenta Gutenberg fase 2 e 3Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3
WordCamp Floripa56 views
Netbeans Slides Fy2009 Portugues by Rodrigo Peleias
Netbeans Slides Fy2009 PortuguesNetbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 Portugues
Rodrigo Peleias1.3K views
Primeiros passos para estruturar uma equipe front-end by Diego Eis
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
Diego Eis2.9K views
Desenvolvendo APPs Com Angular.JS + Cordova by Gustavo Costa
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
Gustavo Costa9K views
Win302 daniel semedo_10 motivos para utilizar apache cordova (1) by Daniel Semedo
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Daniel Semedo708 views
Você não precisa de uma sopa de letrinhas para criar web apps by William Oliveira
Você não precisa de uma sopa de letrinhas para criar web appsVocê não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web apps
William Oliveira637 views

Similar to Lapidando o Globo Play

MVPConf - Azure Functions by
MVPConf - Azure FunctionsMVPConf - Azure Functions
MVPConf - Azure FunctionsCDS
99 views29 slides
Entregando inovação de forma contínua com maior agilidade by
Entregando inovação de forma contínua com maior agilidadeEntregando inovação de forma contínua com maior agilidade
Entregando inovação de forma contínua com maior agilidadeAllyson Chiarini
1.2K views18 slides
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais by
Apresentação de minha Monografia do curso de Sistema e Mídias DigitaisApresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias DigitaisÉdipo Souza
1.8K views34 slides
Uma breve introdução de play framework by
Uma breve introdução de play frameworkUma breve introdução de play framework
Uma breve introdução de play frameworkWende Mendes
557 views50 slides
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t... by
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Marcelo Marques Gonçalves
58 views63 slides
Introdução ao silverlight by
Introdução ao silverlightIntrodução ao silverlight
Introdução ao silverlightFelipe Pocchini
482 views40 slides

Similar to Lapidando o Globo Play(20)

MVPConf - Azure Functions by CDS
MVPConf - Azure FunctionsMVPConf - Azure Functions
MVPConf - Azure Functions
CDS99 views
Entregando inovação de forma contínua com maior agilidade by Allyson Chiarini
Entregando inovação de forma contínua com maior agilidadeEntregando inovação de forma contínua com maior agilidade
Entregando inovação de forma contínua com maior agilidade
Allyson Chiarini1.2K views
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais by Édipo Souza
Apresentação de minha Monografia do curso de Sistema e Mídias DigitaisApresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais
Édipo Souza1.8K views
Uma breve introdução de play framework by Wende Mendes
Uma breve introdução de play frameworkUma breve introdução de play framework
Uma breve introdução de play framework
Wende Mendes557 views
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t... by Marcelo Marques Gonçalves
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
IBM Mobile Platform: Desenvolvimento de Aplicações Mobile by Alex Barbosa Coqueiro
IBM Mobile Platform: Desenvolvimento de Aplicações MobileIBM Mobile Platform: Desenvolvimento de Aplicações Mobile
IBM Mobile Platform: Desenvolvimento de Aplicações Mobile
Construindo aplicações ricas com Silverlight by Felipe Pocchini
Construindo aplicações ricas com SilverlightConstruindo aplicações ricas com Silverlight
Construindo aplicações ricas com Silverlight
Felipe Pocchini1.9K views
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -... by E-Commerce Brasil
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
E-Commerce Brasil724 views
Automatizando uma app Híbrida by Elias Nogueira
Automatizando uma app HíbridaAutomatizando uma app Híbrida
Automatizando uma app Híbrida
Elias Nogueira1.5K views
Keynote Visual Studio Summit 2016 by Ramon Durães
Keynote Visual Studio Summit 2016Keynote Visual Studio Summit 2016
Keynote Visual Studio Summit 2016
Ramon Durães624 views
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry by felipebzr
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
felipebzr1.6K views
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa... by Rio Info
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info283 views

Recently uploaded

ProxySQL no MySQL: Apenas um load balancer? by
ProxySQL no MySQL: Apenas um load balancer?ProxySQL no MySQL: Apenas um load balancer?
ProxySQL no MySQL: Apenas um load balancer?Roberto Garcia de Bem
6 views62 slides
Skills e Squads, como trabalhar? by
Skills e Squads, como trabalhar?Skills e Squads, como trabalhar?
Skills e Squads, como trabalhar?Annelise Gripp
32 views13 slides
Shift left DevOps Experience by
Shift left DevOps ExperienceShift left DevOps Experience
Shift left DevOps ExperienceWalter Coan
5 views19 slides
TechConnection 2023 Floripa Azure Container Apps by
TechConnection 2023 Floripa Azure Container AppsTechConnection 2023 Floripa Azure Container Apps
TechConnection 2023 Floripa Azure Container AppsWalter Coan
6 views14 slides
DevFest2023-Pragmatismo da Internet das Coisas by
DevFest2023-Pragmatismo da Internet das CoisasDevFest2023-Pragmatismo da Internet das Coisas
DevFest2023-Pragmatismo da Internet das CoisasWalter Coan
25 views40 slides
certificado excel.pdf by
certificado excel.pdfcertificado excel.pdf
certificado excel.pdfjuniorcarvalho136
5 views1 slide

Recently uploaded(9)

Skills e Squads, como trabalhar? by Annelise Gripp
Skills e Squads, como trabalhar?Skills e Squads, como trabalhar?
Skills e Squads, como trabalhar?
Annelise Gripp32 views
Shift left DevOps Experience by Walter Coan
Shift left DevOps ExperienceShift left DevOps Experience
Shift left DevOps Experience
Walter Coan5 views
TechConnection 2023 Floripa Azure Container Apps by Walter Coan
TechConnection 2023 Floripa Azure Container AppsTechConnection 2023 Floripa Azure Container Apps
TechConnection 2023 Floripa Azure Container Apps
Walter Coan6 views
DevFest2023-Pragmatismo da Internet das Coisas by Walter Coan
DevFest2023-Pragmatismo da Internet das CoisasDevFest2023-Pragmatismo da Internet das Coisas
DevFest2023-Pragmatismo da Internet das Coisas
Walter Coan25 views
Conheça agora o UiPath Autopilot™ para o Studio.pdf by BrunaCavalcanti29
Conheça agora o UiPath Autopilot™ para o Studio.pdfConheça agora o UiPath Autopilot™ para o Studio.pdf
Conheça agora o UiPath Autopilot™ para o Studio.pdf

Lapidando o Globo Play