Lær Svelte: kod & bygg
Lær Svelte: kod & bygg — Lær Svelte og SvelteKit med en live-editor og det kompilerte resultatet ved siden av
Lær Svelte: kod & bygg er en gratis iOS- og Android-app for å lære Svelte og SvelteKit på telefonen. Skriv komponenter i en live-editor med forhåndsvisning, se JavaScript-koden kompilatoren gjør dem om til, og jobb deg gjennom 41 kurs – fra din første reaktive verdi til en distribuert fullstack-app – med en AI-mentor ved siden av.
- Pris
- Gratis, Pro-oppgradering
- Plattformer
- iOS og Android
- Språk
- 22
- Aldersgrense
- 4+
- Krever
- iOS 15.1 eller nyere
Ingenting på den skjermen kjører Svelte. Den kjører det Svelte har skrevet.
Appens første leksjon viser en komponent på ni linjer ved siden av JavaScript-koden kompilatoren genererte for den. Trykk på +1, så lyser linjene som kjøres opp: én ugyldiggjøring, én omberegnet verdi, to endrede tekstnoder – ingenting annet berøres. Det er ideen bak rammeverket, vist før den blir forklart.
Hva det er
Lær Svelte: kod & bygg er en gratis iOS- og Android-app som lærer deg Svelte og SvelteKit gjennom 41 kurs og 163 leksjoner, gradert fra nybegynner- til avansertnivå. Den åpner med en demonstrasjon som viser en komponent ved siden av den kompilerte JavaScript-koden, og dekker deretter reaktivitet, props, stores, overganger, Svelte 5-runer og SvelteKit-routing, datalasting, skjemahandlinger og utrulling. En live-editor med forhåndsvisning og en AI-mentor er innebygd.
Inne i appen
Slik ser den ut
Kurset
Dette dekker Svelte-kurset
41 kurs og 163 leksjoner fra appens egen kursliste, gradert fra A1 til C1 og avsluttet med et komplett fullstack-SvelteKit-prosjekt.
Første komponenter
Hva Svelte er og hvorfor det bruker en annerledes tilnærming, hvordan du setter opp et prosjekt, og hvordan du skriver din første komponent med reaktive variabler.
Props, maler, hendelser og binding
Sende props, betingelser og each-løkker i markup, DOM-hendelser og egendefinerte hendelser, samt toveisbinding med bind:-direktiver.
Livssyklus, stores og kontekst
onMount og onDestroy, writable-, readable-, derived- og egendefinerte stores, slots og komposisjon, samt Context API.
Overganger, animasjoner og actions
Transition-direktiver, animate-direktivet, actions for gjenbrukbar DOM-adferd, egendefinerte overganger samt spring- og tweened-motion-stores.
Grunnlaget i SvelteKit
Filbasert ruting og sider, load-funksjoner, avanserte oppsett, form actions, API-ruter, server hooks og feilsider.
Svelte 5 Runes
En introduksjon til runes, props og snippets, avanserte runes og en grundigere gjennomgang av hvordan reaktiviteten i Svelte fungerer.
SvelteKit i produksjon
SSR og forhåndsgenerering, strømming, ytelse, SEO og metatagger, sikkerhet, auth-mønstre, adaptere og utrulling.
Testing og fullstack
Enhetstester med Vitest, ende-til-ende-tester med Playwright, tredjepartsbiblioteker, tilstandsbehandling i stor skala og en fullstack-SvelteKit-app.
Slik fungerer det
Slik fungerer en økt
Appen er organisert rundt en vei fra én reaktiv verdi til en app som kan rulles ut, og hvert stopp kombinerer lesing med noe som kan kjøres.
Se kompilatorens resultat først
Den innledende demonstrasjonen viser en liten komponent ved siden av JavaScript-koden den kompileres til. Den kompilerte delen ble generert på forhånd og leveres med appen, så demonstrasjonen fungerer uten forbindelse.
Rediger en komponent og forhåndsvis den
Leksjonene åpner en editor med faner for HTML, CSS og JavaScript, samt en kjør-knapp som gjengir komponenten i en forhåndsvisning. Forhåndsvisningen laster Svelte-kompilatoren over nettverket, så den trenger en forbindelse.
Sjekk at det sitter
En quiz og kodeutfordringer følger hvert tema, og AI-mentoren kan forklare et konsept, foreslå en læringsplan eller quize deg i et kurs. Weekly Code Challenge legger til en konkurranserunde.
Hva den inneholder
Dette følger med appen
41
Kurs, A1 til C1
163 leksjoner fordelt på 41 kurs, fra oppsett av Svelte og din første komponent til stores, overganger, SvelteKit-routing og hooks, Svelte 5-runer, testing og et fullstack-avslutningsprosjekt.
Kompilert
Komponent ved siden av den kompilerte koden
Demonstrasjonen ved første oppstart viser kildekoden og den genererte JavaScript-koden sammen, og teller oppdaterte tekstnoder mot elementer som er opprettet på nytt, slik at kostnaden ved en oppdatering er noe du kan lese direkte på skjermen.
Forhåndsvisning
Live-editor med forhåndsvisning
Skriv markup, stiler og script i separate faner, og gjengi komponenten på telefonen. Forhåndsvisningen bruker Svelte 4.2.19-kompilatoren, så kode skrevet med Svelte 5-runer kan hende ikke vises riktig. Den bør derfor heller leses og følges trinn for trinn.
AI
AI-mentor
Be om de viktigste konseptene i et kurs, tips for å lære raskere, en quiz eller en personlig læringsplan fra chattefanen, eller spør om en feil du ikke klarer å lese.
Ukentlig
Weekly Code Challenge
En fast utfordringsrunde du kan delta i ved siden av leksjonene, med rekker, fremdriftssporing og påminnelser som hjelper deg å holde rutinen ved like.
Eksamen
Kursbevis
Bestå avsluttende eksamen, så får kursbeviset navnet ditt. Det dokumenterer arbeidet, men er ikke en akkreditert kvalifikasjon.
Bakgrunn
Hva er Svelte, og hvordan skiller det seg fra andre måter å bygge et webgrensesnitt på?
Svelte er et rammeverk for å bygge brukergrensesnitt der komponenter kompileres på forhånd til ren JavaScript som oppdaterer siden direkte, i stedet for å sende med en stor runtime som beregner endringene i nettleseren. En komponent er én enkelt fil med markup, stiler og script, og en tilordning som count += 1 er nok til å oppdatere skjermen. SvelteKit er applikasjonsrammeverket som er bygget oppå dette, og legger til filbasert routing, lasting av data på serversiden, skjemahåndtering og adaptere for utrulling. I praksis betyr dette mindre boilerplate og kortere avstand mellom koden og det som vises på siden for den som lærer.
Reaktivitet ved kompileringen tilordning er tilstanden
I Svelte skriver kompilatoren om en vanlig tilordning til koden som oppdaterer de berørte delene av siden. En merket setning som starter med $: beregner en verdi på nytt hver gang verdiene den leser, endres, slik at avledede data ikke trenger hjelpefunksjoner.
Storesdelt tilstand på tvers av komponenter
En skrivbar store inneholder en verdi som mange komponenter kan abonnere på, og når navnet får prefikset $, aktiveres et automatisk abonnement. Avledede og egendefinerte stores bygger videre på dette når tilstanden må beregnes eller pakkes inn.
Runersyntaksen i Svelte 5
Svelte 5 erstatter mye av den tidligere kompilatormagien med eksplisitte funksjoner som $state, $derived og $props, samt snippets for gjenbrukbar markup. Begge stilene brukes i virkelige prosjekter, og derfor lærer appen bort den opprinnelige modellen og runemodellen i separate kurs.
SvelteKitrouting, data og utrulling
En fil som +page.svelte blir en rute, en load-funksjon henter data før siden gjengis, skjemahandlinger håndterer innsendinger på serveren, og en adapter pakker resultatet for en statisk vert, en Node-server eller en serverless-plattform.
Passer
Hvem den er for – og ikke for
Passer godt for deg hvis du
- Vil du lære Svelte eller SvelteKit i korte økter i stedet for lange videokurs
- Kan du litt HTML og JavaScript og vil se hva et compiler-first-rammeverk endrer
- Er du nysgjerrig på hvordan reaktive oppdateringer fungerer, og foretrekker å lese den genererte koden fremfor å stole på at den fungerer
- Vil du ha en læringssti som når frem til ruting, datalasting, auth og utrulling – ikke bare komponenter
- Liker du å spørre en AI Mentor hvorfor en kodelinje oppfører seg slik den gjør
Ikke riktig verktøy for deg hvis du
- Vil du kjøre Svelte 5 runes-kode i forhåndsvisningen, som bruker Svelte 4.2.19-kompilatoren
- Trenger du å bygge og rulle ut et helt SvelteKit-prosjekt fra telefonen, noe som fortsatt krever en laptop
- Forventer du at alt skal være gratis: Det første kurset er gratis, og Pro låser opp resten
- Har du aldri sett HTML eller JavaScript før og ønsker et generelt programmeringskurs før et rammeverk
Spørsmål
Ofte stilte spørsmål
Hvordan kan jeg lære Svelte på telefonen?
Velg en læringssti som kombinerer lesing med å kjøre kode, fordi Svelte er enklest å forstå når du endrer en verdi og ser siden reagere. Lær Svelte: kod & bygg starter med en demo av kompilert output og gir deg deretter leksjoner med en editor for HTML, CSS og JavaScript, en forhåndsvisning og en AI Mentor. Du kan komme i gang gratis på iOS og Android.
Er Svelte vanskelig å lære for nybegynnere?
Svelte regnes ofte som lett å komme i gang med fordi komponentene ser ut som vanlig HTML, CSS og JavaScript, og en tilordning oppdaterer skjermen. Det vanskelige kommer senere, med stores, livssyklus, skillet mellom server og klient i SvelteKit og overgangen til Svelte 5 runes. Lær Svelte: kod & bygg graderer de 41 kursene sine fra A1 til C1, slik at disse temaene kommer i riktig rekkefølge.
Hva er SvelteKit, og lærer appen bort det?
SvelteKit er applikasjonsrammeverket for Svelte og legger til filbasert ruting, datalasting på serveren, form actions, hooks og adaptere for utrulling. Lær Svelte: kod & bygg har egne kurs om SvelteKit-ruting og sider, datalasting, form actions, API-ruter, hooks, feilhåndtering, SSR og forhåndsgenerering, strømming, sikkerhet og adaptere.
Dekker appen Svelte 5 runes?
Ja. Lær Svelte: kod & bygg inkluderer kurs om en introduksjon til runes, props og snippets, samt avanserte runes. Forhåndsvisningen i editoren kompilerer for øyeblikket med Svelte 4.2.19, så runes-kode vises kanskje ikke i forhåndsvisningen og bør best følges i leksjonsteksten.
Kan jeg kjøre Svelte-kode på telefonen?
Du kan skrive en komponent i editoren og gjengi den i en forhåndsvisning. Forhåndsvisningen i Lær Svelte: kod & bygg laster inn Svelte-kompilatoren for å bygge komponenten, så den trenger en tilkobling. Demoen av kompilert output i starten er annerledes: Den kompilerte koden følger med i appen og kjører uten nettverk.
Er Lær Svelte: kod & bygg gratis?
Appen er gratis å laste ned. Det første kurset er gratis, med en daglig kvote for AI Mentor, mens Pro låser opp alle kurs, fjerner annonser og gir ubegrenset tilgang til AI Mentor. Du kan gå gjennom ekte leksjoner før du bestemmer deg for om du vil oppgradere.
Må jeg kunne JavaScript først?
Litt HTML og JavaScript gjør de første kursene enklere, fordi en Svelte-komponent ganske enkelt er disse språkene i én fil. Lær Svelte: kod & bygg starter med hva Svelte er og hvordan du setter det opp, og forklarer hvert konsept på et enkelt språk, men det er et rammeverkskurs og ikke et første programmeringskurs.
Hvilke plattformer og språk støtter det?
Lær Svelte: kod & bygg kjører på iOS via App Store og på Android via Google Play, og grensesnittet er tilgjengelig på 22 språk. Det er rangert 4+, så ingenting i materialet har aldersbegrensning.
Kom i gang
Kompiler din første komponent i dag
Gratis å komme i gang på iOS og Android, på 22 språk.
Mer fra CoddyKit
Tilgjengelig på iOS og Android.