Lapidando o Globo Play - Speaker Deck

Slide 1

Slide 1 text

lapidando o

Slide 2

Slide 2 text

jcemer.com twitter.com/jcemer

Slide 3

Slide 3 text

porto alegre

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

O projeto Globo Play

Slide 10

Slide 10 text

Mobile first Projeto

Slide 11

Slide 11 text

Desktop 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile Mobile revolution *Usuários em milhares  fonte: Comscore 2k*

Slide 12

Slide 12 text

Desktop 12AM 7AM 10AM 5PM 8PM 12AM Uso dos dispositivos  ao longo do dia fonte: Comscore Mobile

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

“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

Slide 15

Slide 15 text

Graceful degradation

Slide 16

Slide 16 text

Graceful degradation Progressive enhancement

Slide 17

Slide 17 text

Experiencia fluida Projeto

Slide 18

Slide 18 text

“Queremos sair do paradigma de páginas e alcançar uma experiência apoiada em camadas Product Owner

Slide 19

Slide 19 text

Deﬁnir o ﬂuxo de navegação no produto utilizando JavaScript

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Server render Projeto

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Não prejudicar o SEO do produto

Slide 25

Slide 25 text

Cliente Servidor APP API  de dados

Slide 26

Slide 26 text

Tecnologias utilizadas

Slide 27

Slide 27 text

A correta escolha de tecnologias faz parte de bons resultados

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Req HTML Click JSON Gene Add JSON Click class ue rate Req uest st

Slide 30

Slide 30 text

As tecnologias foram deﬁnidas após uma série de experimentos

Slide 31

Slide 31 text

React CSS SVG HTML MapperSmith jQuery JavaScript Web APIs React Router

Slide 32

Slide 32 text

React Tecnologias

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

“A solução é escrever código como se recriasse o DOM toda vez que o estado muda Time do Virtual DOM

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Componentes de software encapsulam uma série de funcionalidades relacionadas

Slide 37

Slide 37 text

Componentes podem ser compostos para formar um sistema mais complexo

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Set state Dirty Re render

Slide 41

Slide 41 text

MapperSmith Tecnologias

Slide 42

Slide 42 text

Internet Rede interna Cliente Servidor APP API  de dados

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

var manifest = {  host: 'http://my.api.com', resources: { Book: { all: {path: '/books.json'}, byId: {path: '/books/{id}.json'} }, Photo: { byCategory: {path: '/photos/{category}.json'} } } }

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Mappersmith cached gateway permite utilizar LocalStorage e Redis para economizar requisições https://github.com/tulios/mappersmith-cached-gateway

Slide 47

Slide 47 text

Servicos consumidos

Slide 48

Slide 48 text

O Globo Play é a consolidação do trabalho de várias equipes da globo.com

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Identiﬁcação do usuário Serviço de login Comentários Recomendação de  conteúdo

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Player com suporte a publicidade e integração com diversas APIs Player de vídeo

Slide 53

Slide 53 text

Desafios enfrentados

Slide 54

Slide 54 text

1Organizar código em componentes

Slide 55

Slide 55 text

“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

Slide 56

Slide 56 text

Componentes puros dependem apenas de propriedades e estado para renderizar

Slide 57

Slide 57 text

O escopo de responsabilidade dos componentes é constantemente revisto

Slide 58

Slide 58 text

2Compreender o ciclo de vida dos componentes

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Alteração do estado

Slide 61

Slide 61 text

Alteração de propriedades

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

3Entregar a melhor experiência para todos os dispositivos

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Media Queries são utilizadas no CSS e JavaScript para garantir a melhor experiência

Slide 66

Slide 66 text

4Utilizar apenas plugins de interface compatíveis com React

Slide 67

Slide 67 text

React headroom React slick React smartbanner React swipeable

Slide 68

Slide 68 text

O ecossistema do React é emergente e é preciso ﬁcar antenado para adotar novas bibliotecas

Slide 69

Slide 69 text

5Testar o código dos componentes

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Jest é utilizado para os testes, mas é lento e tem uma ﬁlosoﬁa controversa

Slide 72

Slide 72 text

Mocha + expect + shallow render juntos parecem uma ótima alternativa https://blog.algolia.com/how-we-unit-test-react- components-using-expect-jsx

Slide 73

Slide 73 text

6Gerenciar estados globais da aplicação

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

7Integrar com serviços externos

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

8Lidar com a imaturidade das bibliotecas

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

9Evoluir as tecnologias utilizadas

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Migramos para a última versão do React recentemente

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Mixins estão com os dias contados, é preciso dar atenção a arquitetura Flux e ao Redux

Slide 84

Slide 84 text

...

Slide 85

Slide 85 text

Ruby on Rails Bluegreen deploy New Relic Storage de assets Webpack

Slide 86

Slide 86 text

Novos desaﬁos surgem a todo momento e este é o maior barato da nossa proﬁssão

Slide 87

Slide 87 text

Resultado do projeto

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Obrigado apostem na web @jcemer