Estudo de caso de um produto inovador em termos de tecnologia e conceito.
lapidando o
View Slide
jcemer.comtwitter.com/jcemer
porto alegre
Globo Play é o produtode vídeos da TV Globo
O projetoGlobo Play
Mobile firstProjeto
Desktop2007 2008 2009 2010 2011 2012 2013 2014 2015MobileMobile revolution*Usuários em milhares fonte: Comscore2k*
Desktop12AM 7AM 10AM 5PM 8PM 12AMUso dos dispositivos ao longo do diafonte: ComscoreMobile
Uso de mobile web emrelação a mobile nativo20131.8x16k* x 9k*Unique visitors em milhares1.7x28k x 16k20142.1x43k x 20k2015
“It should be accessible fromany kind of hardware that canconnect to the internet:stationary or mobile, smallscreen or largeSir Tim Berners Lee
Graceful degradation
Graceful degradationProgressive enhancement
Experiencia fluidaProjeto
“Queremos sair do paradigmade páginas e alcançar umaexperiência apoiada emcamadasProduct Owner
Definir o fluxo de navegaçãono produto utilizandoJavaScript
Ter liberdade para gerardiferentes empacotamentose praticar testes A/B
Server renderProjeto
Fugir das várias requisiçõespara compor a primeirapágina
Utilizar o mesmo códigopara o back-end e front-endda aplicação
Não prejudicar o SEO doproduto
ClienteServidorAPPAPI de dados
Tecnologiasutilizadas
A correta escolha detecnologias faz parte de bonsresultados
ReqHTMLClickJSONGeneAddJSONClickAnimateclassuerateRequestst1.2.3.4.5.6.7.8.9.
Req HTMLClickJSONGeneAddJSONClickclassuerateRequestst
As tecnologias foramdefinidas após uma série deexperimentos
ReactCSSSVGHTMLMapperSmithjQueryJavaScriptWeb APIsReact Router
ReactTecnologias
O DOM não é performáticoquando aplicamosmodificações a revelia
“A solução é escrever códigocomo se recriasse o DOM todavez que o estado mudaTime do Virtual DOM
var newTree = render(data)var patches = diff(tree, newTree)rootNode = patch(rootNode, patches)tree = newTree
Componentes desoftware encapsulam umasérie de funcionalidadesrelacionadas
Componentes podem sercompostos para formar umsistema mais complexo
React permite encapsular,compor e reusar código naplataforma Web
Componentes do Reactmantêm estado e recebempropriedades dos seusancestrais
Set state Dirty Re render
MapperSmithTecnologias
InternetRede internaClienteServidorAPPAPI de dados
Lightweight, isomorphic,dependency-free, REST clientmapper for JavaScripthttps://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'}}}}
InternetRede internaAPI de dados$.ajaxrequire('http')
Mappersmith cachedgateway permite utilizarLocalStorage e Redis paraeconomizar requisiçõeshttps://github.com/tulios/mappersmith-cached-gateway
Servicosconsumidos
O Globo Play é aconsolidação do trabalho devárias equipes da globo.com
Acervo de vídeos e programasAPI de vídeosLocalização do usuário einformações sobre o sinal de ao vivoAPI de live
Identificação do usuárioServiço de loginComentáriosRecomendação de conteúdo
Destaques editoriaisÁrea administrativaElastic SearchAcervo de vídeos e programaspara busca
Player com suporte a publicidade eintegração com diversas APIsPlayer de vídeo
Desafiosenfrentados
1Organizar código emcomponentes
“A container does datafetching and then renders itscorresponding sub-component. That’s it.Jason Bontahttps://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
Componentes purosdependem apenas depropriedades e estado pararenderizar
O escopo de responsabilidadedos componentes éconstantemente revisto
2Compreender o ciclo devida dos componentes
http://busypeoples.github.io/post/react-component-lifecycleInicialização
Alteração do estado
Alteração de propriedades
Os componentes sãoevoluídos ao longo dodesenvolvimento
3Entregar a melhorexperiência para todosos dispositivos
Maior que 1200pxAté 1024px Até 768px
Media Queries são utilizadasno CSS e JavaScript paragarantir a melhor experiência
4Utilizar apenas pluginsde interface compatíveiscom React
React headroomReact slickReact smartbannerReact swipeable
O ecossistema do React éemergente e é preciso ficarantenado para adotar novasbibliotecas
5Testar o código doscomponentes
Experimentamos Jasmine,Karma, Jest, Sinon, Rewire...
Jest é utilizado para ostestes, mas é lento e tem umafilosofia controversa
Mocha + expect +shallow render juntosparecem uma ótimaalternativahttps://blog.algolia.com/how-we-unit-test-react-components-using-expect-jsx
6Gerenciar estadosglobais da aplicação
Serviços com auxílio demixins compartilham estadoentre componentes
7Integrar com serviçosexternos
Cada serviço externo precisaser analisado e integrado aaplicação
8Lidar com a imaturidadedas bibliotecas
Algumas adequaçõesprecisam ser feitas no códigodo produto
9Evoluir as tecnologiasutilizadas
Novas versões do React eoutras dependênciassurgiram ao longo do tempode desenvolvimento
Migramos para a últimaversão do Reactrecentemente
É necessário viabilizar aevolução do React Router eoutras dependências
Mixins estão com os diascontados, é preciso daratenção a arquitetura Flux eao Redux
...
Ruby on RailsBluegreen deployNew RelicStorage de assetsWebpack
Novos desafios surgem atodo momento e este é omaior barato da nossaprofissão
Resultadodo projeto
“Se o nível de mudançainterno está aquém doexterno, o colapso éiminenteJack Welch
Obrigadoapostem na web@jcemer
jcemer
coconala_engineer
kosui
niftycorp
tkikuchi1002
h1kita
cybozuinsideout
muziyoshiz
pospome
lemiorhan
nikkei_engineer_recruiting
orgachem
jonrohan
brianwarren
kastner
marktimemedia
jonyablonski
holman
jensimmons
colly
addyosmani
cherdarchuk
morganepeng
rmw