Flexible web application architecture
This project demonstrates a scalable, flexible, and framework-neutral JavaScript web application architecture.
Frameworks
The selection of the following frameworks depends on this report and benchmark.
| Characteristic | Angular | AngularJS | Aurelia | Inferno | Preact | React | Svelte | Vanilla | Vue | [Vue3] |
|---|---|---|---|---|---|---|---|---|---|---|
| Version | 10.1 | 1.8 | 1.3 | 7.4 | 10.4 | 16.13 | 3.24 | - | 2.6 (Composition API) | 3.0-rc |
| Artifact size | 598 KiB | 213 KiB | 354 KiB | 52.4 KiB | 47.9 KiB | 160 KiB | 45.3 KiB | 31.8 KiB | 114 KiB | - KiB |
| Upcomming time | ~53.5 ms | ~50 ms | ~10 ms | ~11 ms | ~12 ms | ~13 ms | ~13 ms | - | ~18 ms | - ms |
| Performance test | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| Devtools | ✔️ | ✔️ | ⌛ | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
| Router | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| DI | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| SPA | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| PWA | ✔️ | ✔️ | ⌛ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| SSR | ✔️ | ✔️ | ⌛ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| Internet Explorer* | ❌ | ✔️ | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ❌ | ✔️ | ✔️ |
| Framework CLI | ✔️ (253 KB) | ❌ | ✔️** | ❌ | ❌ | ❌ | ❌ | ❌ | ✔️ (121 KB) | ✔️ |
| Scoped App | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
| Language Support | ✔️ | ⌛ | ⌛ | ✔️ JSX/TSX | ✔️ JSX/TSX | ✔️ JSX/TSX | ⌛ | ✔️ | ✔️ | ✔️ |
* Maybe more polyfills are required for IE.
** The Aurelia CLI can not be used for this project.
Devtools
- Angular Devtools and language support
- AngularJS Devtools
- React Devtools, also for Inferno and Preact and language support
- Svelte Devtools
- Vue Devtools and language support
References
- https://github.com/infernojs/inferno-typescript-example
- https://medium.com/js-dojo/how-to-configure-webpack-4-with-vuejs-a-complete-guide-209e943c4772
- https://vue-composition-api-rfc.netlify.com/
- https://webpack.js.org/plugins/copy-webpack-plugin/
- https://webpack.js.org/plugins/html-webpack-plugin/
- https://vue-loader.vuejs.org/guide/
- https://webpack.js.org/configuration/
- https://webpack.js.org/configuration/dev-server/
- https://vuejs.org/v2/guide/#Getting-Started
- https://reactjs.org/docs/getting-started.html
- https://infernojs.org/docs/guides/getting-started
- https://angular.io/start
- https://docs.angularjs.org/misc/started
- https://babeljs.io/docs/en/configuration
- https://github.com/krausest/js-framework-benchmark
- https://preactjs.com/guide/v10/getting-started/