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
400
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
310
Styling Intro
mxstbr
3
370
Introduction to React.js
mxstbr
1
150
Styling React Applications
mxstbr
2
620
Scaling React.js Applications (short version)
mxstbr
2
410
Offline is the new Black
mxstbr
3
1k
Exploring ES6
mxstbr
1
320
Testing React.js Applications
mxstbr
4
610
Other Decks in Technology
See All in Technology
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
cohalz
1
490
Swiftは最高だよの話
yuukiw00w
2
290
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
11
5.2k
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
360
Houtou.pm #1
papix
0
690
RDRA3.0を知ろう
kanzaki
3
450
GitHub Copilot Use Cases at ZOZO
horie1024
0
170
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
530
面接を通過するためにやってて良かったこと3選
sansantech
PRO
0
140
CSS polyfill とその未来
ken7253
0
150
為什麼我們需要 Observability?
marcustung
0
260
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Making Projects Easy
brettharned
116
6.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
850
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Designing for Performance
lara
608
69k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
A Tale of Four Properties
chriscoyier
159
23k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Applications with DynamoDB
mza
95
6.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.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!