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
160
Django Girls 2015 - CSS
randylien
1
110
Immutable, Performance and Component Communication
randylien
0
96
Introduce Flux & React in KKBOX
randylien
6
430
What is the next step for a front end beginner
randylien
1
86
Understand front end developer
randylien
2
180
Introduce Flux & React in practice
randylien
8
450
UI Engineering Introduction
randylien
0
46
Other Decks in Technology
See All in Technology
サーバシステムを無理なくコンテナ移行する際に伝えたい4つのポイント/Container_Happy_Migration_Method
ozawa
1
120
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
8
740
AWSエンジニアがSAPのデータ抽出してみた
mayumi_hirano
0
110
大規模サービスにおける カスケード障害
takumiogawa
3
770
OPENLOGI Company Profile for engineer
hr01
1
23k
AWS CDK コントリビュート はじめの一歩
yendoooo
1
130
数百台のオンプレミスのサーバーをEKSに移行した話
yukiteraoka
0
770
Re:VIEWで書いた「Compose で Android の edge-to-edge に対応する」をRoo Codeで発表資料にしてもらった
tomoya0x00
0
240
ゆるくVPC Latticeについてまとめてみたら、意外と奥深い件
masakiokuda
2
200
自分の軸足を見つけろ
tsuemura
1
150
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.3k
Symfony in 2025: Scaling to 0
fabpot
2
270
Featured
See All Featured
Faster Mobile Websites
deanohume
306
31k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
What's in a price? How to price your products and services
michaelherold
245
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
A better future with KSS
kneath
239
17k
Scaling GitHub
holman
459
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
25k
Automating Front-end Workflow
addyosmani
1369
200k
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