Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Arquitetura JavaScript Escalável da Netflix

779 views

Published on

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

Published in: Technology
  • Be the first to comment

Arquitetura JavaScript Escalável da Netflix

  1. 1. Arquitetura Escalável da Netflix Bruno Tavares @bt_bruno
  2. 2. Mas antes…
  3. 3. 3 curiosidades sobre a que você não sabia.
  4. 4. #1
  5. 5. roda em de dispositivos MILHARES
  6. 6. Também!
  7. 7. #2
  8. 8. Nós temos uma super secreta plataforma para TV.
  9. 9. Codinome Gibbon
  10. 10. Netflix TV Netflix TV Platform 2010100% HTML, CSS, JS Empacotada para TV
  11. 11. Performance? $30 600mhz single core JavaScript Core sem JIT 465x mais lento que V8 no seu laptop.
  12. 12. 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
  13. 13. 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
  14. 14. #3
  15. 15. Nós lançamos tudo com Testes A/B
  16. 16. Testes A/B
  17. 17. Testes A/B ✓
  18. 18. Testes A/B ✓
  19. 19. Controle Sem sinopse nem play Sem sinopse Sem play
  20. 20. Arquitetura altamente escalável Mais velocidade e volume de testes A/B Mais inovação e vantagem competitiva
  21. 21. Arquitetura Anterior View Controller Model
  22. 22. Quebrando MVC View Controller Model ViewViewView ControllerControllerController ModelModelModelModel View
  23. 23. Será que entendemos JavaScript errado?
  24. 24. Estado mutável e compartilhado é a raiz de todos os males.
  25. 25. Objetos e Camadas Componentes Funcionais
  26. 26. JavaScript Funcional λ
  27. 27. Código expresso de forma declarativa, em pequenas funções, evitando alteração de estado e dados mutáveis.
  28. 28. 4 princípios da nossa arquitetura
  29. 29. #1 Componentes Puros
  30. 30. 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>
  31. 31. Componente Dados View Componentes Puros
  32. 32. const Boxshot = React.createClass({ render() { return <img src={this.props.src} /> } }); Componentes Puros - React const view = Boxshot({ src: '…' });
  33. 33. 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
  34. 34. Previsíveis Independente de Estado Fácil de refatorar Composição
  35. 35. #2 API Declarativa
  36. 36. // imperativo Boxshot(data.movie); //<img … /> // declarativo <Boxshot movie={data.movie} />
  37. 37. // imperativo var panel = $('#panel'); if (isPanelVisible) { panel.show(); } else { panel.hide(); } // declarativo <Panel visible={isPanelVisible} />
  38. 38. // declarativo const app = ( <Gallery> <Category category={netflixOriginals}> <Boxshot movie={narcos} /> <Boxshot movie={strangerThings} /> <Boxshot movie={lukeCage} /> </Category> </Gallery> ); render(app);
  39. 39. Legibilidade Melhor compreensão Menos margem para bugs
  40. 40. #3 Composição
  41. 41. App Componente Componente Componente Componente Dados View
  42. 42. Boxshot Focusable RemoteData
  43. 43. // boxshot component const Boxshot = (props) => ( <img src={props.src} /> ); // inject focus capability const BoxshotWithFocus = Focusable(Boxshot); // inject remote data fetching const BoxshotWithData = RemoteData(BoxshotWithFocus);
  44. 44. Escalabilidade Complexidade Controlada API Estável
  45. 45. #4 Fluxo Unidirecional
  46. 46. Dados { … } HTML < … > Componentes Puros HTML < … >
  47. 47. Dados { … } HTML < … > Componentes Puros Dados { … } HTML < … >
  48. 48. Dados { … } Componentes Puros HTML < … > HTML < … >
  49. 49. Bacana… e como eu executo efeitos colaterais?
  50. 50. Dados { … } HTML < … > AçãoRedutor
  51. 51. // state { selectedMovie: 80025313 }
  52. 52. // fire action this.props.selectMovieAction({ movie: 20057281 });
  53. 53. // reducer changes state newState = state.set( 'selectedMovie', action.movie );
  54. 54. // state { selectedMovie: 80025313 } // state { selectedMovie: 20057281} Ação Redutor
  55. 55. E se você pudesse criar toda sua aplicação, só com componentes puros?
  56. 56. { categories: [{ title: 'Top Picks for You', movies: [{ title: 'Narcos', boxshot: 'http:.../narcos.jpg' }, ... ] }, ...] }
  57. 57. const Boxshot = (props) => ( <img src={props.movie.boxshot} /> );
  58. 58. 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} /> ))}
  59. 59. 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} /> ))}
  60. 60. Previsível Declarativa Extensível Unidirecional Imutável Arquitetura Escalável
  61. 61. app = (dados) => view
  62. 62. Obrigado! Bruno Tavares @bt_bruno

×