Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

React & Redux in Hulu

581 Aufrufe

Veröffentlicht am

Velocity China 2016 Presentation about React & Redux in Hulu

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

React & Redux in Hulu

  1. 1. React & Redux in Hulu 程墨 (Morgan Cheng)
  2. 2. @morgancheng About Me
  3. 3. About Hulu
  4. 4.  System Complexity  Legacy code in jQuery & Backbone  UI non-predictable  Lack of component isolation  Performance Bottleneck  Initial AJAX roundtrip for browser-side-rendering Challenges
  5. 5. jQuery Backbone Ruby on Rails React Redux Node + Express Tech Stack
  6. 6. React vs. jQuery
  7. 7. Code in jQuery
  8. 8. Virtual DOM DOM <div> <Foo/> <Bar>children</Bar> </div> JSX
  9. 9. Virtual DOM DOM <div> <Foo/> <Bar>children</Bar> </div> JSX Previous Virtual DOM
  10. 10. Virtual DOM DOM <div> <Foo/> <Bar>children</Bar> </div> JSX Previous Virtual DOM Diff
  11. 11. Virtual DOM DOM <div> <Foo/> <Bar>children</Bar> </div> JSX Previous Virtual DOM Diff
  12. 12. React App = Keep Rendering
  13. 13. UI = f(state)
  14. 14. React mixes JS/Style/Markup if (process.env.BROWSER) { require('./style.scss'); } const divStyle = { color: ‘blue’ }; function render() { return ( <div onClick={this.onClick} style={divStyle}>Click Me</div> ); }
  15. 15. Isomorphic/Universal React const appHtml = ReactDOMServer.renderToString(component); Server Side Browser Side ReactDOM.render(component, window.document.getElementById("appRoot"));
  16. 16. React Components are bricks, not building
  17. 17. Problem of MVC
  18. 18. Flux
  19. 19.  Inter-dependency among multiple stores  Hard to support server-side-rendering  Hard to do hot-reloading Drawbacks of Flux
  20. 20. Redux = Reducer + Flux
  21. 21. Reducer (state, action) => newState
  22. 22. Redux Store Action Reducer State ReducerReducer View dispatch
  23. 23. From Perspective of Component React View Action Creators Reducer State Key export {view, actions, reducer, stateKey} Hulu Component
  24. 24. { foo: { ... } bar: { ... } } State Reducer { foo: { ... } bar: { ... } } Action React View
  25. 25. React + Redux = Win!
  26. 26. We get Performance and Maintainability at the same time with React & Redux
  27. 27. Without Redux With Redux Store
  28. 28. Constraints over Conventions
  29. 29.  jQuery Dies Hard  Legacy Code  Third Party JavaScript Code  e.g. Optimizely
  30. 30. React conflicts with jQuery Virtual DOM DOM React jQuery
  31. 31. React conflicts with jQuery Virtual DOM DOM React jQuery
  32. 32. render() componentDidUpdate()componentWillUpdate () componentWillMount() render() componentDidMount() React Mounting Phase React Updating Phase invoked only at browser side not invoked for first time render
  33. 33. class Foo extends React.Component{ componentDidMount() { // do DOM manipulation with jQuery } componentDidUpdate() { // do DOM manipulation with jQuery } render() { // render JSX for react } } react render jQuery render react render jQuery render
  34. 34. Dehydrate & Rehydrate
  35. 35. State React HTML Server Side Browser Side + = Dehydrated State React + = Rehydrated HTML
  36. 36. Page A Web Server API Server Page Request HTML & Dehydrated Data API Request
  37. 37. Page A Page B Web Server API Server API Request Raw Response Data
  38. 38. Chunked Code
  39. 39. On SPA Navigation Page A Page B Reset Singleton Store with new Reducer and State
  40. 40. Faster React Server Rendering
  41. 41.  Set Production Mode  NODE_ENV=production node app.js  Use Minified React.js  require(‘react/dist/react.min.js’);  After v0.14, DO_NOT_USE_OR_YOU_WILL_BE_FIRED  Babel-react-optimize Preset  https://github.com/thejameskyle/babel-react-optimize
  42. 42. Avoid Wasted-Rendering-Time
  43. 43. Virtual DOM Previous Virtual DOM Waste If Same
  44. 44. Avoid Dynamic props <Foo onClick={ function() { doSomething(); } } /> <Bar style={ {margin: "0px" } }/>
  45. 45. Incremental Page Rendering
  46. 46. React-Router-Redux <Provider store={store} > <Router history={history}> <Route path="/" component={App}> <Route path="foo" component={Foo} /> <Route path="bar" component={Bar} /> <Route> </Router> <Provider> Maps Path to Page Component
  47. 47. Server Rendering Process Fetching State Rendering Components Render Dehydrated State fetchState().then(render) ReactDOMServer.renderToString(...) <script> window.initState = ... </script>
  48. 48. Page Should Not Be Component class Page { getComponents() { return [ Header, Foo, Bar, Footer ]; } }
  49. 49. Server Rendering Process Improved Start Fetching State Rendering Component Render Dehydrated State Render Dehydrated State Rendering Component Rendering Component Render Dehydrated State Push After Every Render
  50. 50. Constraint over Conventions
  51. 51. Search Hulu in WeChat Thanks Any Question?

×