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
React.JS Conf & f8
Search
Randy Lien
March 27, 2015
Technology
1
210
React.JS Conf & f8
It is my React.JS conference and f8 sharing.
Randy Lien
March 27, 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
Immutable, Performance and Component Communication
randylien
0
99
Introduce Flux & React in KKBOX
randylien
6
430
What is the next step for a front end beginner
randylien
1
87
Understand front end developer
randylien
2
180
Introduce Flux & React in practice
randylien
8
450
UI Engineering Introduction
randylien
0
49
Other Decks in Technology
See All in Technology
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
20250719_JAWS_kobe
takuyay0ne
1
130
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
1.8k
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
5
1.2k
AIコードアシスタントとiOS開発
jollyjoester
1
200
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
5
3.4k
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
6
3.4k
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
26
7.4k
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
130
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
1.1k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1.2k
Frontier Airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
frontierairlineswithflyagent
0
100
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.8k
Become a Pro
speakerdeck
PRO
29
5.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A designer walks into a library…
pauljervisheath
207
24k
Automating Front-end Workflow
addyosmani
1370
200k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Transcript
KKbOX React.JS Conf & F8 Randy Lien
KKbOX Agenda • Introduce React.js Conf • Highlight • Conclusion
• FAQ
KKbOX Introduce React.js Conf
KKbOX
KKbOX
KKbOX
KKbOX
KKbOX
KKbOX
KKbOX
KKbOX
KKbOX Introduction • 2015/1/28 ~ 1/29 @Facebook HQ, CA •
160~ • 18 sessions + 2 panels • Tickets sold out in 1 minutes (3 waves)
KKbOX Highlight
KKbOX Highlight • Performance • Flux & Relay • Component
Communication • React Native
KKbOX Performance
KKbOX The Keys to React Performance • How to render
• When to render
KKbOX Solutions • Virtual DOM • Optimistic re-rendering
KKbOX Optimistic re-rendering • Pure Component (prop, state) • Immutable
data • shouldComponentUpdate • Only re-render when value is changed • PureRenderMixin
KKbOX Why Immutable? • Immutable data is no side effect!
• Shared mutable state is the root of all evil - Pete Hunt
KKbOX
KKbOX Why Immutable? (cont.) • The reason why Om is
faster than React • Data or Value is immutable in Clojure • Immutable + PureRenderMixin
KKbOX facebook.github.io/immutable-js
KKbOX Immutable.js • It Implements immutable data structure in JavaScript
• Use the same algorithm with Clojure
KKbOX PureRenderMixin implementation Simple but efficient
KKbOX Flux & Relay
KKbOX Flux & Relay • Flux is an architecture •
Relay is designed for solving data fetching problem
KKbOX Flux • Unidirectional data flow • Easy to debug
• It’s more of a pattern rather than a formal framework
KKbOX Flux
KKbOX Relay • Relay is designed for solving data fetching
problem • Efficient • Cache • GraphQL
KKbOX Relay Architecture
KKbOX RelayContainer & Relay Store
KKbOX Props coupling
KKbOX
KKbOX Only modify 1 component
KKbOX
KKbOX Component Communication
KKbOX Component Communication • It is a general problem •
Two scenarios • Parent & Child • No relationship
KKbOX Parent & Child • Pass props • Use Callbacks
KKbOX No Relationship • Global event system • Flux •
Codecademy • Adapter (broadcast) • Channel (JS-CSP)
KKbOX Adaptor
KKbOX React Native
KKbOX When ?
KKbOX The reason to go native
KKbOX React Native • No WebView, it uses JavaScript to
control native UI. • JavaScriptCore • 3 pillars • Touch Handling • Native Components • Style & Layout • Reimplement Flex Box.
KKbOX Benefits
KKbOX Access to Platform Components Different platforms have their own
behaviours and styles
KKbOX Instant UI change
KKbOX Show errors on your face
KKbOX Hard to figure out
KKbOX Get benefits from existing solution
KKbOX ComponentKit
KKbOX Declarative
KKbOX Same idea
KKbOX The same concept ideally…
KKbOX facebook Ads Manager React Native + Flux + Relay
KKbOX facebook Groups React Native + Native Objective-C
KKbOX native.reactjs.com
KKbOX nuclide.io Implement on top of Atom
KKbOX Conclusion
KKbOX Conclusion • Learn once, write anywhere • React makes
reusable components possible • Look forward to Flux & Relay + GraphQL • Tooling • nuclide • Jest
KKbOX Conclusion (cont.) • React Native is amazing but you
still need to learn how native (Android/iOS) works • Embrace Immutable data structure to reduce complexity • It is time to use ES6 & ES2015 • Functional Programming is hot • immutable data structure & functions composition • #clojure
KKbOX Trending • React-inspired View - ComponentKit • Flux architecture
in Server side or App • Functional Programming
KKbOX Functional Programming • Operates on streaming and abstracts your
behaviours • Clojure • LISP • Immutable data structure • ClojureScript • #clojure
KKbOX FAQ