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
Stepan Parunashvili
June 02, 2016
Technology
2
90
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
66
Engineering Growth
stopachka
0
45
Universal Applications
stopachka
1
76
ES2015 & React
stopachka
0
40
ES2015
stopachka
0
52
Other Decks in Technology
See All in Technology
MySQL Indexes and Histograms – How they really speed up your queries
lefred
0
150
Microsoft Fabric vs Databricks vs (Snowflake) -若手エンジニアがそれぞれの強みと違いを比較してみた- "A Young Engineer's Comparison of Their Strengths and Differences"
reireireijinjin6
1
140
3D生成AIのための画像生成
kosukeito
2
600
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
16
5.1k
本当に必要なのは「QAという技術」だった!試行錯誤から生まれた、品質とデリバリーの両取りアプローチ / Turns Out, "QA as a Discipline" Was the Key!
ar_tama
9
2.7k
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
580
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
150
社会人力と研究力ー博士号をキャリアの武器にするー
kentaro
2
110
C++26アップデート 2025-03
faithandbrave
0
1.2k
Computer Use〜OpenAIとAnthropicの比較と将来の展望〜
pharma_x_tech
6
990
非root化Androidスマホでも動く仮想マシンアプリを試してみた
arkw
0
110
テストって楽しい!開発を加速させるテストの魅力 / Testing is Fun! The Fascinating of Testing to Accelerate Development
aiandrox
0
160
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Six Lessons from altMBA
skipperchong
28
3.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.6k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Docker and Python
trallard
44
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Being A Developer After 40
akosma
91
590k
The Cost Of JavaScript in 2023
addyosmani
49
7.8k
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