React & Redux in Hulu. (Morgan Cheng)

Transcription

1 React & Redux in Hulu (Morgan Cheng)

2 About

3 About Hulu

4 Challenges System Complexity Legacy code in jquery & Backbone UI non-predictable Lack of component isolation Performance Bottleneck Initial AJAX roundtrip for browser-side-rendering

5

6 Tech Stack jquery React Backbone Redux Ruby on Rails Node + Express

7 React vs. jquery

8 Code in jquery

9 <div> <Foo/> <Bar>children</Bar> </div> JSX Virtual DOM DOM

10 Previous Virtual DOM <div> <Foo/> <Bar>children</Bar> </div> JSX Virtual DOM DOM

11 Previous Virtual DOM Diff <div> <Foo/> <Bar>children</Bar> </div> JSX Virtual DOM DOM

12 Previous Virtual DOM Diff <div> <Foo/> <Bar>children</Bar> </div> JSX Virtual DOM DOM

13 React App = Keep Rendering

14 UI = f(state)

15 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> ); }

16 Isomorphic/Universal React Server Side const apphtml = ReactDOMServer.renderToString(component); Browser Side ReactDOM.render(component, window.document.getelementbyid("approot"));

17 React Components are bricks, not building

18 Problem of MVC

19 Flux

20 Drawbacks of Flux Inter-dependency among multiple stores Hard to support server-side-rendering Hard to do hot-reloading

21 Redux = Reducer + Flux

22 Reducer (state, action) => newstate

23 Redux Store dispatch Action Reducer Reducer State View

24 From Perspective of Component React View Action Creators Reducer Hulu Component State Key export {view, actions, reducer, statekey}

25 State Action { foo: {... } bar: {... } } Reducer { } foo: {... } bar: {... } React View

26 React + Redux = Win!

27 We get Performance and Maintainability at the same time with React & Redux

28 Without Redux With Redux Store

29 Constraints over Conventions

30 jquery Dies Hard Legacy Code Third Party JavaScript Code e.g. Optimizely

31 React conflicts with jquery jquery React Virtual DOM DOM

32 React conflicts with jquery jquery React Virtual DOM DOM

33 React Mounting Phase componentwillmount() render() componentdidmount() invoked only at browser side React Updating Phase componentwillupdate () render() componentdidupdate() not invoked for first time render

34 class Foo extends React.Component{ react render componentdidmount() { } // do DOM manipulation with jquery jquery render componentdidupdate() { react render // do DOM manipulation with jquery } jquery render render() { } // render JSX for react }

35 Dehydrate & Rehydrate

36 + = State React HTML Server Side Browser Side Dehydrated State + = React Rehydrated HTML

37 API Request Web Server API Server Page Request HTML & Dehydrated Data Page A

38 Web Server API Server API Request Raw Response Data Page A Page B

39 Chunked Code

40 On SPA Navigation Page A Page B Reset Singleton Store with new Reducer and State

41 Faster React Server Rendering

42 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

43 Avoid Wasted-Rendering-Time

44 Previous Virtual DOM Waste If Same Virtual DOM

45 Avoid Dynamic props <Foo onclick={ function() { dosomething(); } } /> <Bar style={ {margin: "0px" } }/>

46 Incremental Page Rendering

47 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

48 Server Rendering Process Fetching State fetchstate().then(render) Rendering Components ReactDOMServer.renderToString(...) <script> Render Dehydrated State window.initstate =... </script>

49 Page Should Not Be Component class Page { getcomponents() { return [ Header, Foo, Bar, Footer ]; } }

50 Server Rendering Process Improved Start Fetching State Rendering Component Render Dehydrated State Push After Every Render Rendering Component Render Dehydrated State Rendering Component Render Dehydrated State

51 Constraint over Conventions

52 Search Hulu in WeChat Thanks Any Question?