{"id":13492524,"url":"https://github.com/deleonio/poc-flexible-web-application-architecture","last_synced_at":"2025-03-28T10:32:21.751Z","repository":{"id":39712468,"uuid":"213351660","full_name":"deleonio/poc-flexible-web-application-architecture","owner":"deleonio","description":"This project demonstrate a flexible webpack based web application architecture.","archived":false,"fork":false,"pushed_at":"2023-01-06T08:01:36.000Z","size":4259,"stargazers_count":12,"open_issues_count":4,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-31T06:35:01.624Z","etag":null,"topics":["angular","angularjs","architecture","aurelia","babel","inferno","javascript","mocha","preact","pwa","react","solid","solidjs","spa","svelte","typescipt","typescript","vue","webcomponents","webpack"],"latest_commit_sha":null,"homepage":"https://github.modevel.de/poc","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deleonio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-07T10:12:12.000Z","updated_at":"2024-02-22T02:53:02.000Z","dependencies_parsed_at":"2023-02-05T16:31:49.523Z","dependency_job_id":null,"html_url":"https://github.com/deleonio/poc-flexible-web-application-architecture","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deleonio%2Fpoc-flexible-web-application-architecture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deleonio%2Fpoc-flexible-web-application-architecture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deleonio%2Fpoc-flexible-web-application-architecture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deleonio%2Fpoc-flexible-web-application-architecture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deleonio","download_url":"https://codeload.github.com/deleonio/poc-flexible-web-application-architecture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246012616,"owners_count":20709480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularjs","architecture","aurelia","babel","inferno","javascript","mocha","preact","pwa","react","solid","solidjs","spa","svelte","typescipt","typescript","vue","webcomponents","webpack"],"created_at":"2024-07-31T19:01:06.803Z","updated_at":"2025-03-28T10:32:20.715Z","avatar_url":"https://github.com/deleonio.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"![GitHub CI](https://github.com/martinoppitz/poc-flexible-web-application-architecture/workflows/GitHub%20CI/badge.svg)\n\n\u003e The source code is not completely clean for the architecture concept, but all aspects are evaluated.\n\n# PoC - Flexible web application architecture\n\n- [PoC - Flexible web application architecture](#poc---flexible-web-application-architecture)\n  - [Motivation](#motivation)\n    - [Addressee](#addressee)\n    - [Rules](#rules)\n  - [Introduction](#introduction)\n    - [Tools](#tools)\n    - [Frameworks](#frameworks)\n      - [Devtools](#devtools)\n  - [Installation](#installation)\n  - [Guide](#guide)\n    - [Usual usage without CLI](#usual-usage-without-cli)\n      - [Serve](#serve)\n      - [Build](#build)\n    - [Command Line Interfaces](#command-line-interfaces)\n      - [Angular CLI](#angular-cli)\n        - [Installation](#installation-1)\n      - [Vue CLI](#vue-cli)\n        - [Installation](#installation-2)\n  - [Testing](#testing)\n    - [Unit-Test](#unit-test)\n    - [Snapshot-Test](#snapshot-test)\n    - [E2E-Test](#e2e-test)\n  - [Documentation](#documentation)\n  - [Open topics](#open-topics)\n  - [Known bugs](#known-bugs)\n  - [Gained knowledge](#gained-knowledge)\n    - [Moment increases the artifact size](#moment-increases-the-artifact-size)\n    - [Artifact analyser](#artifact-analyser)\n    - [Artifact minimisation (⨻ outdated)](#artifact-minimisation--outdated)\n  - [References](#references)\n\n## Motivation\n\nThis project demonstrates a scalable, flexible, and framework-neutral JavaScript web application architecture.\n\n![Web application architecture](\u003cdoc/media/PoC - Cheat sheet.jpg\u003e \"Web application architecture\")\n\n### Addressee\n\nThis document is intended for everyone who cares about the following criteria:\n\n- Learnability\n- Controllability\n- Universality\n- Flexibility\n- Scalability\n- Durability\n\n### Rules\n\n- Vanilla/TypeScript code is universally applicable\n- use the relevant features directly without \"instantaneous water heaters\"\n- only the connection layer between controller and material design is framework-specific\n\n## Introduction\n\nWe write always the same application with different JavaScript-Frameworks. Here you can find a [Demo]-Link.\n\n### Tools\n\n| Tool            |   Description    | Status |\n| --------------- | :--------------: | :----: |\n| [Ant]           |      Design      |   ⌛   |\n| [Bootstrap]     |      Design      |   ✔️   |\n| [Material]      |      Design      |   ⌛   |\n| [Babel]         |    Transpiler    |   ✔️   |\n| [Webpack]       |     Bundler      |   ✔️   |\n| [TypeScript]    |     Language     |   ✔️   |\n| [Mocha]         | Unit-Test-Runner |   ✔️   |\n| [Chai]          |    Assertion     |   ✔️   |\n| [ESLint]        |      Linter      |   ✔️   |\n| [Prettier]      |    Formatter     |   ✔️   |\n| [Nightwatch.js] | E2E-Test-Runner  |   ✔️   |\n| [Cypress]       | E2E-Test-Runner  |  ❌\\*  |\n| [NYC]           |  Code-Coverage   |   ✔️   |\n| [Storybook]     |  Documentation   |   ✔️   |\n| [Workbox]       |   PWA-Tooling    |   ✔️   |\n\n\\* 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.\n\n### Frameworks\n\nThe selection of the following frameworks depends on this [report](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results#js-framework-essential) and [benchmark](https://krausest.github.io/js-framework-benchmark/2019/table_chrome_78.html).\n\n|           Characteristic |   [Angular]    | [AngularJS] | [Aurelia] |    [Inferno]    |    [Preact]     |     [React]     | [Svelte] | Vanilla  |          [Vue]          | [Vue3] |\n| -----------------------: | :------------: | :---------: | :-------: | :-------------: | :-------------: | :-------------: | :------: | :------: | :---------------------: | ------ |\n|                  Version |      10.1      |     1.8     |    1.3    |       7.4       |      10.4       |      16.13      |   3.24   |    -     | 2.6 ([Composition API]) | 3.0-rc |\n|            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  |\n|           Upcomming time |    ~53.5 ms    |   ~50 ms    |  ~10 ms   |     ~11 ms      |     ~12 ms      |     ~13 ms      |  ~13 ms  |    -     |         ~18 ms          | - ms   |\n|         Performance test |       ✔️       |     ✔️      |    ✔️     |       ✔️        |       ✔️        |       ✔️        |    ✔️    |    ✔️    |           ✔️            | ✔️     |\n| [Devtools](####devtools) |       ✔️       |     ✔️      |    ⌛     |       ✔️        |       ✔️        |       ✔️        |    ✔️    |    ❌    |           ✔️            | ✔️     |\n|                   Router |       ✔️       |     ✔️      |    ✔️     |       ✔️        |       ✔️        |       ✔️        |    ✔️    |    ✔️    |           ✔️            | ✔️     |\n|                       DI |       ✔️       |     ✔️      |    ✔️     |       ✔️        |       ✔️        |       ✔️        |    ✔️    |    ✔️    |           ✔️            | ✔️     |\n|                    [SPA] |       ✔️       |     ✔️      |    ✔️     |       ✔️        |       ✔️        |       ✔️        |    ✔️    |    ✔️    |           ✔️            | ✔️     |\n|                    [PWA] |       ✔️       |     ✔️      |    ⌛     |       ✔️        |       ✔️        |       ✔️        |    ✔️    |    ✔️    |           ✔️            | ✔️     |\n|                    [SSR] |       ✔️       |     ✔️      |    ⌛     |       ✔️        |       ✔️        |       ✔️        |    ✔️    |    ✔️    |           ✔️            | ✔️     |\n|      Internet Explorer\\* |       ❌       |     ✔️      |    ❌     |       ✔️        |       ✔️        |       ✔️        |    ❌    |    ❌    |           ✔️            | ✔️     |\n|            Framework CLI | ✔️\u003cbr\u003e(253 KB) |     ❌      |  ✔️\\*\\*   |       ❌        |       ❌        |       ❌        |    ❌    |    ❌    |     ✔️\u003cbr\u003e(121 KB)      | ✔️     |\n|               Scoped App |       ✔️       |     ✔️      |    ✔️     |       ✔️        |       ✔️        |       ✔️        |    ✔️    |    ❌    |           ✔️            | ✔️     |\n|         Language Support |       ✔️       |     ⌛      |    ⌛     | ✔️\u003cbr\u003e[JSX/TSX] | ✔️\u003cbr\u003e[JSX/TSX] | ✔️\u003cbr\u003e[JSX/TSX] |    ⌛    |    ✔️    |           ✔️            | ✔️     |\n\n\\* Maybe more polyfills are required for IE.\u003cbr\u003e\n\\*\\* The Aurelia CLI can not be used for this project.\n\n#### Devtools\n\n- [Angular Devtools] and language support\n- [AngularJS Devtools]\n- [React Devtools], also for Inferno and Preact and language support\n- [Svelte Devtools]\n- [Vue Devtools] and language support\n\n## Installation\n\nRun `npm install` in the bash. If there any problems with the installed dependencies, you can reinstall everything with `npm run reinstall`.\n\n## Guide\n\n### Usual usage without CLI\n\nNormally the binaries `npm` are used to execute the scripts.\n\n#### Serve\n\nCurrently the following frameworks are available:\n\n- `angular`\n- `angularjs`\n- `aurelia`\n- `inferno`\n- `preact`\n- `react`\n- `svelte`\n- `vanilla`\n- `vue`\n\nUse this command to serve the application: `npm run serve[ \u003cframework\u003e [ -- --open]]`\n\nFor example:\n\n- `npm run serve -f inferno`\n- `npm run serve -f inferno -- --open`\n\n\u003e The optional option `--open` open the app in you default browser.\n\n#### Build\n\nUse this command to build the application: `nom run build[ \u003cframework\u003e]`\n\nFor example:\n\n- `npm run build inferno`\n\n### Command Line Interfaces\n\nYou should know that this project should show the generic architecture concept. The showcase with CLI usage demonstrates the independent codebase.\n\n#### Angular CLI\n\nCurrently the [Angular CLI] is partially supported. ~~You must delete all non-angular sources from the `src/` folder.~~\n\n- `npm run ng:serve` executes `ng serve`\n- `npm run ng:build` executes `ng build --prod`\n\n##### Installation\n\nPlease use primary this documentation: https://angular.io/cli\n\n#### Vue CLI\n\nCurrently the [Vue CLI] is partially supported. You must delete all non-vue sources from the `src/` folder.\n\n- `npm run vue:serve` executes `vue-cli-service serve src/vue.ts`\n- `npm run vue:build` executes `vue-cli-service build src/vue.ts`\n\n\u003e You must remove the root slashes!\n\u003e\n\u003e Before:\n\u003e\n\u003e ```\n\u003e \u003cscript src=\"/js/chunk-vendors.c6f5dd88.js\"\u003e\u003c/script\u003e\n\u003e \u003cscript src=\"/js/app.c9cc3ddc.js\"\u003e\u003c/script\u003e\n\u003e ```\n\u003e\n\u003e After:\n\u003e\n\u003e ```\n\u003e \u003cscript src=\"js/chunk-vendors.c6f5dd88.js\"\u003e\u003c/script\u003e\n\u003e \u003cscript src=\"js/app.c9cc3ddc.js\"\u003e\u003c/script\u003e\n\u003e ```\n\u003e\n\u003e .\n\n##### Installation\n\nPlease use primary this documentation: https://cli.vuejs.org/guide/installation.html\n\n## Testing\n\n### Unit-Test\n\nExecute all unit tests with `npm run test` or `npm run test -- --watch`.\n\n### Snapshot-Test\n\nCurrently **not** supported.\n\n### E2E-Test\n\nExecute all e2e tests with `npm run e2e` or `npm run e2e --headless` for running headless.\n\n## Documentation\n\n[Storybook] is a realy nice tool to document the components and there usage.\n\n- `npm run storybook:serve` for serve the documentation\n- `npm run storybook:build` for build the documentation\n\n## Open topics\n\n- ~~Clean up the code for the architectural concept.~~ ✔️\n- ~~Use observables to trigger rendering in correct cases.~~ ✔️\n- ~~Prepare the project for unit and e2e testing.~~ ✔️\n- Extends the application with adding measurements. ⌛\n- ~~Add router to the application context.~~ ✔️\n- ~~Create a cheat sheet for the application architecture concept.~~ ✔️\n- ~~Provide a PWA manifest for each framework artifact.~~ ✔️ // Use [workbox]\n- ~~Coverage test in the build pipeline.~~ ✔️\n- ~~E2E tests with Cypress instead of Nightwatch.~~ ❌ // E2E-Testing in headless mode, works. ✔️\n- ~~Add filters to the application context.~~ ✔️\n\n## Known bugs\n\n- ~~In the parallel app execution the params routing breaks.~~ ✔️\n\n## Gained knowledge\n\n### Moment increases the artifact size\n\n[Moment] magnifies the build artifact immensely.\n\n### Artifact analyser\n\nIf that's interesting ...\n\nNeeds additional devDependency:\n\n- webpack-bundle-analyzer: ~3.6.0\n\nUsage: `npm run build angular -- --analyser`\n\n### Artifact minimisation (⨻ outdated)\n\n\u003e The benefit of this function was too small.\n\nThere are some optional plugins to minimize the build artifacts in webpack. However, these options are not really better than the default webpack setup.\n\n- https://webpack.js.org/plugins/closure-webpack-plugin/ ❌\n- https://webpack.js.org/plugins/uglifyjs-webpack-plugin/ ✔️\n- https://webpack.js.org/plugins/terser-webpack-plugin/ ✔️\n\nNeeds additional devDependencies:\n\n- closure-webpack-plugin: ~2.0.0\n- google-closure-compiler: ~20190929.0.0\n- terser-webpack-plugin: ~2.2.0\n- uglifyjs-webpack-plugin: ~2.2.0\n\nUsage: `npm run build react -- --minimizer terser`\n\n## References\n\n- https://github.com/infernojs/inferno-typescript-example\n- https://medium.com/js-dojo/how-to-configure-webpack-4-with-vuejs-a-complete-guide-209e943c4772\n- https://vue-composition-api-rfc.netlify.com/\n- https://webpack.js.org/plugins/copy-webpack-plugin/\n- https://webpack.js.org/plugins/html-webpack-plugin/\n- https://vue-loader.vuejs.org/guide/\n- https://webpack.js.org/configuration/\n- https://webpack.js.org/configuration/dev-server/\n- https://vuejs.org/v2/guide/#Getting-Started\n- https://reactjs.org/docs/getting-started.html\n- https://infernojs.org/docs/guides/getting-started\n- https://angular.io/start\n- https://docs.angularjs.org/misc/started\n- https://babeljs.io/docs/en/configuration\n- https://github.com/krausest/js-framework-benchmark\n- https://preactjs.com/guide/v10/getting-started/\n\n[babel]: https://babeljs.io\n[bootstrap]: https://getbootstrap.com\n[material]: https://material.io\n[typescript]: https:/typescriptlang.org\n[webpack]: https://webpack.js.org\n[angular]: https://angular.io\n[angularjs]: https://angularjs.org\n[inferno]: https://infernojs.org\n[preact]: https://preactjs.com\n[react]: https://reactjs.org\n[vue]: https://vuejs.org\n[spa]: https://en.wikipedia.org/wiki/Single-page_application\n[pwa]: https://de.wikipedia.org/wiki/Progressive_Web_App\n[composition api]: https://vue-composition-api-rfc.netlify.com\n[js-benchmark]: https://krausest.github.io/js-framework-benchmark/2019/table_chrome_78.html\n[angular cli]: https://cli.angular.io\n[vue cli]: https://cli.vuejs.org\n[svelte]: https://svelte.dev\n[svelte-loader]: https://github.com/sveltejs/svelte-loader\n[babel-loader]: https://github.com/babel/babel-loader\n[ssr]: https://medium.com/@baphemot/whats-server-side-rendering-and-do-i-need-it-cb42dc059b38\n[demo]: https://github.modevel.de/poc\n[mocha]: https://mochajs.org\n[chai]: https://www.chaijs.com\n[nyc]: https://istanbul.js.org\n[storybook]: https://storybook.js.org/\n[angular devtools]: https://augury.rangle.io\n[react devtools]: https://reactjs.org/docs/optimizing-performance.html\n[vue devtools]: https://github.com/vuejs/vue-devtools\n[angularjs devtools]: https://chrome.google.com/webstore/detail/ng-inspect-for-angularjs/cidepfmbgngpdapgncfhpecbdhmnnemf\n[svelte devtools]: https://github.com/RedHatter/svelte-devtools\n[aurelia]: https://aurelia.io\n[moment]: https://momentjs.com\n[cypress]: https://cypress.io\n[nightwatch.js]: https://nightwatchjs.org\n[jsx/tsx]: https://www.jambit.com/aktuelles/toilet-papers/was-ist-eigentlich-jsx-tsx/\n[workbox]: https://developers.google.com/web/tools/workbox\n[eslint]: https://eslint.org\n[prettier]: https://prettier.io\n[ant]: https://ant.design\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeleonio%2Fpoc-flexible-web-application-architecture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeleonio%2Fpoc-flexible-web-application-architecture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeleonio%2Fpoc-flexible-web-application-architecture/lists"}