E se ao invés de usar classes, instâncias, camadas e MVC nós voltarmos aos fundamentos do JavaScript e construir aplicações inteiras somente com funções? Slides da palestra sobre a arquitetura da Netflix, demonstrando como nós usamos Componentes Funcionais e React para construir nossas aplicações. Apresentada no TDC Porto Alegre 2016. Vídeo e mais informações em http://bruno.tavares.me

1. Arquitetura Escalável da
Netflix
Bruno Tavares
@bt_bruno

2. Mas antes…

3. 3 curiosidades sobre a
que você não sabia.

4. #1

6. roda em
de dispositivos
MILHARES

7. Também!

8. #2

9. Nós temos uma
super secreta
plataforma para TV.

10. Codinome
Gibbon

11. Netflix TV
Netflix TV Platform
2010100% HTML, CSS, JS
Empacotada para TV

12. Performance?
$30
600mhz single core
JavaScript Core
sem JIT
465x mais lento que
V8 no seu laptop.

13. Netflix TV Platform
Webkit
JavaScript Core
Netflix TV UI
(JS, HTML, CSS)
DOM
DOM Rendering
Device Interface
2012
Gibbon
JavaScript Core
Netflix TV UI
(JS only)
Widget Object Model
Widget Rendering
Device Interface
2013

14. Webkit
<div style=”
background-color:#2C425C;
width:200px;
height:200px;
color:#FFFFF">
Hello World
</div>
Hello
World
gibbon.createWidget({
backgroundColor: "#2C425C",
width: 200,
height: 200,
color: "#FFFFFF",
text: "Hello World"
});
Gibbon
Hello
World

15. #3

16. Nós lançamos
tudo com
Testes A/B

17. Testes A/B

18. Testes A/B
✓

19. Testes A/B
✓

20. Controle
Sem sinopse nem play
Sem sinopse
Sem play

21. Arquitetura altamente
escalável
Mais velocidade e volume
de testes A/B
Mais inovação e
vantagem competitiva

22. Arquitetura Anterior
View
Controller
Model

23. Quebrando MVC
View
Controller
Model
ViewViewView
ControllerControllerController
ModelModelModelModel
View

24. Será que entendemos
JavaScript errado?

25. Estado
mutável e
compartilhado
é a raiz de todos os males.

26. Objetos e Camadas
Componentes
Funcionais

27. JavaScript Funcional
λ

28. Código expresso de forma declarativa,
em pequenas funções, evitando
alteração de estado e dados mutáveis.

29. 4 princípios da nossa
arquitetura

30. #1 Componentes Puros

31. Funções Puras
function formatTitle(title) {
return `<h1>${title}</h1>`;
}
Entrada
Saída
Para os mesmos parâmetros,
sempre o mesmo resultado
// ...
formatTitle('Narcos'); // <h1>Narcos</h1>

32. Componente
Dados
View
Componentes Puros

33. const Boxshot = React.createClass({
render() {
return <img src={this.props.src} />
}
});
Componentes Puros - React
const view = Boxshot({ src: '…' });

34. const Boxshot = React.createClass({
render() {
return <img src={this.props.src} />
}
});
Componentes Puros - React
const view = Boxshot({ src: '…' });
Entrada
const Boxshot = function(props) {
return <img src={props.src} />
}
const Boxshot = (props) => (
<img src={props.src} />
);
Saída

35. Previsíveis
Independente de Estado
Fácil de refatorar
Composição

36. #2 API Declarativa

37. // imperativo
Boxshot(data.movie); //<img … />
// declarativo
<Boxshot movie={data.movie} />

38. // imperativo
var panel = $('#panel');
if (isPanelVisible) {
panel.show();
}
else {
panel.hide();
}
// declarativo
<Panel visible={isPanelVisible} />

39. // declarativo
const app = (
<Gallery>
<Category category={netflixOriginals}>
<Boxshot movie={narcos} />
<Boxshot movie={strangerThings} />
<Boxshot movie={lukeCage} />
</Category>
</Gallery>
);
render(app);

40. Legibilidade
Melhor compreensão
Menos margem para bugs

41. #3 Composição

42. App
Componente
Componente Componente
Componente
Dados
View

43. Boxshot
Focusable
RemoteData

44. // boxshot component
const Boxshot = (props) => (
<img src={props.src} />
);
// inject focus capability
const BoxshotWithFocus = Focusable(Boxshot);
// inject remote data fetching
const BoxshotWithData =
RemoteData(BoxshotWithFocus);

45. Escalabilidade
Complexidade Controlada
API Estável

46. #4 Fluxo Unidirecional

47. Dados
{ … }
HTML
< … >
Componentes
Puros
HTML
< … >

48. Dados
{ … }
HTML
< … >
Componentes
Puros
Dados
{ … }
HTML
< … >

49. Dados
{ … }
Componentes
Puros
HTML
< … >
HTML
< … >

50. Bacana… e como eu executo
efeitos colaterais?

51. Dados
{ … }
HTML
< … >
AçãoRedutor

52. // state
{ selectedMovie: 80025313 }

53. // fire action
this.props.selectMovieAction({
movie: 20057281
});

54. // reducer changes state
newState = state.set(
'selectedMovie', action.movie
);

55. // state
{ selectedMovie: 80025313 }
// state
{ selectedMovie: 20057281}
Ação
Redutor

56. E se você pudesse criar toda
sua aplicação, só com
componentes puros?

58. {
categories: [{
title: 'Top Picks for You',
movies: [{
title: 'Narcos',
boxshot: 'http:.../narcos.jpg'
}, ... ]
}, ...]
}

59. const Boxshot = (props) => (
<img src={props.movie.boxshot} />
);

60. const Boxshot = (props) => (
<img src={props.movie.boxshot} />
);
const Category = (props) => (
<div>
<h2>{props.category.title}</h2>
</div>
);
{props.category.movies.map(movie, i) => (
<Boxshot movie={movie} />
))}

61. const Boxshot = (props) => (
<img src={props.movie.boxshot} />
);
const Category = (props) => (
<div>
<h2>{props.category.title}</h2>
</div>
);
const Gallery = (props) => (
<div>
</div>
);
{props.category.movies.map(movie, i) => (
<Boxshot movie={movie} />
))}
{props.categories.map(category => (
<Category category={category} />
))}

63. Previsível
Declarativa
Extensível
Unidirecional
Imutável
Arquitetura Escalável

64. app = (dados) => view

65. Obrigado!
Bruno Tavares
@bt_bruno