Lapidando o Globo Play

Transcript

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.

   None
6. 6.

   None
7. 7.

   None
8. 8.

   None
9. 9.

   O projeto Globo Play

10. 10.

    Mobile first Projeto

11. 11.

    Desktop 2007 2008 2009 2010 2011 2012 2013 2014 2015

    Mobile Mobile revolution *Usuários em milhares
 fonte: Comscore 2k*
12. 12.

    Desktop 12AM 7AM 10AM 5PM 8PM 12AM Uso dos dispositivos


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

    Graceful degradation

16. 16.

    Graceful degradation Progressive enhancement

17. 17.

    Experiencia fluida Projeto

18. 18.

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

    apoiada em camadas Product Owner
19. 19.

    Definir o fluxo de navegação no produto utilizando JavaScript

20. 20.

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

21. 21.

    Server render Projeto

22. 22.

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

23. 23.

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

    aplicação
24. 24.

    Não prejudicar o SEO do produto

25. 25.

    Cliente Servidor APP API
 de dados

26. 26.

    Tecnologias utilizadas

27. 27.

    A correta escolha de tecnologias faz parte de bons resultados

28. 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. 29.

    Req HTML Click JSON Gene Add JSON Click class ue

    rate Req uest st
30. 30.

    As tecnologias foram definidas após uma série de experimentos

31. 31.

    React CSS SVG HTML MapperSmith jQuery JavaScript Web APIs React

    Router
32. 32.

    React Tecnologias

33. 33.

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

34. 34.

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

    toda vez que o estado muda Time do Virtual DOM
35. 35.

    var newTree = render(data) var patches = diff(tree, newTree) rootNode

    = patch(rootNode, patches) tree = newTree
36. 36.

    Componentes de software encapsulam uma série de funcionalidades relacionadas

37. 37.

    Componentes podem ser compostos para formar um sistema mais complexo

38. 38.

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

39. 39.

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

    ancestrais
40. 40.

    Set state Dirty Re render

41. 41.

    MapperSmith Tecnologias

42. 42.

    Internet Rede interna Cliente Servidor APP API
 de dados

43. 43.

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

44. 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. 45.

    Internet Rede interna API
 de dados $.ajax require('http')

46. 46.

    Mappersmith cached gateway permite utilizar LocalStorage e Redis para economizar

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

    Servicos consumidos

48. 48.

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

    equipes da globo.com
49. 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. 50.

    Identificação do usuário Serviço de login Comentários Recomendação de
 conteúdo

51. 51.

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

    programas para busca
52. 52.

    Player com suporte a publicidade e integração com diversas APIs

    Player de vídeo
53. 53.

    Desafios enfrentados

54. 54.

    1Organizar código em componentes

55. 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. 56.

    Componentes puros dependem apenas de propriedades e estado para renderizar

57. 57.

    O escopo de responsabilidade dos componentes é constantemente revisto

58. 58.

    2Compreender o ciclo de vida dos componentes

59. 59.

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

60. 60.

    Alteração do estado

61. 61.

    Alteração de propriedades

62. 62.

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

63. 63.

    3Entregar a melhor experiência para todos os dispositivos

64. 64.

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

65. 65.

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

    a melhor experiência
66. 66.

    4Utilizar apenas plugins de interface compatíveis com React

67. 67.

    React headroom React slick React smartbanner React swipeable

68. 68.

    O ecossistema do React é emergente e é preciso ficar

    antenado para adotar novas bibliotecas
69. 69.

    5Testar o código dos componentes

70. 70.

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

71. 71.

    Jest é utilizado para os testes, mas é lento e

    tem uma filosofia controversa
72. 72.

    Mocha + expect + shallow render juntos parecem uma ótima

    alternativa https://blog.algolia.com/how-we-unit-test-react- components-using-expect-jsx
73. 73.

    6Gerenciar estados globais da aplicação

74. 74.

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

75. 75.

    7Integrar com serviços externos

76. 76.

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

77. 77.

    8Lidar com a imaturidade das bibliotecas

78. 78.

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

79. 79.

    9Evoluir as tecnologias utilizadas

80. 80.

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

    do tempo de desenvolvimento
81. 81.

    Migramos para a última versão do React recentemente

82. 82.

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

    dependências
83. 83.

    Mixins estão com os dias contados, é preciso dar atenção

    a arquitetura Flux e ao Redux
84. 84.

    ...

85. 85.

    Ruby on Rails Bluegreen deploy New Relic Storage de assets

    Webpack
86. 86.

    Novos desafios surgem a todo momento e este é o

    maior barato da nossa profissão
87. 87.

    Resultado do projeto

88. 88.

    None
89. 89.

    None
90. 90.

    None
91. 91.

    None
92. 92.

    “Se o nível de mudança interno está aquém do externo,

    o colapso é iminente Jack Welch
93. 93.

    Obrigado apostem na web @jcemer