Lær Svelte: kod & byg
Lær Svelte: kod & byg — Lær Svelte og SvelteKit med en live-editor og det kompilerede output ved siden af
Lær Svelte: kod & byg er en gratis iOS- og Android-app, hvor du kan lære Svelte og SvelteKit på din telefon. Skriv komponenter i en live-editor med forhåndsvisning, se den JavaScript-kode, som compileren omdanner dem til, og arbejd dig gennem 41 kurser fra din første reaktive værdi til en deployet full-stack-app med en AI-mentor ved din side.
- Pris
- Gratis, Pro-opgradering
- Platforme
- iOS og Android
- Sprog
- 22
- Aldersgrænse
- 4+
- Kræver
- iOS 15.1 eller nyere
Intet på den skærm kører Svelte. Den kører det, som Svelte har skrevet.
Appens første lektion viser en komponent på ni linjer ved siden af den JavaScript-kode, som compileren har genereret til den. Tryk på +1, så lyser de linjer op, der aktiveres: én invalidering, én genberegnet værdi, to ændrede tekstnoder, og intet andet bliver berørt. Det er idéen bag frameworket, vist før den bliver forklaret.
Hvad det er
Lær Svelte: kod & byg er en gratis iOS- og Android-app, der lærer dig Svelte og SvelteKit gennem 41 kurser og 163 lektioner på niveauer fra begynder til avanceret. Den åbner med en demo, der viser en komponent ved siden af dens kompilerede JavaScript, og gennemgår derefter reaktivitet, props, stores, transitions, Svelte 5 runes og SvelteKit-routing, dataindlæsning, form actions og deployment. En live-editor med forhåndsvisning og en AI-mentor er indbygget.
Inde i appen
Sådan ser det ud
Kurset
Det lærer du på Svelte-kurset
41 kurser og 163 lektioner fra appens egen kursusliste, niveauinddelt fra A1 til C1 og afsluttet med et komplet full-stack SvelteKit-projekt.
Første komponenter
Hvad Svelte er, og hvorfor frameworket bruger en anderledes tilgang, hvordan du opsætter et projekt, og hvordan du skriver din første komponent med reaktive variabler.
Props, templates, events og binding
Overførsel af props, betingelser og each-loops i markup, DOM-events og custom events samt two-way binding med bind:-direktiver.
Livscyklus, stores og context
onMount og onDestroy, writable, readable, derived og custom stores, slots og composition samt Context API.
Transitions, animationer og actions
Transition-direktiver, animate-direktivet, actions til genbrugelig DOM-adfærd, custom transitions samt spring- og tweened motion stores.
SvelteKit-grundlag
Filbaseret routing og sider, load-funktioner, avancerede layouts, form actions, API-routes, server hooks og fejlsider.
Svelte 5 Runes
En introduktion til runes, props og snippets, avancerede runes samt et dybere kig på, hvordan Svelte's reaktivitet fungerer.
SvelteKit i produktion
SSR og prerendering, streaming, performance, SEO og metatags, sikkerhed, auth-mønstre, adapters og deployment.
Testing og full-stack
Unit-tests med Vitest, end-to-end-tests med Playwright, tredjepartsbiblioteker, state management i stor skala og en full-stack SvelteKit-app.
Sådan fungerer det
Sådan fungerer en session
Appen er bygget op omkring en vej fra én reaktiv værdi til en deployerbar app, og hvert stop kombinerer læsning med noget, du kan køre.
Se compilerens output først
Den indledende demo placerer en lille komponent ved siden af den JavaScript-kode, den kompileres til. Den kompilerede del blev genereret på forhånd og leveres sammen med appen, så demoen kører uden forbindelse.
Redigér en komponent, og se den i forhåndsvisning
Lektionerne åbner en editor med faner til HTML, CSS og JavaScript samt en kør-knap, der renderer komponenten i en forhåndsvisning. Forhåndsvisningen indlæser Svelte-compileren over netværket, så den kræver en forbindelse.
Tjek, om det sidder fast
Hvert emne følges af en quiz og kodningsudfordringer, og AI-mentoren kan forklare et koncept, foreslå en læringsplan eller quizze dig i et kursus. Weekly Code Challenge tilføjer en konkurrencepræget runde.
Hvad det indeholder
Det får du med appen
41
Kurser, A1 til C1
163 lektioner fordelt på 41 kurser, fra opsætning af Svelte og din første komponent til stores, transitions, SvelteKit-routing og hooks, Svelte 5 runes, test og et full-stack-afslutningsprojekt.
Kompileret
Komponent ved siden af dens kompilerede kode
Demoen ved første kørsel viser kildekoden og den genererede JavaScript samlet og tæller opdaterede tekstnoder over for elementer, der er blevet oprettet igen, så omkostningen ved en opdatering er noget, du kan aflæse på skærmen.
Forhåndsvisning
Live-editor med forhåndsvisning
Skriv markup, styles og script i separate faner, og render komponenten på telefonen. Forhåndsvisningen bruger Svelte 4.2.19-compileren, så kode skrevet med Svelte 5 runes muligvis ikke kan forhåndsvises og derfor bedst læses og følges med i.
AI
AI-mentor
Spørg efter et kursus’ vigtigste koncepter, tips til at lære hurtigere, en quiz eller en personlig læringsplan fra chatfanen, eller spørg om en fejl, du ikke kan tyde.
Ugentlig
Weekly Code Challenge
En tilbagevendende udfordringsrunde, hvor du kan konkurrere sideløbende med lektionerne, med streaks, fremskridtssporing og påmindelser, der hjælper dig med at holde en rutine.
Eksamen
Gennemførelsesbevis
Bestå den afsluttende eksamen, så får beviset dit navn på, hvilket dokumenterer arbejdet, men ikke er en akkrediteret kvalifikation.
Baggrund
Hvad er Svelte, og hvordan adskiller det sig fra andre måder at bygge en webgrænseflade på?
Svelte er et framework til at bygge brugergrænseflader, hvor komponenter på forhånd kompileres til almindelig JavaScript, der opdaterer siden direkte, i stedet for at sende et stort runtime-miljø med, som beregner ændringerne i browseren. En komponent er en enkelt fil med markup, styles og script, og en tildeling som count += 1 er nok til at opdatere skærmen. SvelteKit er applikationsframeworket, der er bygget oven på det, og som tilføjer filbaseret routing, dataindlæsning på serversiden, formularhåndtering og adapters til deployment. I praksis betyder det for den lærende mindre boilerplate og kortere afstand mellem koden og det, der vises på siden.
Reaktivitet ved kompileringen tildeling er state
I Svelte omskriver compileren en almindelig tildeling til den kode, der opdaterer de berørte dele af siden. En labelled statement, der begynder med $:, genberegner en værdi, hver gang de værdier, den læser, ændres, så afledte data ikke kræver hjælpefunktioner.
Storesdelt state på tværs af komponenter
En writable store indeholder en værdi, som mange komponenter kan abonnere på, og når navnet får præfikset $, aktiveres et automatisk abonnement. Derived og custom stores bygger videre på dette, når state skal beregnes eller pakkes ind.
Runessyntaksen i Svelte 5
Svelte 5 erstatter meget af den tidligere compiler-magi med eksplicitte funktioner som $state, $derived og $props samt snippets til genbrugelig markup. Begge stilarter bruges i rigtige projekter, og derfor lærer appen den oprindelige model og runes-modellen som separate kurser.
SvelteKitrouting, data og deployment
En fil som +page.svelte bliver til en route, en load-funktion henter data, før siden renderes, form actions håndterer indsendelser på serveren, og en adapter pakker resultatet til en statisk host, en Node-server eller en serverless-platform.
Egnethed
Hvem det er til — og hvem det ikke er til
Det passer godt til dig, hvis du
- Vil du lære Svelte eller SvelteKit i korte sessioner i stedet for lange videokurser
- Kender du noget HTML og JavaScript og vil du se, hvad et compiler-first-framework ændrer
- Er du nysgerrig efter, hvordan reaktive opdateringer fungerer, og foretrækker du at læse den genererede kode frem for bare at stole på den
- Vil du have en læringssti, der når frem til routing, dataindlæsning, auth og deployment – ikke kun komponenter
- Kan du lide at spørge en AI Mentor, hvorfor et stykke kode opfører sig, som det gør
Det er ikke det rette værktøj, hvis du
- Vil du køre Svelte 5 runes-kode i previewet, som bruger Svelte 4.2.19-compileren
- Har du brug for at bygge og deploye et helt SvelteKit-projekt fra telefonen, selv om det stadig kræver en laptop
- Forventer du, at alt er gratis: Det første kursus er gratis, og Pro låser resten op
- Har du aldrig set HTML eller JavaScript før og ønsker du et generelt programmeringskursus, før du går i gang med et framework
Spørgsmål
Ofte stillede spørgsmål
Hvordan lærer jeg Svelte på en telefon?
Vælg en læringssti, der kombinerer læsning med at køre kode, for Svelte er lettest at forstå, når du ændrer en værdi og ser siden reagere. Lær Svelte: kod & byg begynder med en demo af det kompilerede output og giver dig derefter lektioner med en HTML-, CSS- og JavaScript-editor, et preview og en AI Mentor. Du kan komme gratis i gang på iOS og Android.
Er Svelte svært at lære for en nybegynder?
Svelte betragtes ofte som let at gå til, fordi komponenterne ligner almindelig HTML, CSS og JavaScript, og en tildeling opdaterer skærmen. De svære dele kommer senere med stores, livscyklus, opdelingen mellem server og klient i SvelteKit samt overgangen til Svelte 5 runes. Lær Svelte: kod & byg niveauinddeler sine 41 kurser fra A1 til C1, så emnerne kommer i den rigtige rækkefølge.
Hvad er SvelteKit, og lærer appen det?
SvelteKit er applikationsframeworket til Svelte og tilføjer filbaseret routing, dataindlæsning på serveren, form actions, hooks og deployment-adapters. Lær Svelte: kod & byg har dedikerede kurser i SvelteKit-routing og sider, dataindlæsning, form actions, API-routes, hooks, fejlhåndtering, SSR og prerendering, streaming, sikkerhed og adapters.
Dækker appen Svelte 5 runes?
Ja. Lær Svelte: kod & byg indeholder kurser om en introduktion til runes, props og snippets samt avancerede runes. Editorens preview kompilerer i øjeblikket med Svelte 4.2.19, så runes-kode muligvis ikke kan vises i previewet og derfor bedst følges i lektionsteksten.
Kan jeg køre Svelte-kode på min telefon?
Du kan skrive en komponent i editoren og rendere den i et preview. Lær Svelte: kod & byg's preview indlæser Svelte-compileren for at bygge komponenten, så det kræver en forbindelse. Den indledende demo af det kompilerede output er anderledes: Den kompilerede kode følger med i appen og kan køre uden netværk.
Er Lær Svelte: kod & byg gratis?
Appen er gratis at downloade. Det første kursus er gratis med en daglig kvote til AI Mentor, og Pro låser alle kurser op, fjerner reklamer og giver ubegrænset adgang til AI Mentor. Du kan gennemføre rigtige lektioner, før du beslutter dig for at opgradere.
Skal jeg kunne JavaScript på forhånd?
Lidt HTML og JavaScript gør de første kurser lettere, fordi en Svelte-komponent blot er de to sprog i én fil. Lær Svelte: kod & byg begynder med, hvad Svelte er, og hvordan du sætter det op, og forklarer hvert koncept i et enkelt sprog, men det er et framework-kursus og ikke et første programmeringskursus.
Hvilke platforme og sprog understøtter det?
Lær Svelte: kod & byg kører på iOS via App Store og på Android via Google Play, og brugerfladen findes på 22 sprog. Det er klassificeret 4+, så intet af materialet er aldersbegrænset.
Kom i gang
Kompilér din første komponent i dag
Gratis at komme i gang på iOS og Android på 22 sprog.
Mere fra CoddyKit
Tilgængelig på iOS og Android.