Lapidando o Globo Play

Lapidando o Globo Play

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

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

December 05, 2015
Tweet

Transcript

  1. lapidando o

  2. jcemer.com twitter.com/jcemer

  3. porto alegre

  4. Globo Play é o produto de vídeos da TV Globo

  5. None
  6. None
  7. None
  8. None
  9. O projeto Globo Play

  10. Mobile first Projeto

  11. Desktop 2007 2008 2009 2010 2011 2012 2013 2014 2015

    Mobile Mobile revolution *Usuários em milhares
 fonte: Comscore 2k*
  12. Desktop 12AM 7AM 10AM 5PM 8PM 12AM Uso dos dispositivos


    ao longo do dia fonte: Comscore Mobile
  13. 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
  14. “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
  15. Graceful degradation

  16. Graceful degradation Progressive enhancement

  17. Experiencia fluida Projeto

  18. “Queremos sair do paradigma de páginas e alcançar uma experiência

    apoiada em camadas Product Owner
  19. Definir o fluxo de navegação no produto utilizando JavaScript

  20. Ter liberdade para gerar diferentes empacotamentos e praticar testes A/B

  21. Server render Projeto

  22. Fugir das várias requisições para compor a primeira página

  23. Utilizar o mesmo código para o back-end e front-end da

    aplicação
  24. Não prejudicar o SEO do produto

  25. Cliente Servidor APP API
 de dados

  26. Tecnologias utilizadas

  27. A correta escolha de tecnologias faz parte de bons resultados

  28. Req HTML Click JSON Gene Add JSON Click Animate class

    ue rate Request st 1. 2. 3. 4. 5. 6. 7. 8. 9.
  29. Req HTML Click JSON Gene Add JSON Click class ue

    rate Req uest st
  30. As tecnologias foram definidas após uma série de experimentos

  31. React CSS SVG HTML MapperSmith jQuery JavaScript Web APIs React

    Router
  32. React Tecnologias

  33. O DOM não é performático quando aplicamos modificações a revelia

  34. “A solução é escrever código como se recriasse o DOM

    toda vez que o estado muda Time do Virtual DOM
  35. var newTree = render(data) var patches = diff(tree, newTree) rootNode

    = patch(rootNode, patches) tree = newTree
  36. Componentes de software encapsulam uma série de funcionalidades relacionadas

  37. Componentes podem ser compostos para formar um sistema mais complexo

  38. React permite encapsular, compor e reusar código na plataforma Web

  39. Componentes do React mantêm estado e recebem propriedades dos seus

    ancestrais
  40. Set state Dirty Re render

  41. MapperSmith Tecnologias

  42. Internet Rede interna Cliente Servidor APP API
 de dados

  43. Lightweight, isomorphic, dependency-free, REST client mapper for JavaScript https://github.com/tulios/mappersmith

  44. var manifest = {
 host: 'http://my.api.com', resources: { Book: {

    all: {path: '/books.json'}, byId: {path: '/books/{id}.json'} }, Photo: { byCategory: {path: '/photos/{category}.json'} } } }
  45. Internet Rede interna API
 de dados $.ajax require('http')

  46. Mappersmith cached gateway permite utilizar LocalStorage e Redis para economizar

    requisições https://github.com/tulios/mappersmith-cached-gateway
  47. Servicos consumidos

  48. O Globo Play é a consolidação do trabalho de várias

    equipes da globo.com
  49. 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
  50. Identificação do usuário Serviço de login Comentários Recomendação de
 conteúdo

  51. Destaques editoriais Área administrativa Elastic Search Acervo de vídeos e

    programas para busca
  52. Player com suporte a publicidade e integração com diversas APIs

    Player de vídeo
  53. Desafios enfrentados

  54. 1Organizar código em componentes

  55. “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
  56. Componentes puros dependem apenas de propriedades e estado para renderizar

  57. O escopo de responsabilidade dos componentes é constantemente revisto

  58. 2Compreender o ciclo de vida dos componentes

  59. http://busypeoples.github.io/post/react-component-lifecycle Inicialização

  60. Alteração do estado

  61. Alteração de propriedades

  62. Os componentes são evoluídos ao longo do desenvolvimento

  63. 3Entregar a melhor experiência para todos os dispositivos

  64. Maior que 1200px Até 1024px Até 768px

  65. Media Queries são utilizadas no CSS e JavaScript para garantir

    a melhor experiência
  66. 4Utilizar apenas plugins de interface compatíveis com React

  67. React headroom React slick React smartbanner React swipeable

  68. O ecossistema do React é emergente e é preciso ficar

    antenado para adotar novas bibliotecas
  69. 5Testar o código dos componentes

  70. Experimentamos Jasmine, Karma, Jest, Sinon, Rewire...

  71. Jest é utilizado para os testes, mas é lento e

    tem uma filosofia controversa
  72. Mocha + expect + shallow render juntos parecem uma ótima

    alternativa https://blog.algolia.com/how-we-unit-test-react- components-using-expect-jsx
  73. 6Gerenciar estados globais da aplicação

  74. Serviços com auxílio de mixins compartilham estado entre componentes

  75. 7Integrar com serviços externos

  76. Cada serviço externo precisa ser analisado e integrado a aplicação

  77. 8Lidar com a imaturidade das bibliotecas

  78. Algumas adequações precisam ser feitas no código do produto

  79. 9Evoluir as tecnologias utilizadas

  80. Novas versões do React e outras dependências surgiram ao longo

    do tempo de desenvolvimento
  81. Migramos para a última versão do React recentemente

  82. É necessário viabilizar a evolução do React Router e outras

    dependências
  83. Mixins estão com os dias contados, é preciso dar atenção

    a arquitetura Flux e ao Redux
  84. ...

  85. Ruby on Rails Bluegreen deploy New Relic Storage de assets

    Webpack
  86. Novos desafios surgem a todo momento e este é o

    maior barato da nossa profissão
  87. Resultado do projeto

  88. None
  89. None
  90. None
  91. None
  92. “Se o nível de mudança interno está aquém do externo,

    o colapso é iminente Jack Welch
  93. Obrigado apostem na web @jcemer