React is a JavaScript library for building user interfaces that aims to solve issues with data changing over time in large web applications. It introduces components, re-rendering on data changes rather than mutating data, and a virtual DOM for efficient re-rendering. React uses a unidirectional data flow and one-way data binding that improves design architecture and code reusability. Related technologies like JSX, Flux, GraphQL, Relay, and React Native further enhance React's capabilities.
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
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
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
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
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
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
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…
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.
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
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