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

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 projetoGlobo 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. Tecnologiasutilizadas

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
st1.
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. Servicosconsumidos

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. Desafiosenfrentados

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. Resultadodo projeto

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

93. Obrigadoapostem na web
@jcemer