Lapidando o Globo Play

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

Transcript

1. lapidando o
2. jcemer.com twitter.com/jcemer
3. porto alegre
4. Globo Play é o produto de vídeos da TV Globo
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
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