diff --git a/Design-keuzes.md b/Design-keuzes.md index 5bf2d94..0ef87b3 100644 --- a/Design-keuzes.md +++ b/Design-keuzes.md @@ -1,8 +1,8 @@ ## 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: @@ -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 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. + +

+ +Options API vs. Composition API +

+ +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. \ No newline at end of file