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 Applications
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Stepan Parunashvili
June 02, 2016
Technology
2
110
Scaling React Applications
On Scaling React Applications, at Applicative 2016
Stepan Parunashvili
June 02, 2016
Tweet
Share
More Decks by Stepan Parunashvili
See All by Stepan Parunashvili
Universal Applications
stopachka
0
82
Engineering Growth
stopachka
0
61
Universal Applications
stopachka
1
92
ES2015 & React
stopachka
0
63
ES2015
stopachka
0
68
Other Decks in Technology
See All in Technology
AI が Approve する開発フロー / How AI Reviewers Accelerate Our Development
zaimy
1
200
社内でAWS BuilderCards体験会を立ち上げ、得られた気づき / 20260225 Masaki Okuda
shift_evolve
PRO
1
120
LY Tableauでの Tableau x AIの実践 (at Tableau Now! - 2026-02-26)
yoshitakaarakawa
0
550
AI活用を"目的"にしたら、データの本質が見えてきた - Snowflake Intelligence実験記 / chasing-ai-finding-data
pei0804
0
640
GitHub Copilot CLI 現状確認会議(2026年2月のすがた)
torumakabe
4
640
Kubernetes環境周りの責任範囲をいい機会なので考える / Taking the Opportunity to Clarify Kubernetes Responsibilities
kohbis
1
110
「静的解析」だけで終わらせない。 SonarQube の最新機能 × AIで エンジニアの開発生産性を本気で上げる方法
xibuka
2
300
「使いにくい」も「運用疲れ」も卒業する UIデザイナーとエンジニアが創る持続可能な内製開発
nrinetcom
PRO
0
400
パネルディスカッション資料 (at Tableau Now! - 2026-02-26)
yoshitakaarakawa
0
360
2026年のAIエージェント構築はどうなる?
minorun365
11
2.4k
LINEアプリ開発のための Claude Code活用基盤の構築
lycorptech_jp
PRO
1
980
Three-Legged OAuth in AgentCore Gateway
hironobuiga
2
200
Featured
See All Featured
Code Review Best Practice
trishagee
74
20k
Paper Plane
katiecoart
PRO
0
47k
Scaling GitHub
holman
464
140k
Abbi's Birthday
coloredviolet
2
5k
How GitHub (no longer) Works
holman
316
140k
How to Ace a Technical Interview
jacobian
281
24k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
400
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
80
Technical Leadership for Architectural Decision Making
baasie
2
270
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
620
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
970
Transcript
On Scaling React Applications Stepan Parunashvili 1
@stopachka www.stepanp.com 2
3 Scaling React Applications?
4 Scaling React Applications?
Scaling Your Team 5
6 # engineers output
7 # engineers output
8 # engineers output
9 # engineers output
Scaling Your Product 10
11 LOC # features
12 LOC # features rewrite
13 LOC # features
Goal: Scale Frontend 14
Why React? 15
16
...2015 17
...2014 18
...2013 19
...2012 20
...2011 21
2010 22
23
24 v0.1.0
25
26
27
28
29
30
increment append, decrement, replace 31
Now... 32
33
34
35
36
37
Problem: Keep the DOM in Sync 38
39
40
41
42
2011... 43
2012... 44
2013 45
46
47
48
declarative 49
50
composable 51
52
cohesive 53
54
declarative composable cohesive 55
What's next? 56
57
58
59
How do we do this? 60
Container Components 61
62 props @huang47
63 FooContainer
64 FooContainer Foo
65 FooContainer Foo handle data ui logic
66
Why? 67
68 Container Components • manage data
69 Container Components • manage data • ui logic
70 Container Components • manage data • ui logic •
reusable
71 Container Components • manage data • ui logic •
reusable • tests needed
72 UI Components • manage data • ui logic •
reusable • tests needed
73
74
75
76
77
78
79
80
timeout/retry 81
timeout/retry batch 82
timeout/retry batch filter params 83
84
85
86
87
88
89
90
91
Expose UI Components 92
93
94
95 UI Component
96 container container
* Works best with Redux 97
98
99
100 Containers to Manage Data Expose UI Components Keep a
single app state
What's next? 101
102
103 Step: Action Fired
104 Step: Diff Virtual DOM
105 Step: Apply changeset
106 Step: Diff Virtual DOM
107 Step: Diff Virtual DOM :0
None
None
None
None
None
1 year later... 113
1 year later... 114
None
ImmutableJS 116
None
None
None
None
None
Structural Sharing 122
None
None
Robust by Default 125
None
None
None
None
None
Records 131
None
None
None
None
What's next? 136
HOC 137
None
Implicit Contracts 139
Implicit Contracts State Clashes 140
Implicit Contracts State Clashes Performance Issues 141
None
None
Push difficulties towards the core 144
On JS Fatigue 145
Stick to Principles 146
Could this be a paradigm shift? 147
Could this level the playing field? 148
Could this reduce iteration time? 149
For now, 150
Use Container Components Use Immutable Data Use FP 151
Bonus: relay, redux-saga css-modules 152
Thank you :) 153