Immutable, Performance and Component Communication

React.JS TW fifth meetup

Transcript

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