SPA State Management Demo

This repo demo how to do simple state update (and trigger re-render) with varies of SPA framework.

The example used is simply getting two numbers from input, then display the sum.

Comparison

Framework / Tool	# Significant Expression*	Required LoC*	Size** of node_modules	Size** of Built File***
Svelte	7	19	22M	17.4K
Angular	7	38	242M	155.8K
Vue	10	43	101M	49.3K
Stencil	11	48	16M	13.7K
React	14	32	205M	144.6K
Vanilla	10	16	0B	0.3K

*: the lower, the better

**: file size are in unit of MB or KB (powers of 1024), measured with du -sh --apparent-size node_modules

***: excluded *.map files

LoC: line of code

Remark: the vanilla html file is minified with minify

Svelte

• App.svelte

Angular

• app.component.ts
• app.component.html
• app.component.css
• app.module.ts

Vue

• App.vue

Stencil

• my-component.tsx
• my-component.css

React

• App.tsx
• App.css

Vanilla

• index.html