Imparare Svelte: Corso Code
Imparare Svelte: Corso Code — Impara Svelte e SvelteKit con un editor live e l’output compilato affiancato
Imparare Svelte: Corso Code è un'app gratuita per iOS e Android per imparare Svelte e SvelteKit sul tuo telefono. Scrivi componenti in un editor live con anteprima, scopri il JavaScript in cui il compilatore li trasforma e completa 41 corsi, dal tuo primo valore reattivo fino a un'app full-stack distribuita, con un Mentore IA al tuo fianco.
- Prezzo
- Gratis, upgrade Pro
- Piattaforme
- iOS e Android
- Lingue
- 22
- Classificazione per età
- 4+
- Requisiti
- iOS 15.1 o versioni successive
Niente di ciò che appare su quella schermata esegue Svelte. Sta eseguendo ciò che Svelte ha scritto.
La prima lezione dell’app mostra un componente di nove righe accanto al JavaScript generato dal compilatore. Tocca +1 e le righe che si attivano si illuminano: un’invalidazione, un valore ricalcolato, due nodi di testo modificati, nient’altro viene toccato. È l’idea alla base del framework, mostrata prima ancora di essere spiegata.
Cos'è
Imparare Svelte: Corso Code è un’app gratuita per iOS e Android che insegna Svelte e SvelteKit attraverso 41 corsi e 163 lezioni, organizzati dal livello principiante a quello avanzato. Si apre con una demo che mostra un componente accanto al suo JavaScript compilato, poi affronta reattività, props, store, transizioni, runes di Svelte 5 e routing di SvelteKit, caricamento dei dati, form actions e distribuzione. Include un editor live con anteprima e un AI Mentor.
Dentro l'app
Come si presenta
Il corso
Cosa comprende il corso di Svelte
41 corsi e 163 lezioni dall'elenco dei corsi dell'app, classificati da A1 a C1 e conclusi da un progetto SvelteKit full-stack.
Primi componenti
Cos'è Svelte e perché adotta un approccio diverso, come configurare un progetto e come scrivere il primo componente con variabili reattive.
Props, template, eventi e binding
Passaggio delle props, condizionali e cicli each nel markup, eventi DOM ed eventi personalizzati, e binding bidirezionale con le direttive bind:.
Ciclo di vita, store e Context
onMount e onDestroy, store writable, readable, derived e personalizzati, slot e composizione, e la Context API.
Transizioni, animazioni e Actions
Direttive per le transizioni, direttiva animate, actions per comportamenti DOM riutilizzabili, transizioni personalizzate e store di movimento spring e tweened.
Fondamenti di SvelteKit
Routing e pagine basati sui file, funzioni load, layout avanzati, form actions, route API, hook del server e pagine di errore.
Rune di Svelte 5
Un'introduzione alle rune, props e snippet, rune avanzate e un'analisi più approfondita del funzionamento della reattività di Svelte.
SvelteKit in produzione
SSR e prerendering, streaming, prestazioni, SEO e meta tag, sicurezza, pattern di autenticazione, adapter e deployment.
Testing e full-stack
Test unitari con Vitest, test end-to-end con Playwright, librerie di terze parti, gestione dello stato su larga scala e un'app SvelteKit full-stack.
Come funziona
Come funziona una sessione
L’app è organizzata attorno a un percorso che parte da un valore reattivo e arriva a un’app distribuibile, e ogni tappa combina lettura e qualcosa da eseguire.
Guarda prima l’output del compilatore
La demo iniziale mette un piccolo componente accanto al JavaScript in cui viene compilato. La parte compilata è stata generata in anticipo ed è inclusa nell’app, quindi la demo funziona senza connessione.
Modifica un componente e visualizza l’anteprima
Le lezioni si aprono con un editor dotato di schede HTML, CSS e JavaScript e di un pulsante di esecuzione che renderizza il componente in un’anteprima. L’anteprima carica il compilatore Svelte tramite la rete, quindi richiede una connessione.
Verifica di aver capito
Dopo ogni argomento seguono un quiz e sfide di coding, mentre l’AI Mentor può spiegare un concetto, suggerire un percorso o farti un quiz su un corso. La Weekly Code Challenge aggiunge una sfida competitiva.
Cosa include
Cosa include l’app
41
Corsi, da A1 a C1
163 lezioni distribuite su 41 corsi, dalla configurazione di Svelte e dal primo componente fino a store, transizioni, routing e hook di SvelteKit, runes di Svelte 5, testing e un progetto finale full-stack.
Compilato
Componente accanto al codice compilato
La demo al primo avvio mostra insieme il codice sorgente e il JavaScript generato e conta i nodi di testo aggiornati rispetto agli elementi ricreati, così il costo di un aggiornamento si può leggere direttamente sullo schermo.
Anteprima
Editor live con anteprima
Scrivi markup, stili e script in schede separate e renderizza il componente sul telefono. L’anteprima usa il compilatore Svelte 4.2.19, quindi il codice scritto con le runes di Svelte 5 potrebbe non essere visualizzato correttamente ed è preferibile leggerlo e seguirne l’esempio.
AI
AI Mentor
Dalla scheda della chat, chiedi i concetti chiave di un corso, consigli per imparare più velocemente, un quiz o un percorso personale, oppure chiedi informazioni su un errore che non riesci a leggere.
Settimanale
Weekly Code Challenge
Una sfida periodica a cui partecipare insieme alle lezioni, con serie consecutive, monitoraggio dei progressi e promemoria per mantenere una routine.
Esame
Certificato di completamento
Supera l’esame finale e il certificato riporterà il tuo nome: è una prova del lavoro svolto, non una qualifica accreditata.
Contesto
Che cos’è Svelte e in cosa si differenzia dagli altri modi di creare un’interfaccia web?
Svelte è un framework per creare interfacce utente in cui i componenti vengono compilati in anticipo in JavaScript puro che aggiorna direttamente la pagina, invece di distribuire un runtime di grandi dimensioni che calcola le modifiche nel browser. Un componente è un singolo file con markup, stili e script, e un’assegnazione come count += 1 è sufficiente per aggiornare lo schermo. SvelteKit è il framework applicativo costruito sopra di esso: aggiunge routing basato sui file, caricamento dei dati lato server, gestione dei form e adapter per la distribuzione. Per chi sta imparando, il risultato pratico è meno codice superfluo e una distanza minore tra il codice e ciò che appare sulla pagina.
Reattività a compile-timeun’assegnazione è lo stato
In Svelte il compilatore riscrive una normale assegnazione nel codice che aggiorna le parti interessate della pagina. Un’istruzione etichettata che inizia con $: ricalcola un valore ogni volta che cambiano i valori che legge, quindi per i dati derivati non servono funzioni helper.
Storestato condiviso tra i componenti
Uno store writable contiene un valore a cui molti componenti possono iscriversi, e anteporre $ al suo nome attiva l’iscrizione automatica. Gli store derived e custom si basano su questo quando lo stato deve essere calcolato o racchiuso in un wrapper.
Runesla sintassi di Svelte 5
Svelte 5 sostituisce gran parte della precedente magia del compilatore con funzioni esplicite come $state, $derived e $props, insieme agli snippet per il markup riutilizzabile. Entrambi gli stili sono usati in progetti reali, perciò l’app insegna il modello originale e quello basato sulle runes come corsi separati.
SvelteKitrouting, dati e distribuzione
Un file come +page.svelte diventa una route, una funzione load recupera i dati prima del rendering della pagina, le form actions gestiscono gli invii sul server e un adapter prepara il risultato per un host statico, un server Node o una piattaforma serverless.
Adatta
A chi è adatta — e a chi no
Fa al caso tuo se
- Vuoi imparare Svelte o SvelteKit in sessioni brevi invece che con lunghi corsi video
- Conosci un po' di HTML e JavaScript e vuoi vedere cosa cambia con un framework compiler-first
- Sei curioso di sapere come funzionano gli aggiornamenti reattivi e preferisci leggere il codice generato invece di accettarlo senza verificarlo
- Vuoi un percorso che arrivi a routing, caricamento dei dati, autenticazione e deployment, non solo ai componenti
- Ti piace chiedere a un Mentor AI perché un pezzo di codice si comporta in un certo modo
Non è lo strumento giusto se
- Vuoi eseguire il codice delle rune di Svelte 5 nell'anteprima, che usa il compilatore Svelte 4.2.19
- Devi creare e fare il deployment di un intero progetto SvelteKit dal telefono, ma per farlo serve ancora un laptop
- Ti aspetti che sia tutto gratuito: il primo corso è gratuito e Pro sblocca il resto
- Non hai mai visto HTML o JavaScript e vuoi seguire un corso di programmazione generale prima di affrontare un framework
Domande
Domande frequenti
Come posso imparare Svelte sul telefono?
Scegli un percorso che combini lettura ed esecuzione del codice, perché Svelte è più facile da capire quando modifichi un valore e guardi la pagina reagire. Imparare Svelte: Corso Code inizia con una demo dell'output compilato, poi propone lezioni con un editor HTML, CSS e JavaScript, un'anteprima e un Mentor AI. Puoi iniziare gratuitamente su iOS e Android.
Svelte è difficile da imparare per chi è alle prime armi?
Svelte è spesso considerato accessibile perché i componenti assomigliano a normali HTML, CSS e JavaScript e un'assegnazione aggiorna la schermata. Le parti più difficili arrivano dopo, con gli store, il ciclo di vita, la separazione tra server e client di SvelteKit e il passaggio alle rune di Svelte 5. Imparare Svelte: Corso Code classifica i suoi 41 corsi da A1 a C1, così gli argomenti vengono presentati nel giusto ordine.
Cos'è SvelteKit e l'app lo insegna?
SvelteKit è il framework applicativo per Svelte e aggiunge routing basato sui file, caricamento dei dati sul server, form actions, hook e adapter per il deployment. Imparare Svelte: Corso Code offre corsi dedicati al routing e alle pagine di SvelteKit, al caricamento dei dati, alle form actions, alle route API, agli hook, alla gestione degli errori, a SSR e prerendering, allo streaming, alla sicurezza e agli adapter.
L'app tratta le rune di Svelte 5?
Sì. Imparare Svelte: Corso Code include corsi su un'introduzione alle rune, props e snippet, e rune avanzate. L'anteprima dell'editor viene attualmente compilata con Svelte 4.2.19, quindi il codice con le rune potrebbe non essere visualizzato nell'anteprima: è meglio seguirlo nel testo della lezione.
Posso eseguire codice Svelte sul telefono?
Puoi scrivere un componente nell'editor e visualizzarlo in un'anteprima. L'anteprima di Imparare Svelte: Corso Code carica il compilatore Svelte per creare il componente, quindi richiede una connessione. La demo iniziale dell'output compilato è diversa: il codice compilato è incluso nell'app e funziona senza rete.
Imparare Svelte: Corso Code è gratuito?
L'app è gratuita da scaricare. Il primo corso è gratuito, con una quota giornaliera di utilizzo del Mentor AI, mentre Pro sblocca tutti i corsi, rimuove gli annunci e offre un utilizzo illimitato del Mentor AI. Puoi seguire lezioni reali prima di decidere se effettuare l'upgrade.
Devo conoscere prima JavaScript?
Conoscere almeno un po' di HTML e JavaScript renderà più semplici i primi corsi, perché un componente Svelte è semplicemente l'unione di questi linguaggi in un unico file. Imparare Svelte: Corso Code inizia spiegando cos'è Svelte e come configurarlo, e illustra ogni concetto con un linguaggio semplice, ma è un corso su un framework, non un corso introduttivo alla programmazione.
Quali piattaforme e linguaggi supporta?
Imparare Svelte: Corso Code funziona su iOS tramite App Store e su Android tramite Google Play, e l'interfaccia è disponibile in 22 lingue. Ha una classificazione 4+, quindi nessun contenuto è soggetto a limiti di età.
Inizia
Compila oggi il tuo primo componente
Inizia gratuitamente su iOS e Android, in 22 lingue.
Altro da CoddyKit
Disponibile su iOS e Android.