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
200
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
160
Django Girls 2015 - HTML
randylien
1
160
Django Girls 2015 - CSS
randylien
1
97
Immutable, Performance and Component Communication
randylien
0
87
Introduce Flux & React in KKBOX
randylien
6
420
What is the next step for a front end beginner
randylien
1
82
Understand front end developer
randylien
2
140
Introduce Flux & React in practice
randylien
8
440
UI Engineering Introduction
randylien
0
37
Other Decks in Technology
See All in Technology
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
250
本当のAWS基礎
toru_kubota
1
540
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
320
いいたいことちゃんという
tkengo
0
110
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
850
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
370
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
390
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
620
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
870
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
110
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
310
Featured
See All Featured
KATA
mclloyd
15
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Facilitating Awesome Meetings
lara
42
5.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Faster Mobile Websites
deanohume
299
30k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
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