Wat is Svelte en hoe begin je ermee?

Als je nog niet weet wat een framework precies is of hoe frontend, backend en full-stack verschillen, lees dan eerst de pagina met de populairste frameworks. Hier begin je direct met Svelte. Svelte is een frontend framework. Het helpt je pagina's te bouwen die de bezoeker ziet en gebruikt, zoals knoppen, formulieren en lijsten. Svelte werkt anders dan de meeste frameworks, en dat maakt het extra interessant om te leren. In deze pagina zie je hoe je een project start en welke kernconcepten je nodig hebt.

Waarom kies je voor Svelte?

Rich Harris maakte Svelte. Het kwam in 2019 uit. Het grote verschil met andere frameworks zit in de manier waarop Svelte werkt. Andere frameworks hebben een extra programma nodig in de browser dat je code uitvoert. Svelte zet je code al tijdens het bouwen om naar gewoon JavaScript. Dat heet compileren.

Denk aan een vertaler die je brief vooraf vertaalt. De ontvanger hoeft dan niet zelf te vertalen. Zo werkt Svelte ook: de browser krijgt direct klare code. Dat maakt de pagina's klein en snel.

Wat is compileren?

Compileren betekent dat een programma je code omzet naar een andere vorm. Svelte doet dit tijdens het bouwen van je site, niet terwijl de bezoeker wacht. Het resultaat is klein en snel.

Svelte schrijf je in bestanden die eindigen op .svelte. Je schrijft JavaScript, HTML en CSS in één bestand. Dat maakt een component compact en makkelijk te lezen.

Hoe zet je een eerste Svelte-project op?

Je hebt Node.js nodig. Dat installeer je via de officiële Node.js-website. Node.js bevat ook npm, een hulpprogramma om pakketjes te installeren.

Voer deze commando's uit in je terminal:

Terminal

npx sv create my-app
cd my-app
npm install
npm run dev

Wat doen deze commando's?

• npx sv create my-app start de officiële Svelte-opzetter en maakt de map my-app. Het stelt je een paar vragen. Voor een eerste project kies je de standaardopties.
• cd my-app zet je in de nieuwe map.
• npm install downloadt de benodigde onderdelen.
• npm run dev start een lokale server op je eigen computer.

Open daarna http://localhost:5173 in je browser. Je ziet nu je eigen Svelte-project. Pas je code aan en sla op? Dan ververst de pagina zichzelf.

Gebruik de officiële gids

De opzetter sv is nieuwer dan oudere handleidingen op internet. Lees de officiële Svelte-documentatie voor de meest actuele stappen.

Hoe ziet een Svelte-project eruit?

Een Svelte-project bevat ongeveer deze onderdelen:

my-app/
  src/
    routes/           ← de pagina's van je site
    lib/              ← gedeelde code en componenten
    app.html          ← het basis-HTML-bestand
  static/             ← bestanden zoals plaatjes die ongewijzigd blijven
  package.json        ← een lijst met de pakketten van je project
  svelte.config.js    ← instellingen voor Svelte

Je werkt vooral in src. Eigen componenten zet je in src/lib. Een nieuwe pagina maak je meestal aan in een map binnen src/routes. Hoe dat precies werkt, leer je op de SvelteKit-pagina.

Hoe ziet een eerste Svelte-component eruit?

Maak een bestand aan met de naam Counter.svelte in src/lib:

src/lib/Counter.svelte

<script>
  let count = $state(0)
</script>

<p>Je hebt {count} keer geklikt.</p>
<button onclick={() => count++}>Klik hier</button>

<style>
  button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
</style>

Wat gebeurt hier?

• $state(0) maakt een waarde aan die kan veranderen. Svelte houdt die waarde in de gaten.
• {count} toont de waarde op het scherm.
• onclick is de actie die start als de bezoeker op de knop drukt.
• count++ telt de waarde met één op. Svelte ziet die verandering en past de tekst meteen aan.

Gebruik het component op de startpagina in src/routes/+page.svelte:

src/routes/+page.svelte

<script>
  import Counter from '$lib/Counter.svelte'
</script>

<h1>Mijn eerste Svelte-pagina</h1>
<Counter />

Het teken $lib is een snelkoppeling naar de map src/lib. Zo hoef je geen lange paden te typen.

Welke kernbegrippen moet je kennen in Svelte?

Met een paar begrippen bouw je al veel:

• Componenten zijn losse .svelte-bestanden. Ze zijn de bouwstenen van je pagina.
• Reactieve state met $state zorgt dat je pagina verandert als de data verandert.
• Props geef je mee aan een component. Gebruik $props() om ze in het component te ontvangen.
• Logica in de HTML schrijf je met blokken zoals {#if} en {#each}. Met {#if} toon je iets alleen als een voorwaarde klopt. Met {#each} herhaal je iets voor elk item in een lijst.
• Events zoals onclick reageren op wat de bezoeker doet.

Wil je elk onderdeel uitgebreid zien? Lees de officiële Svelte-tutorial. Die is kort, duidelijk en heeft oefeningen die je in de browser doet.

Wanneer kies je voor Svelte?

• Snelheid en kleine bestanden zijn belangrijk voor je project.
• Je bouwt een kleine tot middelgrote website of applicatie.
• Je wil modern en compact schrijven, met minder code dan bij andere frameworks.
• Je wil later uitbreiden naar een volledige site met SvelteKit.

Vergelijk Svelte met Vue. Beide zijn beginnersvriendelijk en beide zetten HTML, JavaScript en CSS in één bestand. Het verschil zit in het compileren: Svelte doet dat vooraf, terwijl Vue meer code in de browser laat draaien. Lees de Vue-pagina om de verschillen zelf te zien.

Veelgemaakte fout

Gebruik je let count = 0 zonder $state, dan ziet Svelte de wijziging soms niet op het scherm. Gebruik daarom altijd $state voor waarden die moeten veranderen.

Wat leer je hierna?

Je kent nu de basis van Svelte: componenten, $state, props en blokken in de HTML. Probeer eens een kleine boodschappenlijst te maken die je zelf kunt uitbreiden. Daarna is SvelteKit de volgende stap. Dat is het officiële full-stack framework voor Svelte, met pagina's, routering en server-code. Lees meer op de SvelteKit-pagina.

Je hebt de eerste stap gezet. Blijf bouwen en blijf nieuwsgierig. Elke kleine pagina die je maakt, maakt je beter.