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
170
Django Girls 2015 - HTML
randylien
1
160
Django Girls 2015 - CSS
randylien
1
110
Immutable, Performance and Component Communication
randylien
0
91
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
170
Introduce Flux & React in practice
randylien
8
450
UI Engineering Introduction
randylien
0
42
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
29
13k
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
Engineer Career Talk
lycorp_recruit_jp
0
190
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
100
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
190
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
880
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
1
200
日経電子版のStoreKit2フルリニューアル
shimastripe
1
150
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
TypeScript、上達の瞬間
sadnessojisan
46
13k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Designing Experiences People Love
moore
138
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Rails Girls Zürich Keynote
gr2m
94
13k
Automating Front-end Workflow
addyosmani
1366
200k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The World Runs on Bad Software
bkeepers
PRO
65
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