Echte interfaces bouwen met Svelte en SvelteKit
Svelte kiest een fundamenteel andere aanpak dan React en Vue: in plaats van een runtime naar de browser te sturen, compileert het je componenten tijdens het bouwen naar zeer efficiënte vanilla JavaScript. Het resultaat bestaat uit kleinere bundels, kortere laadtijden en minder overbodige code. SvelteKit, het officiële applicatieframework, voegt routing op basis van bestanden, server-side rendering, formulieracties en implementatieadapters toe, zodat je productieklare apps op elk platform kunt uitbrengen. Dit leertraject behandelt beide, van je eerste component tot een full-stackarchitectuur.
Wat je leert
Je begint met het componentmodel van Svelte — props, templatesyntaxis, voorwaarden, lussen en tweerichtingsbinding — en gaat daarna verder met het reactiviteitssysteem, lifecyclefuncties en de store-primitieven: writable, readable, derived en aangepaste stores. Voor de gebruikersinterface werk je met slots, de Context API, CSS-transities, animaties en Svelte Motion. De hoofdstukken over SvelteKit behandelen routing, het laden van gegevens, SSR en prerendering, formulieracties, API-routes, hooks, foutafhandeling, geavanceerde layouts, authenticatiepatronen en implementatieadapters. Het leertraject behandelt ook het rune-systeem van Svelte 5, testen met unittests en Playwright E2E, integratie van bibliotheken van derden en beveiligingspraktijken voor SvelteKit.
Het leerpad
Eenenveertig cursussen lopen van A1 tot en met C1. De eerste zeven cursussen leggen de basis: componenten, props, gebeurtenissen en templatesyntaxis. Op B1-niveau maak je kennis met stores, slots, transities en je eerste SvelteKit-pagina's en patronen voor het laden van gegevens. B2 — het grootste blok — behandelt formulieracties, API-routes, hooks, geavanceerde reactiviteit, Svelte Actions, aangepaste animaties, authenticatiepatronen, adapters, runes van Svelte 5, testen en beveiliging. Het leertraject sluit op C1-niveau af met geavanceerde runes, geavanceerde componentpatronen, streaming in SvelteKit, prestatieoptimalisatie, statusbeheer op grote schaal en een afsluitende full-stackapplicatie met SvelteKit.
Zo werkt het
Elke cursus is verdeeld in korte, gerichte lessen die je in de ingebouwde code-editor maakt, met realtimefeedback. Als je vastloopt, kun je altijd een AI-tutor inschakelen. Elk concept wordt bovendien versterkt met praktische oefeningen voordat je naar het volgende onderwerp gaat.
