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
170
Django Girls 2015 - HTML
randylien
1
160
Django Girls 2015 - CSS
randylien
1
110
Immutable, Performance and Component Communication
randylien
0
93
Introduce Flux & React in KKBOX
randylien
6
430
What is the next step for a front end beginner
randylien
1
84
Understand front end developer
randylien
2
180
Introduce Flux & React in practice
randylien
8
450
UI Engineering Introduction
randylien
0
44
Other Decks in Technology
See All in Technology
アジャイル開発とスクラム
araihara
0
160
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
Larkご案内資料
customercloud
PRO
0
600
RSNA2024振り返り
nanachi
0
500
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
2.5Dモデルのすべて
yu4u
2
610
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
データの品質が低いと何が困るのか
kzykmyzw
6
1k
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
君も受託系GISエンジニアにならないか
sudataka
1
370
All you need to know about InnoDB Primary Keys
lefred
0
120
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Designing Experiences People Love
moore
139
23k
It's Worth the Effort
3n
184
28k
Code Review Best Practice
trishagee
66
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
GraphQLとの向き合い方2022年版
quramy
44
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
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