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 (short version)
Search
Max Stoiber
September 16, 2016
Technology
2
410
Scaling React.js Applications (short version)
25 minute super-speed introduction to scaling react applications!
Max Stoiber
September 16, 2016
Tweet
Share
More Decks by Max Stoiber
See All by Max Stoiber
Testing React Applications
mxstbr
3
320
Styling Intro
mxstbr
3
380
Introduction to React.js
mxstbr
1
150
Styling React Applications
mxstbr
2
630
Scaling React.js Applications
mxstbr
0
410
Offline is the new Black
mxstbr
3
1k
Exploring ES6
mxstbr
1
320
Testing React.js Applications
mxstbr
4
620
Other Decks in Technology
See All in Technology
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.5k
Operating Operator
shhnjk
1
580
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
190
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.2k
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
120
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
120
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Writing Fast Ruby
sferik
628
62k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Agile that works and the tools we love
rasmusluckow
329
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Balancing Empowerment & Direction
lara
1
430
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Transcript
Scaling React.js Applications Max Stoiber, @mxstbr Open Source Developer, Thinkmill
@mxstbr
KeystoneJS
ElementalUI
@mxstbr
@mxstbr
@mxstbr 2. Architecture 3. Performance 1. What is Scalability?
@mxstbr 2. Architecture 3. Performance 1. What is Scalability?
“[Scalability] is the capability of a system to be enlarged…”
Wikipedia
@mxstbr 2. Architecture 3. Performance 1. What is Scalability?
@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 redux-thunk?
@mxstbr function fetchData() { return (dispatch) => { dispatch(dataFetching()); fetch(‘myapi.com/‘,
(data) => { dispatch(dataFetched(data)); }); } }
@mxstbr function fetchData() { return (dispatch) => { dispatch(dataFetching()); fetch(‘myapi.com/‘,
(data) => { // TODO: Error handling dispatch(dataFetched(data)); }); } }
@mxstbr redux-saga
@mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());
const data = yield call(fetch(‘myapi.com/'); put(dataFetched(data)); } }
@mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());
const data = yield call(fetch(‘myapi.com/'); put(dataFetched(data)); } }
@mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());
const data = yield call(fetch(‘myapi.com/'); put(dataFetched(data)); } }
@mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());
const data = yield call(fetch(‘myapi.com/'); put(dataFetched(data)); } }
@mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());
const data = yield call(fetch(‘myapi.com/'); put(dataFetched(data)); } }
@mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());
const data = yield call(fetch(‘myapi.com/'); // TODO: Error handling put(dataFetched(data)); } }
@mxstbr <Clock /> <Timer />
@mxstbr <Clock onStartClick={ dipatch(startTimer()) } /> <Timer onStopClick={ dispatch(showTime()) }
/>
@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. Architecture 3. Performance 1. What is Scalability?
@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. Architecture 3. Performance 1. What is Scalability?
Thanks for having me! Tweet comments/feedback to @mxstbr Come talk
to me!