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
Scaling React.js Applications
Search
Max Stoiber
July 04, 2016
Technology
0
380
Scaling React.js Applications
Max Stoiber
July 04, 2016
Tweet
Share
More Decks by Max Stoiber
See All by Max Stoiber
Testing React Applications
mxstbr
3
280
Styling Intro
mxstbr
3
360
Introduction to React.js
mxstbr
1
140
Styling React Applications
mxstbr
2
550
Scaling React.js Applications (short version)
mxstbr
2
360
Offline is the new Black
mxstbr
3
950
Exploring ES6
mxstbr
1
310
Testing React.js Applications
mxstbr
4
510
Other Decks in Technology
See All in Technology
KongによるAPIライフサイクル マネジメント
hashitokyo
1
160
ゼロからはじめる生成AI〜AWS認定とハンズオンで学ぶ初心者の道〜
kenichinakamura
0
140
Delta Commit…の最近...
akuwano
2
130
AWS Step Functionsのタスク入出力に秩序を与えよう
y_kotani
0
110
運営11年目タイトルを守る最強の盾の有効性と活用法
mixi_engineers
PRO
2
120
本番のトラフィック量でHudiを検証して見えてきた課題
joker1007
2
270
Amplify Gen 2ではじめる 生成AIアプリ開発入門
tsukuboshi
0
400
自然言語処理を役立てるのはなぜ難しいのか
pfn
PRO
17
4.5k
Rist_Meetup_Kaggleは業務の役にたつ - ビジネスコンテンツ情報を活用する BtoB 事業編 - / rist-meetup-20241012
taro_masuda
1
350
RAG: from dumb implementation to serious results
glaforge
0
670
Unlearn Modularity
lemiorhan
6
310
いまいまMySQL2024 @ OSC Nagaoka
sakaik
3
300
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Done Done
chrislema
181
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
106
48k
Testing 201, or: Great Expectations
jmmastey
38
7k
Building an army of robots
kneath
302
42k
Statistics for Hackers
jakevdp
796
220k
Rails Girls Zürich Keynote
gr2m
93
13k
How GitHub (no longer) Works
holman
311
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Faster Mobile Websites
deanohume
304
30k
Building Your Own Lightsaber
phodgson
102
6k
Transcript
Scaling React.js Applications Max Stoiber, @mxstbr Open Source Developer, Thinkmill
@mxstbr
KeystoneJS
ElementalUI
@mxstbr
@mxstbr
@mxstbr 2. State Management 3. Architecture 1. What is Scalability?
4. Performance
@mxstbr 2. State Management 3. Architecture 1. What is Scalability?
4. Performance
@mxstbr 2. State Management 3. Architecture 1. What is Scalability?
4. Performance
@mxstbr
@mxstbr
@mxstbr
@mxstbr Unidirectional Data Flow
@mxstbr Store
@mxstbr
@mxstbr 2. State Management 3. Architecture 1. What is Scalability?
4. Performance
@mxstbr Containers and Components
@mxstbr Structure
@mxstbr Traditionally grouped by type
@mxstbr react-app-by-type !"" css !"" actions # $"" NavBarActions.js !""
containers # $"" NavBar.js !"" constants # $"" NavBarConstants.js !"" components # $"" App.js $"" reducers $"" NavBarReducer.js
@mxstbr Group by feature instead
@mxstbr react-app-by-feature !"" css !"" containers # $"" NavBar #
!"" NavBar.js # !"" actions.js # !"" constants.js # $"" reducer.js $"" components $"" App.js
@mxstbr Easy renaming and moving
@mxstbr import { toggleNav } from ‘containers/NavBar/actions.js’;
@mxstbr import { toggleNav } from ‘containers/PrimaryNav/actions.js’;
@mxstbr Work in a single folder
@mxstbr Reusable components
@mxstbr Styling??
@mxstbr .header { /* … */ } .title { background-color:
yellow; } .footer { /* … */ } .title { border-color: blue; } Conflict! Naming
@mxstbr CSS Modules
@mxstbr import styles from ‘styles.css’; render() { return ( <div
className={styles.footer} /> ); }
@mxstbr .footer { /* … */ } .title { /*
… */ } .MyApp__footer__1co1k { /* … */ } .MyApp__title__2fgr5s { /* … */ }
@mxstbr .header { line-height: 1.5em; } a { line-height: 1.5em;
} .title { line-height: 1.5em; } Inheritance
@mxstbr .header { line-height: 1.5em; } .title { line-height: 1.5em;
} Inheritance .footer { line-height: 1em; } .title { line-height: 1em; } Conflict!
@mxstbr Reset Header Title Global Reset Reset Header Local Reset
Reset Title
@mxstbr PostCSS
@mxstbr PostCSS + postcss-autoreset
@mxstbr .header { line-height: 1.5em; } a { line-height: default;
} .title { line-height: default; }
@mxstbr react-app-by-feature !"" containers # $"" NavBar # !"" NavBar.js
# !"" actions.js # !"" constants.js # !"" styles.css # $"" reducer.js $"" components $"" App.js
@mxstbr Component Isolation!
@mxstbr Data Fetching??
@mxstbr <Clock /> <Timer />
@mxstbr <Clock onStartClick={ dipatch(startTimer()) } /> <Timer onStopClick={ dispatch(showTime()) }
/>
@mxstbr redux-saga
@mxstbr <Clock onStartClick={ dipatch(startClicked()) } /> <Timer onStopClick={ dispatch(stopClicked()) }
/>
@mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());
yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
@mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());
yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
@mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());
yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
@mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());
yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
@mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());
yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
@mxstbr Decoupled Components
@mxstbr 2. Group files by feature 3. Isolate Styling 1.
Containers and Components 4. Use redux-saga
@mxstbr 2. State Management 3. Architecture 1. What is Scalability?
4. Performance
@mxstbr Webpack Code Splitting
@mxstbr
@mxstbr
@mxstbr
@mxstbr
@mxstbr
@mxstbr shouldComponentUpdate
@mxstbr
@mxstbr class NavBar extends React.Component { shouldComponentUpdate(nextProps) { ????? }
}
@mxstbr class NavBar extends React.Component { shouldComponentUpdate(nextProps) { return nextProps
!== this.props; } }
@mxstbr { “username”: “@mxstbr” } { “username”: “@mxstbr” } !==
@mxstbr Deeply comparing objects is expensive
@mxstbr ImmutableJS
@mxstbr import { fromJS } from ‘immutable’; const state =
fromJS({ “username”: “@mxstbr” });
@mxstbr .equals fromJS({ “username”: “@mxstbr” }) fromJS({ “username”: “@mxstbr” })
@mxstbr Deeply comparing objects is cheap!
@mxstbr
@mxstbr
@mxstbr 2. State Management 3. Architecture 1. What is Scalability?
4. Performance
Thanks for having me! Tweet comments/feedback to @mxstbr Come talk
to me!