The source code is not completely clean for the architecture concept, but all aspects are evaluated.
This project demonstrates a scalable, flexible, and framework-neutral JavaScript web application architecture.
This document is intended for everyone who cares about the following criteria:
We write always the same application with different JavaScript-Frameworks. Here you can find a Demo-Link.
Tool | Description | Status |
---|---|---|
[Ant] | Design | ⌛ |
[Bootstrap] | Design | ✔️ |
[Material] | Design | ⌛ |
[Babel] | Transpiler | ✔️ |
[Webpack] | Bundler | ✔️ |
[TypeScript] | Language | ✔️ |
[Mocha] | Unit-Test-Runner | ✔️ |
[Chai] | Assertion | ✔️ |
[ESLint] | Linter | ✔️ |
[Prettier] | Formatter | ✔️ |
[Nightwatch.js] | E2E-Test-Runner | ✔️ |
[Cypress] | E2E-Test-Runner | ❌* |
[NYC] | Code-Coverage | ✔️ |
[Storybook] | Documentation | ✔️ |
[Workbox] | PWA-Tooling | ✔️ |
* It is difficult to keep focus with Cypress as it is more a nice tool than an effective tool. It is expected that a lot of time will be invested to justify the requirements of a project.
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.
Run npm install
in the bash. If there any problems with the installed dependencies, you can reinstall everything with npm run reinstall
.
Normally the binaries npm
are used to execute the scripts.
Currently the following frameworks are available:
angular
angularjs
aurelia
inferno
preact
react
svelte
vanilla
vue
Use this command to serve the application: npm run serve[ <framework> [ -- --open]]
For example:
npm run serve -f inferno
npm run serve -f inferno -- --open
The optional option
--open
open the app in you default browser.
Use this command to build the application: nom run build[ <framework>]
For example:
npm run build inferno
You should know that this project should show the generic architecture concept. The showcase with CLI usage demonstrates the independent codebase.
Currently the Angular CLI is partially supported. You must delete all non-angular sources from the src/
folder.
npm run ng:serve
executes ng serve
npm run ng:build
executes ng build --prod
Please use primary this documentation: https://angular.io/cli
Currently the Vue CLI is partially supported. You must delete all non-vue sources from the src/
folder.
npm run vue:serve
executes vue-cli-service serve src/vue.ts
npm run vue:build
executes vue-cli-service build src/vue.ts
You must remove the root slashes!
Before:
<script src="/js/chunk-vendors.c6f5dd88.js"></script> <script src="/js/app.c9cc3ddc.js"></script>
After:
<script src="js/chunk-vendors.c6f5dd88.js"></script> <script src="js/app.c9cc3ddc.js"></script>
.
Please use primary this documentation: https://cli.vuejs.org/guide/installation.html
Execute all unit tests with npm run test
or npm run test -- --watch
.
Currently not supported.
Execute all e2e tests with npm run e2e
or npm run e2e --headless
for running headless.
Storybook is a realy nice tool to document the components and there usage.
npm run storybook:serve
for serve the documentationnpm run storybook:build
for build the documentationMoment magnifies the build artifact immensely.
If that's interesting ...
Needs additional devDependency:
Usage: npm run build angular -- --analyser
The benefit of this function was too small.
There are some optional plugins to minimize the build artifacts in webpack. However, these options are not really better than the default webpack setup.
Needs additional devDependencies:
Usage: npm run build react -- --minimizer terser