immutable, performance and components communication

Immutable Performance

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

About Me

• @randylien

• Front end developer

Agenda

• Immutable

• Performance

• Components Communication

• Conclusion

Functional Programming

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

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

Simple Made Easy

Performance

Performance

• Pure Component (prop & state)

• shouldComponentUpdate

• Don’t update when its the same

Performance (cont.)• Container Component Pattern

• Container Component as Data Layer

• Data fetching

• Component is all about its behaviour

• Testing Container or Gallery Container

Components Communication

How to Communicate• Parent - Children

• Use Callbacks

• No relationship

• Global event hub

• Flux

• Codecademy

• Adapter, broadcast

• Channel (CSP)

• Cursor (react-cursor)

Conclusion

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

Conclusion(cont.)

• Watch Simple made easy

• Try Clojure/ClojureScript

FAQ