tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

Motivatie frontend frameworks

Tibo De Peuter 2025-02-23 19:34:32 +01:00
parent dd706f241f
commit 228b033c5a
1 changed files with 29 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

31
Design-keuzes.md

@ -1,8 +1,8 @@
## Technologie stack ## Technologie stack
### Programmeertaal ### Programmeertaal: TS
**TS in plaats van JS?** **TS in plaats van JS**
Dit project wordt geschreven in TypeScript (TS). De klant vroeg een project in JavaScript (JS) of TS. Er werden de volgende overwegingen gemaakt: Dit project wordt geschreven in TypeScript (TS). De klant vroeg een project in JavaScript (JS) of TS. Er werden de volgende overwegingen gemaakt:
@ -20,3 +20,30 @@ Dit project maakt gebruik van ESCMAScript Modules (ESM). Er wordt geen gebruik g
- :white_check_mark: ESM wordt als (meer) future-proof gezien dan CJS. Zo kan dit project langer ontwikkeld worden zonder ernstig *refactoring*. - :white_check_mark: ESM wordt als (meer) future-proof gezien dan CJS. Zo kan dit project langer ontwikkeld worden zonder ernstig *refactoring*.
- :white_check_mark: ESM is deel van [de ECMAScript specificatie](https://262.ecma-international.org/), waardoor er tijdens de ontwikkeling teruggevallen kan worden op bestaande specificaties als dat nodig is. - :white_check_mark: ESM is deel van [de ECMAScript specificatie](https://262.ecma-international.org/), waardoor er tijdens de ontwikkeling teruggevallen kan worden op bestaande specificaties als dat nodig is.
## Frameworks
### Frontend: Vue.js
De frontend van dit project is een Vue.js frontend met Vuetify componenten.
Het [Vue.js framework](https://vuejs.org/) werd gekozen omdat het team daar simpelweg de meeste ervaring in had.
**Composition API in plaats van Options API**
Vue biedt ondersteuning voor [twee workflows](https://vuejs.org/guide/introduction.html#api-styles). De volgende overwegingen werden gemaakt:
- :white_check_mark: Composition API biedt meer mogelijkheden tot herbruikbare code en is flexibeler.
- :white_check_mark: Bij Composition API staat alle logica relevant voor één stuk bij elkaar, in tegenstelling tot bij Options API. Zie de afbeelding hieronder als voorbeeld.
- :white_check_mark: Composition API wordt aangeraden voor grotere, complexe applicaties.
- :negative_squared_cross_mark: Composition API vergt meer inzicht dan de Options API.
<p align="center">
<a href="https://vuejs.org/guide/extras/composition-api-faq.html#why-composition-api">
<img src="https://github.com/user-attachments/assets/de914503-7a00-4bae-840d-c0e8c892c37f" alt="Options API vs. Composition API" width="400"/>
</a></p>
Uiteindelijk werd Composition API verkozen boven Options API. Er kan ook gebruik gemaakt worden van [`src` imports](https://vuejs.org/api/sfc-spec.html#src-imports) voor [Single-File Components](https://vuejs.org/guide/scaling-up/sfc.html) indien ultieme afsplitsing van HTML, CSS en JS gewenst is.
**Vuetify in plaats van Bootstrap Vue**
Voor Vue bestaan er twee grote componenten-frameworks: [Bootstrap Vue](https://bootstrap-vue.org/) en [Vuetify](https://vuetifyjs.com/en/). De keuze ging naar Vuetify omdat het modern is en hoog-level componenten aanbiedt. We geloven dat het een fijne development-workflow biedt en dat er voldoende documentatie bestaat om ons vlot te helpen tijdens de ontwikkeling van het project.