Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Immutable, Performance and Component Communication
Search
Randy Lien
March 23, 2015
Programming
0
100
Immutable, Performance and Component Communication
React.JS TW fifth meetup
Randy Lien
March 23, 2015
Tweet
Share
More Decks by Randy Lien
See All by Randy Lien
The ideas of Clojure - Things I learn from Clojure
randylien
0
180
Django Girls 2015 - HTML
randylien
1
170
Django Girls 2015 - CSS
randylien
1
110
React.JS Conf & f8
randylien
1
210
Introduce Flux & React in KKBOX
randylien
6
430
What is the next step for a front end beginner
randylien
1
88
Understand front end developer
randylien
2
190
Introduce Flux & React in practice
randylien
8
450
UI Engineering Introduction
randylien
0
50
Other Decks in Programming
See All in Programming
Design Foundational Data Engineering Observability
sucitw
3
190
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
150
🔨 小さなビルドシステムを作る
momeemt
4
680
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
360
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
430
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
160
RDoc meets YARD
okuramasafumi
4
170
私の後悔をAWS DMSで解決した話
hiramax
4
210
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
190
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building Applications with DynamoDB
mza
96
6.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Scaling GitHub
holman
463
140k
Done Done
chrislema
185
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Statistics for Hackers
jakevdp
799
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
For a Future-Friendly Web
brad_frost
180
9.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Facilitating Awesome Meetings
lara
55
6.5k
Transcript
Immutable Performance Randy Lien @React.JS TW 第五次⼩小聚
About Me • @randylien • Front end developer
Agenda • Immutable • Performance • Components Communication • Conclusion
Functional Programming
None
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
None
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)
None
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
None
Conclusion(cont.) • Watch Simple made easy • Try Clojure/ClojureScript
FAQ