React Tech Salon
10 likes3,084 views
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.
![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]} />](https://image.slidesharecdn.com/2015-150409045423-conversion-gate01/85/React-Tech-Salon-40-320.jpg)
React Tech Salon
- 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