immutable, performance and components communication
TRANSCRIPT
![Page 2: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/2.jpg)
About Me
• @randylien
• Front end developer
![Page 3: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/3.jpg)
Agenda
• Immutable
• Performance
• Components Communication
• Conclusion
![Page 4: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/4.jpg)
Functional Programming
![Page 5: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/5.jpg)
![Page 6: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/6.jpg)
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
![Page 7: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/7.jpg)
![Page 8: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/8.jpg)
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
![Page 9: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/9.jpg)
Simple Made Easy
![Page 10: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/10.jpg)
Performance
![Page 11: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/11.jpg)
Performance
• Pure Component (prop & state)
• shouldComponentUpdate
• Don’t update when its the same
![Page 12: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/12.jpg)
Performance (cont.)• Container Component Pattern
• Container Component as Data Layer
• Data fetching
• Component is all about its behaviour
• Testing Container or Gallery Container
![Page 13: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/13.jpg)
Components Communication
![Page 14: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/14.jpg)
How to Communicate• Parent - Children
• Use Callbacks
• No relationship
• Global event hub
• Flux
• Codecademy
• Adapter, broadcast
• Channel (CSP)
• Cursor (react-cursor)
![Page 15: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/15.jpg)
![Page 16: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/16.jpg)
Conclusion
![Page 17: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/17.jpg)
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
![Page 18: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/18.jpg)
![Page 19: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/19.jpg)
Conclusion(cont.)
• Watch Simple made easy
• Try Clojure/ClojureScript
![Page 20: Immutable, performance and components communication](https://reader031.vdocuments.mx/reader031/viewer/2022032218/55aa68531a28abdc758b4742/html5/thumbnails/20.jpg)
FAQ