Che cos'è Svelte e perché compila
Comprenda l'approccio compiler-first di Svelte e le differenze rispetto a React e Vue.
Che cos'è Svelte e perché compila è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Benvenuto in Svelte
Svelte è un framework UI incentrato sul compilatore. A differenza di React o Vue, Svelte svolge gran parte del proprio lavoro in fase di build, non a runtime.
Nessun Virtual DOM
React confronta un Virtual DOM a runtime. Svelte invece compila i componenti in JavaScript vanilla altamente ottimizzato, che aggiorna direttamente il DOM.
Viene distribuito meno codice
Poiché Svelte distribuisce output già compilato, in genere invia meno JavaScript al browser. Le dimensioni dei bundle sono minime.
Formato dei file dei componenti
Un componente Svelte risiede in un file .svelte che contiene tre sezioni opzionali: script, markup e style.
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>Reattività tramite assegnazione
In Svelte, è sufficiente assegnare un nuovo valore a una variabile per attivare un aggiornamento dell'interfaccia. Non è necessario chiamare setState.
<script>
let count = 0;
function inc() { count = count + 1; }
</script>
<button on:click={inc}>{count}</button>Componenti in un unico file
Markup, logica e stili con ambito limitato risiedono nello stesso file. Questa collocazione rende i componenti facili da comprendere e da sottoporre a refactoring.
Stili con ambito limitato per impostazione predefinita
Qualsiasi <style> si scriva viene applicato esclusivamente al componente. Non si verificano più conflitti CSS tra le pagine.
<style>
p { color: tomato; }
</style>
<p>I am tomato</p>Vantaggi in termini di prestazioni
Poiché non c'è l'overhead di un framework a runtime, le app Svelte tendono a essere più veloci di app React o Vue equivalenti sui dispositivi meno potenti.
SvelteKit, il meta-framework
SvelteKit si basa su Svelte e aggiunge routing, SSR e caricamento dei dati. La maggior parte delle app Svelte in produzione usa SvelteKit.
Quando Svelte dà il meglio
Svelte è ideale per siti di marketing, dashboard, app ottimizzate per i dispositivi mobili e, in generale, per i progetti in cui contano le dimensioni del bundle e la DX.
Riepilogo del confronto
React, Vue e Angular distribuiscono tutti un runtime; Svelte lo elimina durante la compilazione. Il risultato: bundle più piccoli e modelli mentali più semplici.
Verifica rapida
Verifichi la Sua comprensione.
Riepilogo
Ora sa che Svelte compila i componenti, distribuisce meno JS, usa stili con ambito limitato e alimenta SvelteKit per le app complete. Prossimo passo: creare il primo progetto.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Che cos'è Svelte e perché compila» è gratuita?
Sì — il testo completo di «Che cos'è Svelte e perché compila» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Che cos'è Svelte e perché compila»?
Comprenda l'approccio compiler-first di Svelte e le differenze rispetto a React e Vue. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Che cos'è Svelte e perché compila»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Che cos'è Svelte e perché compila
- Creazione di un progetto con npm create svelte
- Struttura del progetto: src routes static
- Il server di sviluppo e la sostituzione a caldo dei moduli