Velocity China 2016 Presentation about React & Redux in Hulu

1. React & Redux in Hulu
程墨 (Morgan Cheng)

2. @morgancheng
About Me

3. About Hulu

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

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

7. React vs. jQuery

8. Code in jQuery

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

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

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

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

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
const appHtml = ReactDOMServer.renderToString(component);
Server Side
Browser Side
ReactDOM.render(component,
window.document.getElementById("appRoot"));

17. React Components are bricks, not building

18. Problem of MVC

19. Flux

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

21. Redux = Reducer + Flux

22. Reducer
(state, action) => newState

23. Redux
Store
Action Reducer
State
ReducerReducer
View
dispatch

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

25. {
foo: { ... }
bar: { ... }
}
State
Reducer
{
foo: { ... }
bar: { ... }
}
Action
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
Virtual DOM DOM
React
jQuery

32. React conflicts with jQuery
Virtual DOM DOM
React
jQuery

33. render() componentDidUpdate()componentWillUpdate ()
componentWillMount() render() componentDidMount()
React Mounting Phase
React Updating Phase
invoked only at browser side
not invoked for first time render

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

35. Dehydrate & Rehydrate

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

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

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

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
 https://github.com/thejameskyle/babel-react-optimize

43. Avoid Wasted-Rendering-Time

44. Virtual DOM
Previous Virtual DOM
Waste If Same

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
Rendering Components
Render Dehydrated State
fetchState().then(render)
ReactDOMServer.renderToString(...)
<script>
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
Render Dehydrated State
Rendering Component
Rendering Component
Render Dehydrated State
Push After Every Render

51. Constraint over Conventions

52. Search Hulu in WeChat
Thanks
Any Question?