Upload
hsuan-fu-lien
View
142
Download
2
Tags:
Embed Size (px)
Citation preview
KKbOX
React.JS Conf & F8Randy Lien
KKbOX
Agenda
• Introduce React.js Conf
• Highlight
• Conclusion
• FAQ
KKbOX
Introduce React.js Conf
KKbOX
KKbOX
KKbOX
KKbOX
KKbOX
KKbOX
KKbOX
KKbOX
KKbOX
Introduction
• 2015/1/28 ~ 1/29 @Facebook HQ, CA
• 160~
• 18 sessions + 2 panels
• Tickets sold out in 1 minutes (3 waves)
KKbOX
Highlight
KKbOX
Highlight
• Performance
• Flux & Relay
• Component Communication
• React Native
KKbOX
Performance
KKbOX
The Keys to React Performance
• How to render
• When to render
KKbOX
Solutions
• Virtual DOM
• Optimistic re-rendering
KKbOX
Optimistic re-rendering• Pure Component (prop, state)
• Immutable data
• shouldComponentUpdate
• Only re-render when value is changed
• PureRenderMixin
KKbOX
Why Immutable?
• Immutable data is no side effect!
• Shared mutable state is the root of all evil - Pete Hunt
KKbOX
KKbOX
Why Immutable? (cont.)
• The reason why Om is faster than React
• Data or Value is immutable in Clojure
• Immutable + PureRenderMixin
KKbOX
facebook.github.io/immutable-js
KKbOX
Immutable.js
• It Implements immutable data structure in JavaScript
• Use the same algorithm with Clojure
KKbOX
PureRenderMixin implementationSimple but efficient
KKbOX
Flux & Relay
KKbOX
Flux & Relay
• Flux is an architecture
• Relay is designed for solving data fetching problem
KKbOX
Flux
• Unidirectional data flow
• Easy to debug
• It’s more of a pattern rather than a formal framework
KKbOX
Flux
KKbOX
Relay
• Relay is designed for solving data fetching problem
• Efficient
• Cache
• GraphQL
KKbOX
Relay Architecture
KKbOX
RelayContainer & Relay Store
KKbOX
Props coupling
KKbOX
KKbOX
Only modify 1 component
KKbOX
KKbOX
Component Communication
KKbOX
Component Communication
• It is a general problem
• Two scenarios
• Parent & Child
• No relationship
KKbOX
Parent & Child
• Pass props
• Use Callbacks
KKbOX
No Relationship• Global event system
• Flux
• Codecademy
• Adapter (broadcast)
• Channel (JS-CSP)
KKbOX
Adaptor
KKbOX
React Native
KKbOX
When ?
KKbOX
The reason to go native
KKbOX
React Native• No WebView, it uses JavaScript to control native UI.
• JavaScriptCore
• 3 pillars
• Touch Handling
• Native Components
• Style & Layout
• Reimplement Flex Box.
KKbOX
Benefits
KKbOX
Access to Platform ComponentsDifferent platforms have their own behaviours and styles
KKbOX
Instant UI change
KKbOX
Show errors on your face
KKbOX
Hard to figure out
KKbOX
Get benefits from existing solution
KKbOX
ComponentKit
KKbOX
Declarative
KKbOX
Same idea
KKbOX
The same conceptideally…
KKbOX
facebook Ads ManagerReact Native + Flux + Relay
KKbOX
facebook GroupsReact Native + Native Objective-C
KKbOX
nuclide.ioImplement on top of Atom
KKbOX
Conclusion
KKbOX
Conclusion• Learn once, write anywhere
• React makes reusable components possible
• Look forward to Flux & Relay + GraphQL
• Tooling
• nuclide
• Jest
KKbOX
Conclusion (cont.)
• React Native is amazing but you still need to learn how native (Android/iOS) works
• Embrace Immutable data structure to reduce complexity
• It is time to use ES6 & ES2015
• Functional Programming is hot
• immutable data structure & functions composition
• #clojure
KKbOX
Trending
• React-inspired View - ComponentKit
• Flux architecture in Server side or App
• Functional Programming
KKbOX
Functional Programming• Operates on streaming and abstracts your behaviours
• Clojure
• LISP
• Immutable data structure
• ClojureScript
• #clojure
KKbOX
FAQ