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