Transferir como PDF, PPTX
Carregado porJean Carlo Emer
Lapidando o Globo Play
O documento descreve o projeto do Globo Play, seu desenvolvimento inicial focado em dispositivos móveis e a evolução para suportar diferentes telas. Detalha os principais desafios enfrentados como organizar o código em componentes React, compreender o ciclo de vida dos componentes, garantir uma boa experiência em todos os dispositivos e integrar com serviços externos. Aponta que novos desafios surgem constantemente no desenvolvimento de software.
Lapidando o Globo Play
- 1.
- 2.
- 3.
- 4. Globo Play éo produto de vídeos da TV Globo
- 9.
- 10.
- 11. Desktop 2007 2008 20092010 2011 2012 2013 2014 2015 Mobile Mobile revolution *Usuários em milhares fonte: Comscore 2k*
- 12. Desktop 12AM 7AM 10AM5PM 8PM 12AM Uso dos dispositivos ao longo do dia fonte: Comscore Mobile
- 13. Uso de mobileweb 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 beaccessible from any kind of hardware that can connect to the internet: stationary or mobile, small screen or large Sir Tim Berners Lee
- 15.
- 16.
- 17.
- 18. “Queremos sair doparadigma de páginas e alcançar uma experiência apoiada em camadas Product Owner
- 19. Definir o fluxode navegação no produto utilizando JavaScript
- 20. Ter liberdade paragerar diferentes empacotamentos e praticar testes A/B
- 21.
- 22. Fugir das váriasrequisições para compor a primeira página
- 23. Utilizar o mesmocódigo para o back-end e front-end da aplicação
- 24. Não prejudicar oSEO do produto
- 25.
- 26.
- 27. A correta escolhade tecnologias faz parte de bons resultados
- 28.
- 29.
- 30. As tecnologias foram definidasapós uma série de experimentos
- 31.
- 32.
- 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 encapsulamuma série de funcionalidades relacionadas
- 37. Componentes podem ser compostospara formar um sistema mais complexo
- 38. React permite encapsular, compore reusar código na plataforma Web
- 39. Componentes do React mantêmestado e recebem propriedades dos seus ancestrais
- 40. Set state DirtyRe render
- 41.
- 42.
- 43. Lightweight, isomorphic, dependency-free, RESTclient 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.
- 46. Mappersmith cached gateway permiteutilizar LocalStorage e Redis para economizar requisições https://github.com/tulios/mappersmith-cached-gateway
- 47.
- 48. O Globo Playé a consolidação do trabalho de várias equipes da globo.com
- 49. Acervo de vídeose 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çode login Comentários Recomendação de conteúdo
- 51. Destaques editoriais Área administrativa ElasticSearch Acervo de vídeos e programas para busca
- 52. Player com suportea publicidade e integração com diversas APIs Player de vídeo
- 53.
- 54.
- 55. “A container doesdata 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 apenasde propriedades e estado para renderizar
- 57. O escopo deresponsabilidade dos componentes é constantemente revisto
- 58. 2Compreender o ciclode vida dos componentes
- 59.
- 60.
- 61.
- 62. Os componentes são evoluídosao longo do desenvolvimento
- 63. 3Entregar a melhor experiênciapara todos os dispositivos
- 64. Maior que 1200px Até1024px Até 768px
- 65. Media Queries sãoutilizadas no CSS e JavaScript para garantir a melhor experiência
- 66. 4Utilizar apenas plugins deinterface compatíveis com React
- 67. React headroom React slick Reactsmartbanner React swipeable
- 68. O ecossistema doReact é emergente e é preciso ficar antenado para adotar novas bibliotecas
- 69. 5Testar o códigodos componentes
- 70. Experimentamos Jasmine, Karma, Jest,Sinon, Rewire...
- 71. Jest é utilizadopara 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 daaplicação
- 74. Serviços com auxíliode mixins compartilham estado entre componentes
- 75.
- 76. Cada serviço externoprecisa ser analisado e integrado a aplicação
- 77. 8Lidar com aimaturidade das bibliotecas
- 78. Algumas adequações precisam serfeitas no código do produto
- 79.
- 80. Novas versões doReact e outras dependências surgiram ao longo do tempo de desenvolvimento
- 81. Migramos para aúltima versão do React recentemente
- 82. É necessário viabilizara evolução do React Router e outras dependências
- 83. Mixins estão comos dias contados, é preciso dar atenção a arquitetura Flux e ao Redux
- 84.
- 85. Ruby on Rails Bluegreendeploy New Relic Storage de assets Webpack
- 86. Novos desafios surgema todo momento e este é o maior barato da nossa profissão
- 87.
- 92. “Se o nívelde mudança interno está aquém do externo, o colapso é iminente Jack Welch
- 93.