React.JS TW fifth meetup

1. Immutable
Performance
Randy Lien
@React.JS TW 第五次⼩小聚

2. About Me
• @randylien
• Front end developer

3. Agenda
• Immutable
• Performance
• Components Communication
• Conclusion

4. Functional
Programming

6. 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

8. 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

9. Simple Made Easy

10. Performance

11. Performance
• Pure Component (prop & state)
• shouldComponentUpdate
• Don’t update when its the same

12. Performance (cont.)
• Container Component Pattern
• Container Component as Data Layer
• Data fetching
• Component is all about its behaviour
• Testing Container or Gallery Container

13. Components
Communication

14. How to Communicate
• Parent - Children
• Use Callbacks
• No relationship
• Global event hub
• Flux
• Codecademy
• Adapter, broadcast
• Channel (CSP)
• Cursor (react-cursor)

16. Conclusion

17. 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

19. Conclusion(cont.)
• Watch Simple made easy
• Try Clojure/ClojureScript

20. FAQ