Leer Svelte: code & bouw
Leer Svelte: code & bouw — Leer Svelte en SvelteKit met een live editor en de gecompileerde output ernaast
Leer Svelte: code & bouw is een gratis iOS- en Android-app om op je telefoon Svelte te leren en met SvelteKit aan de slag te gaan. Schrijf componenten in een live editor met een preview, bekijk de JavaScript waarin de compiler ze omzet en doorloop 41 cursussen — van je eerste reactieve waarde tot een gedeployde full-stack-app — met een AI Mentor naast je.
- Prijs
- Gratis, Pro-upgrade
- Platforms
- iOS en Android
- Talen
- 22
- Leeftijdsclassificatie
- 4+
- Vereist
- iOS 15.1 of nieuwer
Niets op dat scherm draait op Svelte. Het draait op wat Svelte heeft geschreven.
De eerste les van de app toont een component van negen regels naast de JavaScript die de compiler ervoor heeft gegenereerd. Tik op +1 en de regels die worden uitgevoerd lichten op: één invalidatie, één opnieuw berekende waarde, twee gewijzigde tekstknooppunten en verder niets. Dat is het idee achter het framework, voordat het wordt uitgelegd.
Wat het is
Leer Svelte: code & bouw is een gratis iOS- en Android-app die Svelte en SvelteKit leert via 41 cursussen en 163 lessen, opgebouwd van beginner- tot gevorderd niveau. De app begint met een demo die een component naast de gecompileerde JavaScript laat zien en behandelt daarna reactiviteit, props, stores, transities, Svelte 5-runes en SvelteKit-routing, het laden van gegevens, form actions en deployment. Een live editor met een preview en een AI Mentor zijn ingebouwd.
In de app
Hoe het eruitziet
De cursus
Wat de Svelte-cursus behandelt
41 cursussen en 163 lessen uit de eigen cursuslijst van de app, ingedeeld van A1 tot C1 en eindigend met een volledig full-stack SvelteKit-project.
Eerste componenten
Wat Svelte is en waarom het een andere aanpak kiest, een project instellen en je eerste component schrijven met reactieve variabelen.
Props, templates, events en binding
Props doorgeven, conditionals en each-loops in markup, DOM-events en custom events, en two-way binding met bind:-directives.
Lifecycle, stores en context
onMount en onDestroy, writable, readable, derived en custom stores, slots en compositie, en de Context API.
Transities, animaties en actions
Transition-directives, de animate-directive, actions voor herbruikbaar DOM-gedrag, custom transitions en de spring- en tweened motion stores.
SvelteKit-basis
File-based routing en pagina's, load-functies, geavanceerde layouts, form actions, API-routes, server hooks en errorpagina's.
Svelte 5 Runes
Een introductie tot runes, props en snippets, geavanceerde runes en een diepere blik op hoe de reactiviteit van Svelte werkt.
SvelteKit in productie
SSR en prerendering, streaming, performance, SEO en metatags, beveiliging, auth-patronen, adapters en deployment.
Testen en full-stack
Unit-tests met Vitest, end-to-endtests met Playwright, third-party libraries, state management op grote schaal en een full-stack SvelteKit-app.
Hoe het werkt
Zo werkt een sessie
De app is opgebouwd rond een traject van één reactieve waarde naar een deploybare app, waarbij elke stap lezen combineert met iets dat je kunt uitvoeren.
Bekijk eerst de output van de compiler
De openingsdemo zet een kleine component naast de JavaScript waarnaar deze wordt gecompileerd. Het gecompileerde deel is vooraf gegenereerd en wordt meegeleverd in de app, zodat de demo zonder verbinding werkt.
Bewerk een component en bekijk een preview
Lessen openen een editor met HTML-, CSS- en JavaScript-tabbladen en een uitvoerknop die de component in een preview weergeeft. De preview laadt de Svelte-compiler via het netwerk en heeft daarom een verbinding nodig.
Controleer of je het beheerst
Na elk onderwerp volgen een quiz en programmeeruitdagingen. De AI Mentor kan een concept uitleggen, een leerroute voorstellen of je over een cursus overhoren. De Weekly Code Challenge voegt een competitieve ronde toe.
Wat erin zit
Wat je bij de app krijgt
41
Cursussen, A1 tot C1
163 lessen verdeeld over 41 cursussen, van Svelte instellen en je eerste component tot stores, transities, SvelteKit-routing en hooks, Svelte 5-runes, testen en een full-stack-eindproject.
Gecompileerd
Component naast de gecompileerde code
De demo bij de eerste start toont de broncode en de gegenereerde JavaScript samen en telt bijgewerkte tekstknooppunten tegenover opnieuw aangemaakte elementen. Zo kun je de kosten van een update rechtstreeks van het scherm aflezen.
Preview
Live editor met een preview
Schrijf markup, stijlen en script in afzonderlijke tabbladen en geef de component weer op je telefoon. De preview gebruikt de Svelte 4.2.19-compiler, waardoor code met Svelte 5-runes mogelijk niet wordt weergegeven. Je kunt die code beter lezen en stap voor stap volgen.
AI
AI Mentor
Vraag in het chattabblad naar de belangrijkste concepten van een cursus, tips om sneller te leren, een quiz of een persoonlijke leerroute. Je kunt ook vragen stellen over een foutmelding die je niet begrijpt.
Wekelijks
Weekly Code Challenge
Een regelmatige uitdagingsronde waaraan je naast de lessen kunt deelnemen, met streaks, voortgangsregistratie en herinneringen om je routine vol te houden.
Examen
Certificaat van voltooiing
Leg het eindexamen af en het certificaat draagt je naam. Het is bewijs van het werk dat je hebt gedaan, geen geaccrediteerde kwalificatie.
Achtergrond
Wat is Svelte en waarin verschilt het van andere manieren om een webinterface te bouwen?
Svelte is een framework voor het bouwen van gebruikersinterfaces waarin componenten vooraf worden gecompileerd naar gewone JavaScript die de pagina rechtstreeks bijwerkt. Daardoor hoeft er geen grote runtime te worden meegestuurd die in de browser uitzoekt wat er moet veranderen. Een component is één bestand met markup, stijlen en script, en een toewijzing zoals count += 1 is genoeg om het scherm bij te werken. SvelteKit is het applicatieframework dat daarop is gebouwd en voegt routing op basis van bestanden, server-side gegevens laden, formulierverwerking en adapters voor deployment toe. Voor de lerende betekent dit in de praktijk minder boilerplate en een kleinere afstand tussen de code en wat er op de pagina verschijnt.
Reactiviteit tijdens het compilereneen toewijzing is de state
In Svelte herschrijft de compiler een gewone toewijzing naar de code die de betreffende delen van de pagina bijwerkt. Een gelabelde statement die begint met $: berekent een waarde opnieuw zodra de waarden die erin worden gelezen veranderen, zodat afgeleide gegevens geen hulpfuncties nodig hebben.
Storesgedeelde state tussen componenten
Een writable store bevat een waarde waarop meerdere componenten zich kunnen abonneren. Door de naam ervan vooraf te laten gaan door $ wordt het abonnement automatisch geregeld. Derived en custom stores bouwen daarop voort wanneer state moet worden berekend of ingepakt.
Runesde Svelte 5-syntax
Svelte 5 vervangt een groot deel van de eerdere compiler-magie door expliciete functies zoals $state, $derived en $props, plus snippets voor herbruikbare markup. Beide stijlen worden in echte projecten gebruikt. Daarom leert de app het oorspronkelijke model en het runes-model in afzonderlijke cursussen.
SvelteKitrouting, gegevens en deployment
Een bestand zoals +page.svelte wordt een route, een load-functie haalt gegevens op voordat de pagina wordt weergegeven, form actions verwerken inzendingen op de server en een adapter verpakt het resultaat voor een statische host, een Node-server of een serverless-platform.
Past bij jou
Voor wie het is — en voor wie niet
Past goed bij je als je
- Wil je Svelte of SvelteKit leren in korte sessies in plaats van lange videocursussen
- Ken je wat HTML en JavaScript en wil je zien wat een compiler-first framework verandert
- Ben je benieuwd hoe reactieve updates werken en lees je liever de gegenereerde code dan die zomaar te vertrouwen
- Wil je een leerpad dat verder gaat dan alleen componenten en ook routing, data laden, auth en deployment behandelt
- Vraag je graag aan een AI Mentor waarom een stukje code zich gedraagt zoals het doet
Niet het juiste hulpmiddel als je
- Wil je Svelte 5 runes-code uitvoeren in de preview, die de Svelte 4.2.19-compiler gebruikt
- Wil je vanaf je telefoon een volledig SvelteKit-project bouwen en deployen, waarvoor je nog steeds een laptop nodig hebt
- Verwacht je dat alles gratis is: de eerste cursus is gratis en Pro ontgrendelt de rest
- Heb je nog nooit HTML of JavaScript gezien en wil je eerst een algemene programmeercursus volgen voordat je een framework leert
Vragen
Veelgestelde vragen
Hoe kan ik Svelte leren op een telefoon?
Kies een leerpad waarin lezen en code uitvoeren worden gecombineerd, want Svelte is het makkelijkst te begrijpen wanneer je een waarde verandert en ziet hoe de pagina reageert. Leer Svelte: code & bouw begint met een demo van gecompileerde output en biedt daarna lessen met een HTML-, CSS- en JavaScript-editor, een preview en een AI Mentor. Je kunt gratis beginnen op iOS en Android.
Is Svelte moeilijk te leren voor een beginner?
Svelte wordt vaak als toegankelijk beschouwd, omdat componenten eruitzien als gewone HTML, CSS en JavaScript en een toewijzing het scherm bijwerkt. De moeilijke onderdelen komen later, met stores, lifecycle, de scheiding tussen server en client in SvelteKit en de overstap naar Svelte 5 runes. Leer Svelte: code & bouw deelt zijn 41 cursussen in van A1 tot C1, zodat deze onderwerpen in de juiste volgorde aan bod komen.
Wat is SvelteKit en leert de app het?
SvelteKit is het applicatieframework voor Svelte en voegt file-based routing, data laden op de server, form actions, hooks en deployment-adapters toe. Leer Svelte: code & bouw heeft speciale cursussen over SvelteKit-routing en -pagina's, data laden, form actions, API-routes, hooks, foutafhandeling, SSR en prerendering, streaming, beveiliging en adapters.
Behandelt de app Svelte 5 runes?
Ja. Leer Svelte: code & bouw bevat cursussen over een introductie tot runes, props en snippets, en geavanceerde runes. De preview van de editor compileert momenteel met Svelte 4.2.19, waardoor runes-code mogelijk niet in de preview verschijnt en je deze het beste in de lestekst kunt volgen.
Kan ik Svelte-code uitvoeren op mijn telefoon?
Je kunt een component in de editor schrijven en in een preview weergeven. De preview van Leer Svelte: code & bouw laadt de Svelte-compiler om de component te bouwen en heeft daarom een verbinding nodig. De demo met gecompileerde output aan het begin is anders: de gecompileerde code zit in de app en werkt zonder netwerk.
Is Leer Svelte: code & bouw gratis?
De app is gratis te downloaden. De eerste cursus is gratis, met een dagelijks tegoed voor AI Mentor, en Pro ontgrendelt elke cursus, verwijdert advertenties en geeft onbeperkt gebruik van AI Mentor. Je kunt echte lessen doorlopen voordat je beslist of je wilt upgraden.
Moet ik JavaScript al kennen?
Wat HTML en JavaScript maken de eerste cursussen makkelijker, omdat een Svelte-component simpelweg uit die talen in één bestand bestaat. Leer Svelte: code & bouw begint met wat Svelte is en hoe je het instelt, en legt elk concept uit in gewone taal, maar het is een frameworkcursus en geen eerste programmeercursus.
Welke platforms en talen ondersteunt het?
Leer Svelte: code & bouw werkt op iOS via de App Store en op Android via Google Play, en de interface is beschikbaar in 22 talen. De app heeft een leeftijdsclassificatie van 4+, dus niets in het materiaal is aan een leeftijdsbeperking onderhevig.
Aan de slag
Compileer vandaag nog je eerste component
Gratis te beginnen op iOS en Android, in 22 talen.
Meer van CoddyKit
Beschikbaar op iOS en Android.