Lär dig Svelte: koda & bygg
Lär dig Svelte: koda & bygg — Lär dig Svelte och SvelteKit med en live-editor och den kompilerade koden bredvid
Lär dig Svelte: koda & bygg är en gratis iOS- och Android-app för att lära dig Svelte och SvelteKit på telefonen. Skriv komponenter i en live-editor med förhandsvisning, se den JavaScript-kod som kompilatorn omvandlar dem till och gå igenom 41 kurser – från ditt första reaktiva värde till en driftsatt fullstack-app – med en AI Mentor vid din sida.
- Pris
- Gratis, uppgradering till Pro
- Plattformar
- iOS och Android
- Språk
- 22
- Åldersgräns
- 4+
- Kräver
- iOS 15.1 eller senare
Inget på den skärmen kör Svelte. Den kör det som Svelte skrev.
Appens första lektion visar en komponent med nio rader bredvid den JavaScript-kod som kompilatorn genererade för den. Tryck på +1 så markeras raderna som körs: en invalidering, ett omberäknat värde, två ändrade textnoder – inget annat påverkas. Det är grundidén bakom ramverket, visad innan den förklaras.
Vad det är
Lär dig Svelte: koda & bygg är en gratis iOS- och Android-app som lär ut Svelte och SvelteKit genom 41 kurser och 163 lektioner, nivåindelade från nybörjare till avancerad nivå. Den börjar med en demo som visar en komponent bredvid dess kompilerade JavaScript-kod och går sedan igenom reaktivitet, props, stores, övergångar, Svelte 5-runes och SvelteKit-routing, dataladdning, formuläråtgärder och driftsättning. En live-editor med förhandsvisning och en AI Mentor ingår.
I appen
Så här ser det ut
Kursen
Det här ingår i Svelte-kursen
41 kurser och 163 lektioner från appens egen kurslista, graderade från A1 till C1 och avslutade med ett fullskaligt SvelteKit-projekt.
Första komponenterna
Vad Svelte är och varför det använder en annorlunda metod, hur du konfigurerar ett projekt och skriver din första komponent med reaktiva variabler.
Props, mallar, händelser och bindning
Skicka props, använda villkor och each-loopar i markup, DOM-händelser och anpassade händelser samt tvåvägsbindning med bind:-direktiv.
Livscykel, stores och context
onMount och onDestroy, writable, readable, derived och anpassade stores, slots och komposition samt Context API.
Övergångar, animationer och actions
Övergångsdirektiv, animate-direktivet, actions för återanvändbart DOM-beteende, anpassade övergångar samt motion-stores för spring och tweened.
Grunderna i SvelteKit
Filbaserad routing och sidor, load-funktioner, avancerade layouter, form actions, API-rutter, server hooks och felsidor.
Svelte 5 Runes
En introduktion till runes, props och snippets, avancerade runes samt en djupare genomgång av hur Svelte:s reaktivitet fungerar.
SvelteKit i produktion
SSR och prerendering, streaming, prestanda, SEO och meta-taggar, säkerhet, auth-mönster, adapters och driftsättning.
Testning och fullstack
Enhetstester med Vitest, end-to-end-tester med Playwright, tredjepartsbibliotek, skalbar state management och en fullstack-app med SvelteKit.
Så fungerar det
Så fungerar en session
Appen är uppbyggd kring en väg från ett reaktivt värde till en driftsättningsbar app, och varje steg blandar läsning med något som du får köra.
Se kompilatorns output först
Den inledande demon placerar en liten komponent bredvid den JavaScript-kod som den kompileras till. Den kompilerade delen genererades i förväg och finns inbyggd i appen, så demon fungerar utan anslutning.
Redigera en komponent och förhandsvisa den
Lektionerna öppnar en editor med flikarna HTML, CSS och JavaScript samt en körknapp som renderar komponenten i en förhandsvisning. Förhandsvisningen laddar Svelte-kompilatorn över nätverket och behöver därför en anslutning.
Se till att det fastnar
Efter varje ämne följer ett quiz och kodutmaningar, och AI Mentor kan förklara ett koncept, föreslå en studieplan eller förhöra dig på en kurs. Weekly Code Challenge lägger till en tävlingsomgång.
Det här ingår
Det här ingår i appen
41
Kurser, A1 till C1
163 lektioner fördelade på 41 kurser, från installation av Svelte och din första komponent till stores, övergångar, SvelteKit-routing och hooks, Svelte 5-runes, testning och ett fullstack-slutprojekt.
Kompilerad
Komponent bredvid sin kompilerade kod
Demon vid första starten visar källkoden och den genererade JavaScript-koden tillsammans och räknar uppdaterade textnoder mot element som skapats på nytt, så att kostnaden för en uppdatering blir något du kan läsa av på skärmen.
Förhandsvisning
Live-editor med förhandsvisning
Skriv markup, styles och script i separata flikar och rendera komponenten på telefonen. Förhandsvisningen använder Svelte 4.2.19-kompilatorn, så kod som skrivits med Svelte 5-runes kanske inte kan förhandsvisas och bör i stället läsas och följas steg för steg.
AI
AI Mentor
Be om en genomgång av en kurs viktigaste koncept, tips för att lära dig snabbare, ett quiz eller en personlig studieplan i chattfliken, eller fråga om ett fel du inte kan tyda.
Veckovis
Weekly Code Challenge
En återkommande utmaningsomgång där du kan tävla parallellt med lektionerna, med sviter, uppföljning av framsteg och påminnelser som hjälper dig att hålla rutinen.
Examen
Slutförandeintyg
Klara slutprovet och intyget får ditt namn – det är ett bevis på arbetet, inte en ackrediterad examen.
Bakgrund
Vad är Svelte och hur skiljer det sig från andra sätt att bygga ett webbgränssnitt?
Svelte är ett ramverk för att bygga användargränssnitt där komponenter kompileras i förväg till vanlig JavaScript som uppdaterar sidan direkt, i stället för att skicka med en stor runtime som räknar ut ändringarna i webbläsaren. En komponent är en enda fil med markup, styles och script, och en tilldelning som count += 1 räcker för att uppdatera skärmen. SvelteKit är applikationsramverket som bygger vidare på det och lägger till filbaserad routing, dataladdning på serversidan, formulärhantering och adaptrar för driftsättning. I praktiken innebär det mindre boilerplate och ett kortare avstånd mellan koden och det som visas på sidan.
Reaktivitet vid kompileringen tilldelning är state
I Svelte skriver kompilatorn om en vanlig tilldelning till den kod som uppdaterar de berörda delarna av sidan. En label-sats som börjar med $: beräknar om ett värde varje gång värdena som den läser ändras, så härledda data kräver inga hjälpfunktioner.
Storesdelad state mellan komponenter
En skrivbar store innehåller ett värde som många komponenter kan prenumerera på, och om namnet föregås av $ aktiveras automatisk prenumeration. Härledda och anpassade stores bygger vidare på detta när state behöver beräknas eller kapslas in.
Runessyntaxen i Svelte 5
Svelte 5 ersätter mycket av den tidigare kompilatormagin med explicita funktioner som $state, $derived och $props, tillsammans med snippets för återanvändbar markup. Båda stilarna används i riktiga projekt, vilket är anledningen till att appen lär ut den ursprungliga modellen och runes-modellen i separata kurser.
SvelteKitrouting, data och driftsättning
En fil som +page.svelte blir en route, en load-funktion hämtar data innan sidan renderas, formuläråtgärder hanterar inskickningar på servern och en adapter paketerar resultatet för en statisk host, en Node-server eller en serverless-plattform.
Passar
Vem den är till för – och vem den inte är till för
Passar bra om du
- Vill du lära dig Svelte eller SvelteKit i korta pass i stället för genom långa videokurser
- Kan du lite HTML och JavaScript och vill se vad ett compiler-first-ramverk förändrar
- Är du nyfiken på hur reaktiva uppdateringar fungerar och föredrar att läsa den genererade koden framför att bara lita på den
- Vill du ha en väg som når routing, dataladdning, auth och driftsättning – inte bara komponenter
- Tycker du om att fråga en AI Mentor varför en koddel fungerar som den gör
Inte rätt verktyg om du
- Vill du köra kod med Svelte 5 runes i förhandsvisningen, som använder Svelte 4.2.19-kompilatorn
- Behöver du bygga och driftsätta ett helt SvelteKit-projekt från telefonen, vilket fortfarande kräver en laptop
- Förväntar du dig att allt ska vara kostnadsfritt: den första kursen är kostnadsfri och Pro låser upp resten
- Har du aldrig sett HTML eller JavaScript och vill gå en allmän programmeringskurs innan du börjar med ett ramverk
Frågor
Vanliga frågor
Hur kan jag lära mig Svelte på en telefon?
Välj en väg som blandar läsning med att köra kod, eftersom Svelte är lättast att förstå när du ändrar ett värde och ser sidan reagera. Lär dig Svelte: koda & bygg börjar med en demo av kompilerad output och ger dig sedan lektioner med en HTML-, CSS- och JavaScript-redigerare, en förhandsvisning och en AI Mentor. Det är kostnadsfritt att börja på iOS och Android.
Är Svelte svårt att lära sig för en nybörjare?
Svelte anses ofta vara lättillgängligt eftersom komponenterna ser ut som vanlig HTML, CSS och JavaScript och en tilldelning uppdaterar skärmen. De svåra delarna kommer senare, med stores, livscykel, uppdelningen mellan server och klient i SvelteKit och övergången till Svelte 5 runes. Lär dig Svelte: koda & bygg graderar sina 41 kurser från A1 till C1, så att dessa ämnen kommer i rätt ordning.
Vad är SvelteKit och lär appen ut det?
SvelteKit är applikationsramverket för Svelte och lägger till filbaserad routing, dataladdning på servern, form actions, hooks och adapters för driftsättning. Lär dig Svelte: koda & bygg har särskilda kurser om routing och sidor i SvelteKit, dataladdning, form actions, API-rutter, hooks, felhantering, SSR och prerendering, streaming, säkerhet och adapters.
Tar appen upp Svelte 5 runes?
Ja. Lär dig Svelte: koda & bygg innehåller kurser om en introduktion till runes, props och snippets samt avancerade runes. Förhandsvisningen i redigeraren kompilerar för närvarande med Svelte 4.2.19, så kod med runes kanske inte kan förhandsvisas och följs bäst i lektionstexten.
Kan jag köra Svelte-kod på min telefon?
Du kan skriva en komponent i redigeraren och rendera den i en förhandsvisning. Förhandsvisningen i Lär dig Svelte: koda & bygg laddar Svelte-kompilatorn för att bygga komponenten, så den kräver en anslutning. Den inledande demon av kompilerad output fungerar annorlunda: den kompilerade koden levereras inuti appen och körs utan nätverk.
Är Lär dig Svelte: koda & bygg kostnadsfritt?
Appen är kostnadsfri att ladda ner. Den första kursen är kostnadsfri, med en daglig AI Mentor-kvot, och Pro låser upp alla kurser, tar bort annonser och ger obegränsad AI Mentor. Du kan gå igenom riktiga lektioner innan du bestämmer dig för att uppgradera.
Måste jag kunna JavaScript först?
Vissa kunskaper i HTML och JavaScript gör de tidiga kurserna enklare, eftersom en Svelte-komponent helt enkelt består av dessa språk i samma fil. Lär dig Svelte: koda & bygg börjar med vad Svelte är och hur du konfigurerar det och förklarar varje koncept på ett lättbegripligt språk, men det är en kurs i ett ramverk och inte en första programmeringskurs.
Vilka plattformar och språk stöder appen?
Lär dig Svelte: koda & bygg körs på iOS via App Store och på Android via Google Play, och gränssnittet finns på 22 språk. Appen är klassad 4+, så inget i materialet har åldersbegränsningar.
Kom igång
Kompilera din första komponent idag
Kostnadsfritt att börja på iOS och Android, på 22 språk.
Mer från CoddyKit
Tillgänglig på iOS och Android.