1. React
Chenguang Zhang
TPM, Hulu Beijing

2. A little bit of history
The original Web The Ajax Web

3. A little bit of history
• Ajax is “the method of exchanging data with a
server, and updating parts of a web page -
without reloading the entire page.”
• Ajax is also the foundation of modern web apps.

4. A little bit of history
Ajax Challenges
Exchange data
Render view
MVC/MVVM solutions
AngularJS
Ember
Backbone
React

5. MVC/MVVM solutions
• Benefits
• Improved design architecture
• Promotes code reusability
• Easy to add/remove components
• Better teamwork
• Drawbacks
• Separate code, not concerns
• Callback, linking function….
• 2-way data binding

6. What’s the concern?
• Data changing overtime is the root of all evil
• Render data on time ZERO and time T are totally
different
• 2-way data binding doesn’t fix it correctly

7. Why React?
• We built React to solve one problem: building
large applications with data that changes over
time.
• From React Blog - Why React

8. A React Example
Render to DOM?
A template language?

9. Key ideas
• Components, not templates.
• Re-render, don’t mutate.
• Virtual DOM is simple and fast.

10. Components
• Components are self-contained
• Reusable
• Composable
• Unit testable

11. 1-way data flow
• Data flows down
• Props is immutable
• States is mutable
• Anything (Props, States,
Handlers, Styles) can be
passed to children as props
• Event flows up
• Through parent passed
handler props
Parent Component
Child Component
Props
States
States

12. Passed to child as props
Data flows down
Event flows up

13. Looks familiar?
Just like DOM

14. Components
• Components are self-contained
• Get props from anyone
• Own the states
• Own the handler to change the states

15. Re-render
• To solve the problem of data changing over time
• Let’s go back to 1990s.
• Re-render the whole app on every update
• Data is the single source of truth

16. Wait…
• Performance issue!
• Ok, why?

17. Why re-render is heavy?
• Javascript is not that slow…
• But DOM is very slow!

18. Virtual DOM
• The key tech that make the “Re-render” a smart
decision

19. Virtual DOM
• A pure javascript, in-memory representation of
DOM
• Render the Virtual DOM whenever something
changes
• React translate the diff into batch DOM ops
• Apply the batch ops to Real DOM to sync

20. Virtual DOM
React
Components
Virtual DOM
Computed
Batch DOM
ops
Real DOM
Auto update all in 60 fps

21. Virtual DOM
• Further optimization based on component
structure
• Even faster than manual Vanilla JS DOM ops
• No only traditional DOM, but also others
• Flipboard build a 60 fps web app by applying
React to Canvas
• Netflix build TV apps by applying React to
Gibbon

22. Virtual DOM
• There is a standalone open-source Virtual DOM
implementation inspired by React
• And also a lot of view OR MVC/MVVM solutions
built on top of it
• Ember 2.x and Angular 2.x will also introduce
Virtual DOM

23. More things that power up
React.

24. JSX
• JSX lets you create JavaScript objects using
HTML syntax.
• Less code, more friendly.
React.createElement('a', {href: ‘http://www.hulu.com/'}, 'Hello!')
<a href=“http://www.hulu.com”>Hello!</a>

25. JSX
• Will be translated into Javascript to be executed
• Offline - react-tools
• In-Browser - JSXTransformer
• It doesn't alter the semantics of JavaScript.

26. Developer Tool
• React Developer Tools
• A chrome extension to inspect the React
component hierarchies

27. React IDE
• React IDE is pending on http://nuclide.io/
• Built on top of Atom

28. Flux
• A application architecture that complements
React by utilizing a unidirectional data flow

29. MVC v.s. Flux

30. Complex MVC

31. Complex Flux

32. Relay + GraphQL
• Relay is a new framework from Facebook that
provides data-fetching functionality for React
applications.
• GraphQL is a data querying language designed
to describe the complex, nested data
dependencies of modern applications.
• Not open-sourced yet, but it will soon…

33. GraphQL

34. GraphQL

35. Relay + GraphQL

36. Relay + GraphQL

37. Relay + GraphQL

38. Relay
• Similar with Flux
• But there is only one Store
• Can be used alone OR together
• Find exactly the right data for the React Components via
GraphQL
• Resolve the props dependency of parent-child
components
• A transparent data cache
• It also solve the data problem for React Native

39. React Native
• A framework allow you to write native mobile apps
in Javascript and React
• Write in Javascript, and it will apply JS UI update
to Native UI update
• Learn once, write anywhere.

40. React Native
• Use Javascript declared styles instead of CSS
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: '#222222',
},
active: {
borderWidth: 2,
borderColor: '#00ff00',
},
});
<Text style={styles.base} />
<View style={styles.background} />
<View style={[styles.base, styles.background]} />
<View style={[styles.base, this.state.active && styles.active]} />

41. React Today
• Facebook / Instagram
• Yahoo Mail
• Netflix All Platform
• HipChat (web version)
• Github Atom IDE
• Flipboard
• Taobao

42. React Ecosystem
GraphQL (API Gateway)
Server Side APIs
Relay (Data Framework)Flux (Event Framework)
React (JSX, Components, JS Styles)
React Native (Native Code)React Web (Virtual DOM)

43. Open Discussion
• Will Browser provide native support for virtual
DOM?
• NO, cause there is legacy spec
• But maybe YES for the wild wild Chrome OS…

44. Open Discussion
• Will React Native change the way that people
write the Mobile App?
• Still too early, cause it didn’t solve any critical
problem for complex native apps
• But it will allow Javascript coder to create native
apps easier
• End of the war of HTML5 and Native App

45. Open Discussion
• Which one is easier to refactor existing code?
• Replace all DOM actions with virtual DOM
actions
• Use React directly to rewrite the View

46. Open Discussion
• Is React always faster & better than manual ops
DOM?
• For most case, it is true
• But manual ops gives you more space to do
specific optimization
• Atom removed React in text editor to use
Shadow DOM https://github.com/atom/atom/
issues/3677

47. Reference
• Why react?
• http://facebook.github.io/react/blog/2013/06/05/
why-react.html

48. Reference
• Understand the Virtual DOM
• http://fluentconf.com/fluent2014/public/
schedule/detail/32395
• The Virtual DOM diff algorithm
• http://calendar.perfplanet.com/2013/diff/
• https://github.com/Matt-Esch/virtual-dom

49. References
• Write your first react app
• https://github.com/mikechau/react-primer-draft
• Find the wheels that have already been invented
• https://github.com/enaqx/awesome-react

50. Reference
• Relay + GraphQL Deck on React Conf 2015
• https://speakerdeck.com/relayjs/data-fetching-
for-react-applications
• Unofficial Relay FAQ
• https://gist.github.com/wincent/
598fa75e22bdfa44cf47

51. Reference
• React & Flux on F8 2014
• Facebook message box
• https://youtu.be/nYkdrAPrdcw
• React Native & Relay on F8 2015
• Facebook comments box
• https://youtu.be/X6YbAKiLCLU