-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
460 lines (407 loc) · 21.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
<!DOCTYPE html>
<html lang="en">
<head>
<title>
SvelteScaling - Does Svelte Scale?
</title>
<meta name="description" content="SvelteScaling, deterimining whether Svelte scales and visualizing the results. Does Svelte scale? ">
<meta name="keywords" content="Svelte, js, javascript, node, analysis, node, plotly, data, react, vue, angular, spa">
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="apple-touch-icon" sizes="180x180" href="visualization/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="visualization/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="visualization/favicon/favicon-16x16.png">
<link rel="manifest" href="visualization/favicon/site.webmanifest">
<link rel="mask-icon" href="visualization/favicon/safari-pinned-tab.svg" color="#0355ea">
<link rel="shortcut icon" href="visualization/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#020202">
<meta name="msapplication-config" content="visualization/favicon/browserconfig.xml">
<meta name="theme-color" content="#020202">
<!-- Libraries -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://hyper-nav.acmion.com/+/dist/css/hyper-nav-default.min.css" />
<!-- Custom -->
<link rel="stylesheet" href="visualization/css/main.css" />
</head>
<body>
<header>
<nav class="hn-menu hn-top hn-fixed hn-shadow">
<input type="checkbox" name="hn-top-state" class="hn-input-state hn-input-state-nav hn-hide-desktop" id="hn-nav-cb">
<div class="hn-nav container-md p-0">
<div class="hn-section hn-section-brand">
<div class="hn-item">
<a id="hn-logo" class="hn-link" href="#home">
<span class="hn-content">
<strong style="font-weight: 600;">
SvelteScaling
</strong>
</span>
</a>
</div>
<div class="hn-spacer"></div>
<label class="hn-item hn-input hn-input-nav hn-hide-desktop" for="hn-nav-cb">
<span class="hn-link">
<span class="hn-content">
<span class="hn-input-active ">
<i class="ri-close-line"></i>
</span>
<span class="hn-input-default">
<i class="ri-menu-line"></i>
</span>
</span>
</span>
</label>
</div>
<div class="hn-section hn-section-body">
<div class="hn-spacer"></div>
<div class="hn-item">
<a class="hn-link" href="#home">
<span class="hn-content">
Home
</span>
</a>
</div>
<div class="hn-item">
<a class="hn-link" href="#conclusions">
<span class="hn-content">
Conclusions
</span>
</a>
</div>
<div class="hn-item">
<a class="hn-link" href="#methodology">
<span class="hn-content">
Methodology
</span>
</a>
</div>
<div class="hn-item">
<a class="hn-link" href="#analysis">
<span class="hn-content">
Analysis
</span>
</a>
</div>
<div class="hn-item">
<a class="hn-link" href="#reproduction">
<span class="hn-content">
Reproduction
</span>
</a>
</div>
<div class="hn-item">
<a class="hn-link" href="#credits">
<span class="hn-content">
Credits
</span>
</a>
</div>
<div class="hn-item">
<a class="hn-link" href="https://github.com/Acmion/SvelteScaling">
<span class="hn-content">
GitHub
</span>
</a>
</div>
</div>
</div>
<label class="hn-overlay" for="hn-nav-cb">
</label>
</nav>
</header>
<div class="scroll-anchor-height"></div>
<main class="container">
<section>
<h1 class="scroll-anchor" id="home">
SvelteScaling - Does Svelte Scale?
</h1>
<blockquote>
<p>
<strong>
"<a href="https://svelte.dev">Svelte</a> is a radical new approach to building user interfaces.
Whereas traditional frameworks like React and Vue do the bulk of their work in the browser,
Svelte shifts that work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically
updates the DOM when the state of your app changes."
</strong>
</p>
<footer>
Description of Svelte at <cite><a href="https://svelte.dev">svelte.dev</a></cite>.
</footer>
</blockquote>
<p>
This new way of building user interfaces has several benefits. The bundle size of Svelte is
generally smaller than its competitors. Additionally, Svelte often outperforms in both
general performance and memory usage, amongst other categories. See benchmarks at
<a href="https://krausest.github.io/js-framework-benchmark/index.html">js-framework-benchmark</a>.
This combined with the fact that Svelte's syntax is significantly cleaner than, for example, React's,
makes one wonder whether Svelte is the one framework to rule them all?
</p>
<p>
Svelte's approach has, however, a potential problem. Ditching the virtual DOM means that the incremental cost of
each Svelte component is higher than it would be when using a virtual DOM. In practice, this means that
there might be an inflection point, where the payload of other frameworks might actually be less than
that of Svelte. Other performance categories are unlikely to be affected by the payload size. This has been brought
up many times, see for example this <a href="https://github.com/sveltejs/svelte/issues/2546">GitHub issue</a>.
SvelteScaling aims to determine whether an inflection point exists and more generally, answer the question:
<strong>Does Svelte scale?</strong>
</p>
</section>
<section>
<h2 class="scroll-anchor" id="conclusions">
Conclusions
</h2>
<p>
This analysis concludes that the inflection point between Svelte and React lies at approximately <strong>137 KB</strong>
of component source code, after which the initial download of a gzipped Svelte application will be higher
than that of a gzipped React application. For uncompressed applications, the inflection point is a about
<strong>178 KB</strong>. <a href="https://github.com/halfnelson/svelte-it-will-scale">Will it Scale? - Finding Svelte's Inflection Point</a>
a similar study as SvelteScaling, approximated the gzipped inflection point to <strong>120 KB</strong>, which is
quite close to <strong>137 KB</strong>. This fact reinforces the validity of this analysis.
</p>
<p>
Is <strong>137 KB</strong> a lot or not? This is a list of some of the largest open source projects
and their component source size that I was able to find:
<ul>
<li>
<a href="https://github.com/echenley/react-news">React-News</a>: 24.4 KB
</li>
<li>
<a href="https://github.com/andrewngu/sound-redux">SoundRedux</a>: 87.5 KB
</li>
<li>
<a href="https://github.com/WebbyLab/itsquiz-wall">Isomorphic "Quiz Wall" for itsquiz.com</a>: 145 KB
</li>
<li>
<a href="https://github.com/reduxjs/redux/tree/master/examples/todomvc">Redux TodoMVC Example</a>: 23.8 KB
</li>
<li>
<a href="https://github.com/Automattic/wp-calypso">Calypso</a>: 3.82 MB
</li>
<li>
<a href="https://github.com/bestguy/sveltestrap">sveltestrap</a>: 73.7 KB
</li>
<li>
<a href="https://github.com/c0bra/svelma">Svelma</a>: 84.6 KB
</li>
<li>
<a href="https://github.com/IBM/carbon-components-svelte">carbon-components-svelte</a>: 418 KB
</li>
</ul>
Note that the reported component source size does not necessarily reflect the optimized application, since
all components may not be used (all components were used and instantiated in the analysis section). However,
<strong>137 KB</strong> seems to be enough in most cases. While <strong>137 KB</strong> of component source code
is certainly reachable for a SPA, the amount of components that a single view in an app references will unlikely
reach this limit. Thus, with code splitting techniques the initial download size will remain small and the app
will load fast.
</p>
<p>
Regardless of whether the initial payload of a Svelte application might be higher after a certain point,
I've still enjoyed Svelte a lot more than alternative frameworks. The syntax alone makes development with
Svelte a delight, especially now that TypeScript support has been implemented. All of this combined with the
benefits in runtime performance, makes Svelte an exceptional choice for frontend user interface development.
</p>
<p>
<strong>If React scales, then so does Svelte.</strong>
</p>
</section>
<section>
<h2 class="scroll-anchor" id="methodology">
Methodology
</h2>
<p>
The steps that are taken by SvelteScaling to determine whether Svelte scales:
<ol>
<li>
Create a framework specific project.
</li>
<li>
Import <strong>N</strong> components used in real world projects.
</li>
<li>
Reference and instantiate all imported components.
</li>
<li>
Build an optimized bundle of an application.
</li>
<li>
Measure the size of the source components and the size of the output bundle (and their gzipped variants).
</li>
<li>
Repeat this process for many different values of <strong>N</strong> and procure data.
</li>
<li>
Determine the relationship between source component and output bundle sizes and report and compare them with other frameworks.
</li>
<li>
Repeat the above steps for different frameworks.
</li>
<li>
Answer the question: <strong>Does Svelte scale?</strong>
</li>
</ol>
</p>
<p>
The entire analysis can be reproduced by running a few JavaScript scripts with NodeJS. See more details in the
<a href="">GitHub repo</a>.
</p>
</section>
<section>
<h2 class="scroll-anchor" id="analysis">
Analysis
</h2>
<p>
This section analyses how the component source size affects the bundle size of various frameworks.
</p>
<section>
<h3>
Combined
</h3>
<section>
<h5 class="text-center px-4">
Component Source Size VS Bundle Size
</h5>
<div id="source-vs-bundle-chart-combined"></div>
</section>
<section>
<h5>
Svelte & React Inflection Point
</h5>
<p>
Uncompressed: Approximately 178 KB of component source code.
<br />
Gzipped: Approximately 137 KB of component source code.
</p>
<p>
When the component source code is higher than the values above, then
the initial download of a Svelte app will be higher than that of a React
app.
</p>
</section>
</section>
<section>
<h3>
Svelte
</h3>
<section>
<h5 class="text-center px-4">
Component Source Size VS Bundle Size
</h5>
<div id="source-vs-bundle-chart-svelte"></div>
</section>
<section>
<h5>
Total Bundle Size Linear Regression Coefficients
</h5>
<p>
Slope: <span id="total-bundle-linear-regression-slope-svelte">xx</span>
<br />
Intercept: <span id="total-bundle-linear-regression-intercept-svelte">xx</span>
</p>
</section>
<section>
<h5>
Gzipped Total Bundle Size Linear Regression Coefficients
</h5>
<p>
Slope: <span id="total-bundle-gzipped-linear-regression-slope-svelte">xx</span>
<br />
Intercept: <span id="total-bundle-gzipped-linear-regression-intercept-svelte">xx</span>
</p>
</section>
</section>
<section>
<h3>
React
</h3>
<section>
<h5 class="text-center px-4">
Component Source Size VS Bundle Size
</h5>
<div id="source-vs-bundle-chart-react"></div>
</section>
<section>
<h5>
Total Bundle Size Linear Regression Coefficients
</h5>
<p>
Slope: <span id="total-bundle-linear-regression-slope-react">xx</span>
<br />
Intercept: <span id="total-bundle-linear-regression-intercept-react">xx</span>
</p>
</section>
<section>
<h5>
Gzipped Total Bundle Size Linear Regression Coefficients
</h5>
<p>
Slope: <span id="total-bundle-gzipped-linear-regression-slope-react">xx</span>
<br />
Intercept: <span id="total-bundle-gzipped-linear-regression-intercept-react">xx</span>
</p>
</section>
</section>
</section>
<section>
<h2 class="scroll-anchor" id="reproduction">
Reproduction
</h2>
<p>
To reproduce the analysis in this document, see the instructions in the <a href="https://github.com/Acmion/SvelteScaling">GitHub repository</a>.
</p>
</section>
<section>
<h2 class="scroll-anchor" id="credits">
Credits
</h2>
<p>
SvelteScaling was produced by <a href="https://acmion.com">Acmion</a> <a href="https://github.com/Acmion">(GitHub)</a>.
</p>
<p>
SvelteScaling was largely inspired by <a href="https://github.com/halfnelson/svelte-it-will-scale">halfnelson/svelte-it-will-scale</a>.
</p>
<section>
<h3>
Contributing
</h3>
<p>
Want to contribute? Head over to SvelteScaling's <a href="https://github.com/Acmion/SvelteScaling">GitHub repository</a>.
</p>
<p>
Things that could be done:
<ul>
<li>
Include real world projects, rather than just collection of components, in this analysis.
</li>
<li>
Include similar analysis of other frameworks, for example, Vue.
</li>
</ul>
</p>
</section>
</section>
</main>
<div style="height: 200px"></div>
<div>
<!-- Scripts -->
<!-- Libraries -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src='https://unpkg.com/simple-statistics@7.1.0/dist/simple-statistics.min.js'></script>
<!-- Custom -->
<script src="visualization/js/data-handler.js"></script>
<script src="visualization/js/elements.js"></script>
<script src="visualization/js/plot-settings.js"></script>
<script src="visualization/js/analysis.js"></script>
<script src="visualization/js/analysis-combined.js"></script>
<!-- JSONP Data -->
<script src="data/react-data.jsonp"></script>
<script src="data/svelte-data.jsonp"></script>
<!-- Initializer -->
<script src="visualization/js/main.js"></script>
</div>
</body>
</html>