lapidando o
jcemer.com
twitter.com/jcemer
porto alegre
Globo Play é o produto
de vídeos da TV Globo
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...
“It should be accessible from
any kind of hardware that can
connect to the internet:
stationary or mobile, small
screen or...
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}.js...
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/map...
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.c...
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-
comp...
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
“Se o nível de mudança
interno está aquém do
externo, o colapso é
iminente
Jack Welch
Obrigadoapostem na web
@jcemer
Lapidando o Globo Play
Lapidando o Globo Play
Lapidando o Globo Play
Lapidando o Globo Play
Lapidando o Globo Play
Lapidando o Globo Play
Lapidando o Globo Play
Lapidando o Globo Play
Próximos SlideShares
Carregando em…5
×

Lapidando o Globo Play

2.053 visualizações

Publicada em

Estudo de caso de um produto inovador em termos de tecnologia e conceito.

Publicada em: Tecnologia
1 comentário
28 gostaram
Estatísticas
Notas
  • Quanto ao uso dos 3 pacotes para testes... Continuam usando essa solução para testes no projeto? Chegaram a fazer experimentos usando Enzyme?
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
Sem downloads
Visualizações
Visualizações totais
2.053
No SlideShare
0
A partir de incorporações
0
Número de incorporações
144
Ações
Compartilhamentos
0
Downloads
12
Comentários
1
Gostaram
28
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Lapidando o Globo Play

  1. 1. lapidando o
  2. 2. jcemer.com twitter.com/jcemer
  3. 3. porto alegre
  4. 4. Globo Play é o produto de vídeos da TV Globo
  5. 5. O projetoGlobo Play
  6. 6. Mobile first Projeto
  7. 7. Desktop 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile Mobile revolution *Usuários em milhares
 fonte: Comscore 2k*
  8. 8. Desktop 12AM 7AM 10AM 5PM 8PM 12AM Uso dos dispositivos
 ao longo do dia fonte: Comscore Mobile
  9. 9. 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
  10. 10. “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
  11. 11. Graceful degradation
  12. 12. Graceful degradation Progressive enhancement
  13. 13. Experiencia fluida Projeto
  14. 14. “Queremos sair do paradigma de páginas e alcançar uma experiência apoiada em camadas Product Owner
  15. 15. Definir o fluxo de navegação no produto utilizando JavaScript
  16. 16. Ter liberdade para gerar diferentes empacotamentos e praticar testes A/B
  17. 17. Server render Projeto
  18. 18. Fugir das várias requisições para compor a primeira página
  19. 19. Utilizar o mesmo código para o back-end e front-end da aplicação
  20. 20. Não prejudicar o SEO do produto
  21. 21. Cliente Servidor APP API
 de dados
  22. 22. Tecnologiasutilizadas
  23. 23. A correta escolha de tecnologias faz parte de bons resultados
  24. 24. Req HTML Click JSON Gene Add JSON Click Animate class ue rate Request st1. 2. 3. 4. 5. 6. 7. 8. 9.
  25. 25. Req HTML Click JSON Gene Add JSON Click class ue rate Req uest st
  26. 26. As tecnologias foram definidas após uma série de experimentos
  27. 27. React CSS SVG HTML MapperSmith jQuery JavaScript Web APIs React Router
  28. 28. React Tecnologias
  29. 29. O DOM não é performático quando aplicamos modificações a revelia
  30. 30. “A solução é escrever código como se recriasse o DOM toda vez que o estado muda Time do Virtual DOM
  31. 31. var newTree = render(data) var patches = diff(tree, newTree) rootNode = patch(rootNode, patches) tree = newTree
  32. 32. Componentes de software encapsulam uma série de funcionalidades relacionadas
  33. 33. Componentes podem ser compostos para formar um sistema mais complexo
  34. 34. React permite encapsular, compor e reusar código na plataforma Web
  35. 35. Componentes do React mantêm estado e recebem propriedades dos seus ancestrais
  36. 36. Set state Dirty Re render
  37. 37. MapperSmith Tecnologias
  38. 38. Internet Rede interna Cliente Servidor APP API
 de dados
  39. 39. Lightweight, isomorphic, dependency-free, REST client mapper for JavaScript https://github.com/tulios/mappersmith
  40. 40. var manifest = {
 host: 'http://my.api.com', resources: { Book: { all: {path: '/books.json'}, byId: {path: '/books/{id}.json'} }, Photo: { byCategory: {path: '/photos/{category}.json'} } } }
  41. 41. Internet Rede interna API
 de dados $.ajax require('http')
  42. 42. Mappersmith cached gateway permite utilizar LocalStorage e Redis para economizar requisições https://github.com/tulios/mappersmith-cached-gateway
  43. 43. Servicosconsumidos
  44. 44. O Globo Play é a consolidação do trabalho de várias equipes da globo.com
  45. 45. 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
  46. 46. Identificação do usuário Serviço de login Comentários Recomendação de
 conteúdo
  47. 47. Destaques editoriais Área administrativa Elastic Search Acervo de vídeos e programas para busca
  48. 48. Player com suporte a publicidade e integração com diversas APIs Player de vídeo
  49. 49. Desafiosenfrentados
  50. 50. 1Organizar código em componentes
  51. 51. “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
  52. 52. Componentes puros dependem apenas de propriedades e estado para renderizar
  53. 53. O escopo de responsabilidade dos componentes é constantemente revisto
  54. 54. 2Compreender o ciclo de vida dos componentes
  55. 55. http://busypeoples.github.io/post/react-component-lifecycle Inicialização
  56. 56. Alteração do estado
  57. 57. Alteração de propriedades
  58. 58. Os componentes são evoluídos ao longo do desenvolvimento
  59. 59. 3Entregar a melhor experiência para todos os dispositivos
  60. 60. Maior que 1200px Até 1024px Até 768px
  61. 61. Media Queries são utilizadas no CSS e JavaScript para garantir a melhor experiência
  62. 62. 4Utilizar apenas plugins de interface compatíveis com React
  63. 63. React headroom React slick React smartbanner React swipeable
  64. 64. O ecossistema do React é emergente e é preciso ficar antenado para adotar novas bibliotecas
  65. 65. 5Testar o código dos componentes
  66. 66. Experimentamos Jasmine, Karma, Jest, Sinon, Rewire...
  67. 67. Jest é utilizado para os testes, mas é lento e tem uma filosofia controversa
  68. 68. Mocha + expect + shallow render juntos parecem uma ótima alternativa https://blog.algolia.com/how-we-unit-test-react- components-using-expect-jsx
  69. 69. 6Gerenciar estados globais da aplicação
  70. 70. Serviços com auxílio de mixins compartilham estado entre componentes
  71. 71. 7Integrar com serviços externos
  72. 72. Cada serviço externo precisa ser analisado e integrado a aplicação
  73. 73. 8Lidar com a imaturidade das bibliotecas
  74. 74. Algumas adequações precisam ser feitas no código do produto
  75. 75. 9Evoluir as tecnologias utilizadas
  76. 76. Novas versões do React e outras dependências surgiram ao longo do tempo de desenvolvimento
  77. 77. Migramos para a última versão do React recentemente
  78. 78. É necessário viabilizar a evolução do React Router e outras dependências
  79. 79. Mixins estão com os dias contados, é preciso dar atenção a arquitetura Flux e ao Redux
  80. 80. ...
  81. 81. Ruby on Rails Bluegreen deploy New Relic Storage de assets Webpack
  82. 82. Novos desafios surgem a todo momento e este é o maior barato da nossa profissão
  83. 83. Resultadodo projeto
  84. 84. “Se o nível de mudança interno está aquém do externo, o colapso é iminente Jack Welch
  85. 85. Obrigadoapostem na web @jcemer

×