Immutable
Performance
Randy Lien
@React.JS TW 第五次⼩小聚
Slide 2
Slide 2 text
About Me
• @randylien
• Front end developer
Slide 3
Slide 3 text
Agenda
• Immutable
• Performance
• Components Communication
• Conclusion
Slide 4
Slide 4 text
Functional
Programming
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Why Immutable?
• Immutable data has no side effect!
• Shared mutable state is the root of all evil
- Pete Hunt
• You will not get hurt by yourself or someone
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Why Immutable? (cont.)
• Immutable.js is fast enough and memory
optimisation
• Why Om is faster ? Data or Value is immutable in
Clojure/ClojureScript
• Immutable + PureRenderMixin
Slide 9
Slide 9 text
Simple Made Easy
Slide 10
Slide 10 text
Performance
Slide 11
Slide 11 text
Performance
• Pure Component (prop & state)
• shouldComponentUpdate
• Don’t update when its the same
Slide 12
Slide 12 text
Performance (cont.)
• Container Component Pattern
• Container Component as Data Layer
• Data fetching
• Component is all about its behaviour
• Testing Container or Gallery Container
Slide 13
Slide 13 text
Components
Communication
Slide 14
Slide 14 text
How to Communicate
• Parent - Children
• Use Callbacks
• No relationship
• Global event hub
• Flux
• Codecademy
• Adapter, broadcast
• Channel (CSP)
• Cursor (react-cursor)
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Conclusion
Slide 17
Slide 17 text
Conclusion
• Embracing Immutable data for the future (JavaScript)
development
• Componentize your User Interface
• Loose coupling your component
• Container Component
• General Component
• You can pick the suitable solution for your needs
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Conclusion(cont.)
• Watch Simple made easy
• Try Clojure/ClojureScript