1.
lapidando o

2.
jcemer.com
twitter.com/jcemer

3.
porto alegre

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

5.
O projetoGlobo Play

6.
Mobile first
Projeto

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

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

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.
“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.
Graceful degradation

12.
Graceful degradation
Progressive enhancement

13.
Experiencia fluida
Projeto

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

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

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

17.
Server render
Projeto

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

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

20.
Não prejudicar o SEO do
produto

21.
Cliente
Servidor
APP
API
de dados

22.
Tecnologiasutilizadas

23.
A correta escolha de
tecnologias faz parte de bons
resultados

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

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

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

27.
React
CSS
SVG
HTML
MapperSmith
jQuery
JavaScript
Web APIs
React Router

28.
React
Tecnologias

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

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

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

32.
Componentes de
software encapsulam uma
série de funcionalidades
relacionadas

33.
Componentes podem ser
compostos para formar um
sistema mais complexo

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

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

36.
Set state Dirty Re render

37.
MapperSmith
Tecnologias

38.
Internet
Rede interna
Cliente
Servidor
APP
API
de dados

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

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.
Internet
Rede interna
API
de dados
$.ajax
require('http')

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

43.
Servicosconsumidos

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

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.
Identificação do usuário
Serviço de login
Comentários
Recomendação de
conteúdo

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

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

49.
Desafiosenfrentados

50.
1Organizar código em
componentes

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.
Componentes puros
dependem apenas de
propriedades e estado para
renderizar

53.
O escopo de responsabilidade
dos componentes é
constantemente revisto

54.
2Compreender o ciclo de
vida dos componentes

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

56.
Alteração do estado

57.
Alteração de propriedades

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

59.
3Entregar a melhor
experiência para todos
os dispositivos

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

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

62.
4Utilizar apenas plugins
de interface compatíveis
com React

63.
React headroom
React slick
React smartbanner
React swipeable

64.
O ecossistema do React é
emergente e é preciso ficar
antenado para adotar novas
bibliotecas

65.
5Testar o código dos
componentes

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

67.
Jest é utilizado para os
testes, mas é lento e tem uma
filosofia controversa

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

69.
6Gerenciar estados
globais da aplicação

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

71.
7Integrar com serviços
externos

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

73.
8Lidar com a imaturidade
das bibliotecas

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

75.
9Evoluir as tecnologias
utilizadas

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

77.
Migramos para a última
versão do React
recentemente

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

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

80.
...

81.
Ruby on Rails
Bluegreen deploy
New Relic
Storage de assets
Webpack

82.
Novos desafios surgem a
todo momento e este é o
maior barato da nossa
profissão

83.
Resultadodo projeto

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

85.
Obrigadoapostem na web
@jcemer