Voor dit groepsproject moeten we een volledige technische stack samenstellen, bestaande uit zowel een front-end als back-end framework. Het doel van dit onderzoek is om een weloverwogen keuze te maken die past bij de projectscope, de vaardigheden van het team, en de eisen van een moderne webapplicatie.
Vooroordelen
Het is belangrijk om transparant te zijn over mijn uitgangspositie. Ik heb ervaring met Angular en wat ervaring met React aan de front-end kant, en voor back-end heb ik veel met express js gewerkt. Deze achtergrond betekent dat ik een voorkeur heb voor React, vooral omdat het breed gebruikt wordt en ik in een vorig project met Angular meer tijd kwijt was aan het helpen van teamgenoten dan aan daadwerkelijk programmeren. Daarnaast is veel van mijn kennis over moderne frameworks gebaseerd op content van Theo Browne en andere tech influencers.
Deze vooroordelen houd ik bewust in gedachten tijdens dit onderzoek om tot een zo objectief mogelijke conclusie te komen.
Onderzoek Methodologie
Dit onderzoek bestaat uit twee hoofdonderdelen: front-end en back-end framework selectie. Voor beide delen gebruik ik een systematische aanpak waarbij ik frameworks evalueer op verschillende criteria en deze weeg naar hun belang voor ons project. Na de theoretische analyse maak ik ook praktische ervaringen op door testapplicaties te bouwen.
Onderzoek
Front-end
Voor deel 1 van mijn onderzoek ga ik alles naast elkaar zetten. We gaan als eerst de front-end frameworks bepalen, want sommige back-end frameworks kunnen alleen samen met bepaalde front-end frameworks. De front-end frameworks die hieronder staan zijn niet alle frameworks die bestaan. De frameworks hieronder zijn een combinatie van de frameworks genoemd in de State of JS 2024 Survey en frameworks die ik al kende bij naam.
| Framework | What is it |
|---|---|
| React | Component library |
| Angular | Full framework |
| Vue.js | Full framework |
| Svelte | Full framework (with SvelteKit) |
| Alpine.js | Utility |
| htmx | Utility |
| Preact | React alternative |
| Lit | Component library |
| Solid | Component library |
| Astro | Full framework |
| Flutter | Cross-platform UI toolkit |
Nu dat we ze op een rijtje hebben gezet kunnen we meer onderzoek gaan doen.
Het eerste wat ik ga doen is de tabel verticaal draaien, zodat we meer ruimte hebben, en het direct vullen met hoevaak het gebruikt wordt (volgens de stackoverflow 2024 survey)
Alle scores worden opgeschreven in procenten, dus elk nummer zal tussen de 0 en 100 zitten.
| Framework | What is it | Usage |
|---|---|---|
| React | Component library | 39 |
| Angular | Full framework | 17 |
| Vue.js | Full framework | 15 |
| Svelte | Full framework (with SvelteKit) | 6 |
| Alpine.js | Utility | 0 |
| htmx | Utility | 3 |
| Preact | React alternative | 0 |
| Lit | Component library | 0 |
| Solid | Component library | 1 |
| Astro | Full framework | 3 |
| Flutter | Cross-platform UI toolkit | 9 |
Nu zijn er bepaalde dingen die ik wil gaan testen, want hoe vaak iets gebruikt wordt is niet de enige indicatie. Ik ga elk framework afwegen op de volgende vlakken: Betrouwbaarheid is hoelang ik inschat dat dit framework meegaat in de toekomst. Leerbaar is de moeite het kost om het te leren. AI Weerbaar is hoe goed een AI met deze taal omgaat, dit is niet omdat ik per se AI wil gebruiken, maar meer zodat ik zeker weet dat groepsgenoten die het gebruiken niet de app slopen met AI. Scope is of dit framework wel bedoeld is voor projecten van deze schaal. Mobiel is of het goed compatibel is met andere frameworks / plugins / packages1, maar ook met dingen zoals syntax highlighting in de code editor. Timing om te kijken of het wel handig is om dit zo vroeg in de carriĆØre van mijn groepsgenoten te leren, want ik zou persoonlijk niet beginnen met C++ op dit moment, op die manier zijn misschien sommige frameworks nu ook niet het handigste om aan te beginnen. En tot slot de Ervaring waarbij ik de zelfde simpele app maak in al deze frameworks om er niet alleen maar vanuit de theorie naar te kijken, maar ook met ervaring.
Betrouwbaarheid
Het is belangrijk om te weten of hetgene waarin je je tijd in steekt ook een grote kans heeft om relevant te blijven. Als ik Rust ga leren terwijl het volgend jaar niet meer gebruikt zal worden, dan had ik beter iets anders kunnen kiezen. Natuurlijk kunnen we dit niet zeker weten, maar we kunnen het wel goed voorspellen.
Hieronder zien we 2 plaatjes, dit zijn alle frameworks die Google Trends herkende als een zoekterm. Ik zie hier over het algemeen een neer gaande trend. Maar dat hebben ze allemaal dus er is niet echt een framework waarvan ik zou zeggen dat het onrelevant wordt. Nu zegt dit natuurlijk niet alles, want het zijn Google zoektermen en niet installatienummers.
Nu gaan we ook nog naar een andere bron kijken, de 2024 state of javascript survey, dit is een jaarlijkse vragenlijst voor javascript developers, maar deze vragenlijst heeft ook vragen over frameworks.
Hier zien we dat het niet echt naar beneden gaat, dus dit versterkt mijn gevoel dat er niet een framework is dat binnenkort onrelevant wordt. Hierbij wil ik wel zeggen dat dit nog steeds spontaan kan gebeuren, en dat er meer factoren spelen dan een vragenlijst onder X aantal mensen, en de zoekresulatennummers in Google.
Maar door deze uitslag ga ik de Betrouwbaarheid rij uit de tabel weghalen, want we weten er niks van af. Je zou kunnen zeggen dat hoe langer een framework bestaat, de betrouwbaarder het is, maar dit zou ook juist de reden kunnen zijn om onrelevant te worden, als iets āoutdatedā is, dan is het ook niet relevant meer. Dus daarom ga ik dit ook niet meenemen in mijn uitslag.
Leerbaar
Hoe makkelijk is iets te leren voor een beginner? Dit is moeilijk te zeggen want dit varieert per persoon. Ik ga hierom weer een tabel gebruiken om deze score te berekenen. Intuitief is hoe dicht het bij standaard JavaScript / TypeScript, HTML en CSS ligt. Verder kijk ik ook naar Leesbaarheid om te kijken of ik zomaar kan begrijpen wat er ongeveer gebeurt zonder hulp / te googelen. Ook is Vindbaar een belangrijk punt, hierbij kijk ik hoe makkelijk meer informatie te vinden is op Youtube en Google.
Als benchmark heb ik ook TypeScript hiertussen gedaan, waarbij ik Typescript vergelijk met JavaScript. Op deze manier kan je namelijk een goede vergelijking zien met hoe erg een framework leerbaar is. (naar mijn mening)
| Framework | Intuitief | Leesbaarheid | Vindbaar | Info | Totaal |
|---|---|---|---|---|---|
| TypeScript | 90 | 90 | - | - | - |
| React | 81 | 85 | 93 | Een van de meest gebruikte frameworks zorgt voor makkelijk te vinden oplossingen, maar als je niet specifiek bent verdrink je in vergelijkbare, maar niet goede oplossingen | 259 |
| Angular | 83 | 80 | 95 | Een van de meest gebruikte frameworks zorgt voor makkelijk te vinden oplossingen | 258 |
| Vue.js | 80 | 80 | 90 | 250 | |
| Svelte | 60 | 50 | 60 | Geen syntax kleuren in vscode, dat is een groot obstakel. Verder begreep ik het ook niet echt door het te lezen. later kwam ik er achter dat hiervoor een extensie bestaat | 170 |
| Alpine.js | 90 | 80 | 60 | Er zijn zoekresultaten, maar bij specifieke problemen kan je vast komen te zitten met Google. | 230 |
| htmx | 90 | 70 | 65 | 225 | |
| Preact | 81 | 80 | 68 | Veel zoekresultaten gaan over React in plaats van Preact, nu werkt het meestal wel, maar het maakt het wel lastiger. | 229 |
| Lit | 74 | 70 | 72 | 216 | |
| Solid | 78 | 80 | 73 | 231 | |
| Astro | 85 | 60 | 55 | Geen syntax kleuren in vscode, dat is een groot obstakel. | 200 |
| Flutter | 55 | 40 | 55 | Het is een HTML Canvas framework, en vrij complex. Ik heb geen idee wat ik lees. | 150 |
Nu is de vraag of alles hiervan even belangrijk is, maar ik vermoed persoonlijk van wel. Ik wil heel graag dat het lukt voor mijn klasgenoten om een goed framework te kiezen, dus neem ik al deze 3 factoren mee in het eindresultaat.
AI Weerbaar
Dit vind ik persoonlijk een heel belangrijk punt, dat we niet heel makkelijk kunnen googelen / testen. ChatGPT zegt het volgende:
| Framework | Score (Ā±%) |
|---|---|
| React | 95 |
| Angular | 85 |
| Vue.js | 92 |
| Svelte | 88 |
| Alpine.js | 80 |
| htmx | 75 |
| Preact | 88 |
| Lit | 82 |
| Solid | 80 |
| Astro | 79 |
| Flutter | 86 |
Maar dit neem ik met een korreltje zout omdat het een AI-gegenereerd nummer is. Persoonlijk zou mijn gok liggen op de meest gebruikte frameworks, dat die de beste zijn omdat er meer informatie van op het internet staat, en dat zou betekenen dat React en Angular het beste zijn.
Om deze score toch te verwerken van GPT gebruik ik 40% hiervan in de finale score.
Scope
Is dit framework bedoeld voor de scope van onze opdracht? Dat is een goede vraag, bij Flutter wist ik van tevoren al dat dit niet het geval ging zijn, maar bij de rest is het wel interessant om hier naar te kijken. Nu zijn dit nummers hoe ik er naar kijk met de informatie die ik heb, dit betekent dat er altijd BIAS in zit, maar ik zal mijn best doen om het te onderbouwen.
React, het project is niet klein maar ook niet groot. We hoeven niet op de datagrootte te letten, zolang het maar goed en simpel werkt. React is hier goed voor.
Angular is misschien een beetje overkill, maar valt nog steeds binnen ons bereik.
Vue heeft een single-file aanpak die misschien niet handig is voor beginners die met Git werken. Een bedrijf zou dit prima kunnen gebruiken, maar ik zie nu al veel merge conflicts op ons afkomen.
Met Svelte zal het lastiger zijn om specifieke pakketten te gebruiken, maar de vraag is of we dat wel nodig hebben.
Alpine is prima voor kleine apps, maar ik denk dat dit project in de middelgrote categorie valt. Dat, gecombineerd met het feit dat het minder pakket- en pluginondersteuning heeft, maakt het minder aantrekkelijk dan Angular of React.
HTMX is een goede keuze. Maar we moeten er dan waarschijnlijk iets bij nemen zoals Alpine.js, maar om 2 dingen te leren wordt misschien een beetje veel.
Preact is geen volledig framework en kan problemen krijgen met plugins.
Lit ziet er goed uit, maar je moet zelf routing en data verzamelings logica toevoegen.
Solid ziet eruit als een solide keuze. (pun intended)
Astro maakt het makkelijk om kleine apps te bouwen, maar ik weet niet of dit project onder de ākleineā definitie valt.
Mobiel
We willen een website die goed werkt op de mobiel, daarom gaan we dus werken vanuit een āmobile firstā kant. Hiervoor is het belangrijk dat een framework goed werkt met mobiele telefoons. Nu kan je het altijd wel combineren met Bootstrap, maar sommige frameworks zijn gewoon beter dan anderen.
| Framework | Geschiktheid voor Mobile-First Web | Omgezet naar score |
|---|---|---|
| React | Zeer goed | 90 |
| Angular | Goed | 80 |
| Vue | Zeer goed | 90 |
| Svelte | Uitstekend | 100 |
| Alpine.js | OkƩ (alleen eenvoudige sites) | 70 |
| htmx | Beperkt | 50 |
| Preact | Zeer goed | 90 |
| Lit | OkƩ | 70 |
| Solid | Goed | 80 |
| Astro | Uitstekend | 100 |
| Flutter (web) | Minder ideaal | 60 |
Voor mobiel-eerst websites zijn de pure component-gebaseerde frameworks zoals React, Vue, Svelte en Preact over het algemeen het veiligst. Lichtgewicht tools zoals Alpine.js, htmx en Lit vereisen meer CSS-werk. Flutter voor web is niet ideaal voor typische mobiel-eerst websites.
Timing
Dit gaat vooral om te kijken of het nu wel handig is, en of we niet beter kunnen wachten met een bepaald framework tot mijn groepsgenoten meer ervaring hebben. Ik besef me nu alleen dat dit eigenlijk al behandeld is in de Leerbaar categorie, dus dit zal ik niet nog een keer behandelen.
Ervaring
Dit is misschien wel het meest controveriele stuk uit mijn artikel, want nu moet ik een mening gaan geven in een onderzoek. Ik heb met elk framework (soms met behulp van AI) de zelfde app gemaakt om te kijken wat mijn mening is. Ik ga hierbij 3 kollommen aan cijfers geven. Leuk geeft weer hoe fijn het was om hiermee te werken. Leerzaam geeft aan of dat het mij nuttig lijkt om hier beter in te worden, en voor mijn klasgenoten hier beter in te worden. Todo geeft weer hoe groot de kans is dat ik dit binnenkort wil / ga leren / verbeteren.
| Framework | Leuk | Leerzaam | Todo | Mening | Totaal |
|---|---|---|---|---|---|
| React | 80 | 90 | 90 | React is simpel genoeg, maar ook complex genoeg. En ik wil er persoonlijk beter in worden. | 260 |
| Angular | 85 | 80 | 70 | Ik ken Angular al goed, het is voor mij een comfortabele thuisbasis, maar ik hoef er voorlopig niet verder in te duiken. | 235 |
| Vue.js | 73 | 75 | 70 | Ik ben er in geintresseerd, maar niet nu. | 218 |
| Svelte | 73 | 75 | 69 | Ik ben er in geintresseerd, maar niet nu. | 217 |
| Alpine.js | 75 | 50 | 50 | Ik denk dat ik dit alleen maar zal leren als een bedrijf het van me vraagt of als ik me verveel. | 175 |
| htmx | 78 | 60 | 53 | Het betere broertje van Alpine.js, maar nogsteeds denk ik dat ik dit niet vaak zal gebruiken. | 191 |
| Preact | 75 | 75 | 62 | Het is gewoon react, maar dan anders. Ik wil eerst beter worden in React voordat ik hier aan begin. | 212 |
| Lit | 75 | 75 | 60 | Dit zal ik ooit gaan leren, maar niet binnenkort. | 210 |
| Solid | 80 | 80 | 80 | Ik vind Solid een interessant framework | 240 |
| Astro | 60 | 60 | 50 | Als er geen syntax kleuren zijn maak je heel snel fouten. | 170 |
| Flutter | 40 | 60 | 50 | Van tevoren wist ik al dat dit het niet ging worden, en ik blijf bij die mening. | 150 |
Nu is mijn mening een belangrijk onderwerp, maar niet het doorslaggevende onderwerp. Dus zal ik dit ok veel minder zwaar mee tellen.
Resultaat
Hieronder zien we de complete tabel.
| Framework | What is it | Usage | Leerbaar | AI Weerbaar | Scope | Mobiel | Ervaring |
|---|---|---|---|---|---|---|---|
| React | Component library | 39 | 259 | 95 | 90 | 90 | 260 |
| Angular | Full framework | 17 | 258 | 85 | 80 | 80 | 235 |
| Vue | Full framework | 15 | 250 | 92 | 60 | 90 | 218 |
| Svelte | Full framework (with SvelteKit) | 6 | 170 | 88 | 65 | 100 | 217 |
| Alpine.js | Utility | 0 | 230 | 80 | 75 | 70 | 175 |
| htmx | Utility | 3 | 225 | 75 | 65 | 50 | 191 |
| Preact | React alternative | 0 | 229 | 88 | 70 | 90 | 212 |
| Lit | Component library | 0 | 216 | 82 | 70 | 70 | 210 |
| Solid | Component library | 1 | 231 | 80 | 90 | 80 | 240 |
| Astro | Full framework | 3 | 200 | 79 | 75 | 100 | 170 |
| Flutter | Cross-platform UI toolkit | 9 | 150 | 86 | 40 | 60 | 150 |
Totaalscore berekening
Om tot een eindconclusie te komen, moet ik de verschillende scores wegen en bij elkaar optellen. Hierbij gebruik ik de volgende wegingsfactoren:
- Usage: 100% (40-0pt) Want de populariteit is belangrijk, maar niet doorslaggevend.
- Leerbaar: 100% (260-150pt) Een van de belangrijkste criteria voor dit project, maar de scores liggen al gemiddeld hoger, dus we kunnen het bij 100% laten.
- AI Weerbaar: (38-30pt) 40% Omdat het green grote criteria is, maar wel belangrijk
- Scope: 150% (135-60pt) Een van de belangrijkste criteria voor dit project
- Mobiel: 50% (50-30pt) Belangrijk maar alle frameworks kunnen mobile-first
- Mening: 25% (65-37pt) Niet heel relevant voor een groepsproject, maar ook niet verwaarloosbaar.
| Framework | Usage (x1) | Leerbaar (x1) | AI Weerbaar (x0.4) | Scope (x1.5) | Mobiel (x0.5) | Ervaring (x0.25) | Totaal |
|---|---|---|---|---|---|---|---|
| React | 39 | 259 | 38 | 135 | 45 | 65 | 581 |
| Angular | 17 | 258 | 34 | 120 | 40 | 59 | 528 |
| Vue | 15 | 250 | 36 | 90 | 45 | 55 | 491 |
| Svelte | 6 | 170 | 34 | 97 | 50 | 55 | 412 |
| Alpine.js | 0 | 230 | 32 | 112 | 45 | 44 | 463 |
| htmx | 3 | 225 | 30 | 97 | 25 | 48 | 428 |
| Preact | 0 | 229 | 34 | 105 | 45 | 53 | 466 |
| Lit | 0 | 216 | 32 | 105 | 35 | 52 | 440 |
| Solid | 1 | 231 | 32 | 135 | 40 | 60 | 499 |
| Astro | 3 | 200 | 32 | 112 | 50 | 42 | 439 |
| Flutter | 9 | 150 | 34 | 60 | 30 | 37 | 320 |
Front-end Conclusie
Na al dat vergelijken en proefbouwen blijft mijn conclusie redelijk duidelijk: React is voor het project de meest verstandige keuze. Mijn scoreberekening zet React bovenaan (581 punten) en combineert waarheidsgetrouw de belangrijkste factoren voor het project: veel gebruikt in de praktijk, goed vindbaar materiaal, relatief makkelijk op te pakken voor beginners maar toch krachtig genoeg voor complexere features, en solide ondersteuning voor mobile-first development. Dat past precies bij wat er nu nodig is: snel productief zijn, met weinig friction voor teamgenoten, en met voldoende bronnen om problemen op te lossen.
Back-end
Nu ik React heb gekozen voor de front-end, kan ik gaan kijken naar de back-end. Ik heb vier Node.js frameworks uitgezocht die goed werken met React en geschikt zijn voor webapps zoals die wij gaan maken.
| Framework | Wat is het |
|---|---|
| Express | Simpele webserver, het meest gebruikte Node.js framework |
| NestJS | Framework dat veel op TypeScript draait, een beetje zoals Angular |
| Fastify | Snel framework met handige validatie functies |
| Koa | Moderne versie van Express, maar dan lichter |
Net zoals bij de front-end ga ik deze frameworks testen op punten die belangrijk zijn voor ons project.
Usage
Eerst kijk ik naar hoe populair elk framework is. Dit is belangrijk omdat populaire frameworks meer hulp online hebben, meer tutorials, en een grotere kans dat ze relevant blijven.
Als ik kijk naar npm downloads en hoeveel bedrijven ernaar zoeken, dan is Express duidelijk de winnaar (score: 100). NestJS wordt steeds populairder (score: 60). Fastify heeft een kleinere maar actieve groep gebruikers (score: 30), en Koa wordt minder gebruikt (score: 10).
Leerbaar
Hier kijk ik naar hoe makkelijk het is om elk framework te leren, vooral voor studenten zoals wij.
Express scoort het hoogst (90) omdat het heel simpel werkt - je schrijft gewoon functies die antwoord geven op requests. Koa komt op de tweede plaats (80), het is moderner maar nog steeds goed te begrijpen. NestJS is lastiger (75) omdat het veel concepten heeft die je moet leren, maar dat geeft dan wel meer structuur aan je code. Fastify zit er tussenin (70) met een normale leercurve.
TypeScript Support
Omdat we met TypeScript willen werken, is het belangrijk dat het framework daar goed mee werkt.
NestJS wint hier overduidelijk (100) - het is helemaal gemaakt om met TypeScript te werken. Fastify werkt ook goed met TypeScript (70) en geeft je automatisch hints over wat je kan gebruiken. Koa en Express hebben beide extra pakketjes nodig om met TypeScript te werken, waarbij Koa iets beter is (50 vs 40) omdat het een modernere opzet heeft.
MongoDB Compatibiliteit
Hier test ik hoe goed elk framework samenwerkt met MongoDB en Mongoose (het pakket om met MongoDB te praten).
Eigenlijk werken ze allemaal prima met MongoDB. NestJS scoort het best (95) omdat het handige functies ingebouwd heeft om met databases te werken. Express en Koa scoren ook goed (90 en 80) omdat Mongoose oorspronkelijk voor hun gemaakt is. Fastify scoort iets lager (85) maar werkt nog steeds prima.
Ecosysteem
Hier kijk ik naar hoeveel extra pakketjes en hulptools er beschikbaar zijn.
Express wint deze categorie (100) omdat het al heel lang bestaat en daarom heel veel pakketjes heeft. NestJS heeft ook steeds meer pakketjes (90) en veel dingen zitten al ingebouwd. Fastify heeft minder pakketjes maar die zijn wel van goede kwaliteit (85). Koa heeft de minste pakketjes (60) omdat het nieuwer is en minder mensen het gebruiken.
Performance
Hier test ik hoe snel elk framework is bij het afhandelen van requests.
Fastify is hier de winnaar (95) - het is speciaal gemaakt om heel snel te zijn. Koa doet het ook goed (85) omdat het moderne code gebruikt. NestJS is redelijk snel (80) maar heeft wat meer overhead omdat er meer lagen tussen zitten. Express is het langzaamst (70) omdat het een oudere opzet heeft, maar nog steeds snel genoeg voor de meeste dingen die wij gaan maken.
AI Weerbaar
Net zoals bij de front-end frameworks kijk ik hier naar hoe goed AI kan helpen met code schrijven.
Express scoort het hoogst (95) omdat er heel veel voorbeelden van online staan die AI kan gebruiken. NestJS doet het ook goed (90) omdat er steeds meer documentatie en voorbeelden komen. Fastify (80) en Koa (75) hebben minder voorbeelden online, maar nog steeds genoeg om AI te laten helpen.
Ervaring
Tot slot mijn eigen ervaring nadat ik een test API heb gemaakt in elk framework.
NestJS vond ik het fijnst (95) - de structuur helpt echt bij grotere projecten en TypeScript werkt heel natuurlijk. Express kwam als tweede (85) omdat het simpel is en ik het al kende. Fastify was verrassend prettig (80) om mee te werken. Koa voelde het meest experimenteel (70), wat niet per se slecht is maar wel minder bekend.
Resultaat Back-end
| Framework | Usage | Leerbaar | TypeScript | MongoDB | Ecosysteem | Performance | AI Weerbaar | Ervaring |
|---|---|---|---|---|---|---|---|---|
| Express | 100 | 90 | 40 | 90 | 100 | 70 | 95 | 85 |
| NestJS | 60 | 75 | 100 | 95 | 90 | 80 | 90 | 95 |
| Fastify | 30 | 70 | 70 | 85 | 85 | 95 | 80 | 80 |
| Koa | 10 | 80 | 50 | 80 | 60 | 85 | 75 | 70 |
Totaalscore berekening Back-end
Voor het berekenen van de eindscores gebruik ik dezelfde aanpak als bij de front-end, maar dan aangepast voor back-end dingen:
- Usage: 100% - Belangrijk voor hulp en dat het relevant blijft
- Leerbaar: 100% - Heel belangrijk dat het team het kan leren
- TypeScript: 150% - Extra belangrijk omdat we TypeScript willen gebruiken
- MongoDB: 150% - Database connectie is super belangrijk
- Ecosysteem: 120% - Pakketjes besparen veel tijd
- Performance: 100% - Belangrijk maar niet kritisch voor ons project
- AI Weerbaar: 40% - Handig maar niet het belangrijkste
- Ervaring: 25% - Mijn mening telt mee maar niet zwaar
| Framework | Usage (x1) | Leerbaar (x1) | TypeScript (x1.5) | MongoDB (x1.5) | Ecosysteem (x1.2) | Performance (x1) | AI Weerbaar (x0.4) | Ervaring (x0.25) | Totaal |
|---|---|---|---|---|---|---|---|---|---|
| NestJS | 60 | 75 | 150 | 142.5 | 108 | 80 | 36 | 23.75 | 675.25 |
| Express | 100 | 90 | 60 | 135 | 120 | 70 | 38 | 21.25 | 634.25 |
| Fastify | 30 | 70 | 105 | 127.5 | 102 | 95 | 32 | 20 | 581.5 |
| Koa | 10 | 80 | 75 | 120 | 72 | 85 | 30 | 17.5 | 489.5 |
Back-end Conclusie
Na alles te hebben doorgerekend wint NestJS met 675.25 punten. Express komt als goede tweede door zijn populariteit en omdat het makkelijk te leren is, maar NestJS wint het uiteindelijk omdat het zo goed werkt met TypeScript en veel structuur geeft aan je code. Dat is belangrijk als je met een team werkt. Ja, het is iets moeilijker om te leren, maar dat wordt goed gemaakt door dat je code beter wordt en minder bugs krijgt.
Finale Stack Keuze
Na grondige analyse van zowel front-end als back-end opties resulteert dit onderzoek in de volgende technische stack:
Front-end: React - Door uitstekende balans tussen gebruiksgemak, community support en flexibiliteit Back-end: NestJS - Door sterke TypeScript integratie en gestructureerde ontwikkelervaring
Deze combinatie biedt het beste van beide werelden: Reactās beginner-vriendelijkheid en brede adoptie voor de front-end, gecombineerd met NestJSās enterprise-grade structuur en TypeScript-first aanpak voor de back-end. Samen vormen ze een moderne, schaalbare stack die zowel geschikt is voor het huidige project als waardevol voor toekomstige carriĆØre-ontwikkeling van alle teamleden.