Successfully reported this slideshow.
Your SlideShare is downloading. ×

Lapidando o Globo Play

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

×