Top frameworks

Als je eenmaal de basis van HTML, CSS en JavaScript onder de knie hebt, is de volgende stap het kiezen van een framework. Een framework is een gereedschapskist met kant-en-klare oplossingen voor veelvoorkomende problemen: routing, componenten, dataopslag, serverlogica. Je hoeft het wiel niet opnieuw uit te vinden.

Er zijn drie categorieën:

• Frontend — draait volledig in de browser van de bezoeker
• Backend — draait op de server, nooit zichtbaar voor de bezoeker
• Full-stack — dekt zowel frontend als backend, vaak in één project

---

Frontend frameworks

Frontend frameworks helpen je dynamische gebruikersinterfaces te bouwen. In plaats van HTML handmatig te manipuleren, beschrijf je wat er op het scherm moet staan — het framework zorgt voor de rest.

React

Gemaakt door: Meta (Facebook) · Taal: JavaScript / TypeScript · Lancering: 2013

React is het meest gebruikte frontend framework ter wereld. Het werkt met componenten — herbruikbare bouwstenen van UI. React introduceert JSX: een combinatie van JavaScript en HTML-achtige syntax in één bestand.

Groet.jsx

function Groet({ naam }) {
    return <h1>Hallo, {naam}!</h1>
}

export default function App() {
    return <Groet naam="Anna" />
}

Wanneer kiezen voor React?

• Je wil toegang tot het grootste ecosysteem (bibliotheken, community, vacatures)
• Je bouwt een complexe, interactieve applicatie
• Je team heeft al React-ervaring

---

Vue

Gemaakt door: Evan You · Taal: JavaScript / TypeScript · Lancering: 2014

Vue heeft een zachte leercurve en is geliefd om zijn toegankelijkheid. Componenten zijn geschreven in Single File Components (.vue-bestanden) die HTML, JavaScript en CSS netjes gescheiden houden.

Groet.vue

<template>
    <h1>Hallo, {{ naam }}!</h1>
</template>

<script setup>
defineProps(['naam'])
</script>

<style scoped>
h1 {
    color: #42b883;
}
</style>

Wanneer kiezen voor Vue?

• Je begint net met frontend frameworks
• Je werkt aan een project waarbij leesbaarheid en eenvoud centraal staan
• Je houdt van duidelijke scheiding tussen HTML, JS en CSS

---

Svelte

Gemaakt door: Rich Harris · Taal: JavaScript / TypeScript · Lancering: 2019

Svelte werkt fundamenteel anders dan React en Vue: in plaats van een runtime die in de browser draait, compileert Svelte je code tijdens het bouwen naar puur JavaScript. Het resultaat is extreem klein en snel.

Groet.svelte

<script>
  let naam = 'Anna'
</script>

<h1>Hallo, {naam}!</h1>

<style>
  h1 {
    color: #ff3e00;
  }
</style>

Wanneer kiezen voor Svelte?

• Prestaties zijn cruciaal (kleine bundels, snelle laadtijden)
• Je bouwt een kleinere tot middelgrote applicatie
• Je wil een moderne, minimalistische schrijfstijl

---

Backend frameworks

Backend frameworks draaien op de server. Ze verwerken verzoeken, praten met databases, beheren authenticatie en sturen responses terug naar de browser.

Express.js

Taal: JavaScript (Node.js) · Lancering: 2010

Express is het meest gebruikte Node.js framework. Het is minimalistisch en geeft je volledige vrijheid — je bouwt precies wat je nodig hebt, niets meer.

server.js

import express from 'express'

const app = express()
app.use(express.json())

app.get('/api/gebruikers', (req, res) => {
    res.json([
        { id: 1, naam: 'Anna' },
        { id: 2, naam: 'Boris' },
    ])
})

app.listen(3000, () => console.log('Server draait op poort 3000'))

Wanneer kiezen voor Express?

• Je wil maximale flexibiliteit en controle
• Je bouwt een REST API of een microservice
• Je team kent JavaScript goed en heeft geen voorkeur voor een opinionated framework

---

Laravel

Taal: PHP · Lancering: 2011

Laravel is het dominante PHP-framework en staat bekend om zijn elegante syntax, uitstekende documentatie en ingebouwde oplossingen voor vrijwel alles: authenticatie, e-mail, wachtrijen, bestandsbeheer. PHP is wereldwijd een van de meest gebruikte servertalen.

routes/web.php

Route::get('/gebruikers', function () {
    $gebruikers = Gebruiker::all();
    return view('gebruikers.index', compact('gebruikers'));
});

Wanneer kiezen voor Laravel?

• Je werkt in een PHP-omgeving of bij een bedrijf dat PHP gebruikt
• Je wil een volledig framework dat alles biedt zonder veel configuratie
• Je bouwt een content-rijke website of webapplicatie

---

Django

Taal: Python · Lancering: 2005

Django is het toonaangevende Python-framework. Het volgt het principe "batteries included": een ingebouwd beheerpaneel, ORM, authenticatiesysteem en formuliervalidatie zijn standaard aanwezig.

views.py

from django.http import JsonResponse
from .models import Gebruiker

def gebruikers_lijst(request):
    gebruikers = list(Gebruiker.objects.values('id', 'naam'))
    return JsonResponse(gebruikers, safe=False)

Wanneer kiezen voor Django?

• Je team werkt al met Python (bijv. voor data-analyse of machine learning)
• Je wil snel een volwaardige backend opzetten
• Je bouwt een datagestuurd platform met een beheerdersinterface

---

Full-stack frameworks

Full-stack frameworks combineren frontend en backend in één samenhangende oplossing. Ze nemen routering, rendering en de communicatie tussen client en server uit handen.

Next.js

Gebouwd op: React · Gemaakt door: Vercel · Lancering: 2016

Next.js is het meest gebruikte full-stack framework op dit moment. Het voegt server-side rendering, statische paginageneratie, een ingebouwde API-laag en optimalisaties voor prestaties toe aan React.

app/page.tsx

// Dit component draait op de SERVER — geen JavaScript naar de browser
async function HaalGebruikersOp() {
    const res = await fetch('https://api.voorbeeld.nl/gebruikers')
    return res.json()
}

export default async function PaginaGebruikers() {
    const gebruikers = await HaalGebruikersOp()

    return (
        <ul>
            {gebruikers.map((g) => (
                <li key={g.id}>{g.naam}</li>
            ))}
        </ul>
    )
}

Wanneer kiezen voor Next.js?

• Je gebruikt React en wil ook de backend in JavaScript schrijven
• SEO is belangrijk (server-side rendering)
• Je bouwt een productie-klare webapplicatie met snelle laadtijden

---

Nuxt

Gebouwd op: Vue · Gemaakt door: NuxtLabs · Lancering: 2016

Nuxt is voor Vue wat Next.js is voor React. Het voegt server-side rendering, bestandsgebaseerde routing en een krachtige modulelaag toe aan Vue.

pages/gebruikers.vue

<script setup>
const { data: gebruikers } = await useFetch('/api/gebruikers')
</script>

<template>
    <ul>
        <li v-for="g in gebruikers" :key="g.id">{{ g.naam }}</li>
    </ul>
</template>

Wanneer kiezen voor Nuxt?

• Je gebruikt Vue en wil server-side rendering of statische generatie
• Je wil een gestructureerd, conventie-gedreven project
• Je bouwt een contentsite, e-commerce platform of SaaS-applicatie

---

SvelteKit

Gebouwd op: Svelte · Gemaakt door: Vercel (nu onderdeel van Svelte-team) · Lancering: 2021

SvelteKit is het officiële full-stack framework voor Svelte. Het combineert de compactheid van Svelte met een krachtig routerings- en laadsysteem.

src/routes/gebruikers/+page.svelte

<script>
  export let data
</script>

<ul>
  {#each data.gebruikers as gebruiker}
    <li>{gebruiker.naam}</li>
  {/each}
</ul>

src/routes/gebruikers/+page.server.ts

export async function load() {
    const gebruikers = await haalGebruikersOp()
    return { gebruikers }
}

Wanneer kiezen voor SvelteKit?

• Prestaties en kleine bundels zijn de hoogste prioriteit
• Je werkt aan een project dat snel en licht moet zijn
• Je wil een moderne full-stack ervaring met minimale complexiteit

---

Overzicht

Framework	Categorie	Taal	Sterkste eigenschap
React	Frontend	JS/TS	Grootste ecosysteem
Vue	Frontend	JS/TS	Toegankelijkheid en leesbaarheid
Svelte	Frontend	JS/TS	Snelheid, kleine bundels
Express	Backend	JS/TS	Maximale flexibiliteit
Laravel	Backend	PHP	Alles ingebouwd, rijke community
Django	Backend	Python	Snel opzetten, Python-ecosysteem
Next.js	Full-stack	JS/TS	Productieklaar React + backend
Nuxt	Full-stack	JS/TS	Productieklaar Vue + backend
SvelteKit	Full-stack	JS/TS	Lichtgewicht, modern

Welk framework moet ik kiezen?

Er is geen universeel antwoord. Als je net begint: kies Vue of React voor frontend, Express of Laravel voor backend, en Next.js of Nuxt als je direct full-stack wil. Het belangrijkste is dat je begint — de concepten die je in het ene framework leert, zijn grotendeels overdraagbaar naar het andere.