Qu’est-ce que Svelte et pourquoi compile-t-il
Découvrez l’approche de Svelte fondée sur le compilateur et ses différences avec React et Vue.
Qu’est-ce que Svelte et pourquoi compile-t-il est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Bienvenue dans Svelte
Svelte est un cadre d'interface utilisateur privilégiant la compilation. Contrairement à React ou Vue, Svelte effectue l'essentiel de son travail au moment de la compilation, et non lors de l'exécution.
Pas de DOM virtuel
React compare un DOM virtuel lors de l'exécution. Svelte compile plutôt vos composants en JavaScript standard hautement optimisé, qui met directement à jour le DOM.
Moins de code envoyé
Comme Svelte envoie du code compilé, vous transmettez généralement moins de JavaScript au navigateur. La taille des paquets est minime.
Format d'un fichier de composant
Un composant Svelte se trouve dans un fichier .svelte contenant trois sections facultatives : le script, le balisage et les styles.
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>Réactivité par affectation
Dans Svelte, il suffit d'affecter une nouvelle valeur à une variable pour déclencher une mise à jour de l'interface utilisateur. Aucun appel à setState n'est nécessaire.
<script>
let count = 0;
function inc() { count = count + 1; }
</script>
<button on:click={inc}>{count}</button>Composants dans un seul fichier
Le balisage, la logique et les styles limités au composant se trouvent ensemble dans un seul fichier. Ce regroupement facilite la compréhension et la refactorisation des composants.
Styles limités au composant par défaut
Tout <style> que vous écrivez est limité au composant concerné. Finis les conflits de CSS entre les pages.
<style>
p { color: tomato; }
</style>
<p>I am tomato</p>Gains de performance
Comme aucun environnement d'exécution de cadre n'est nécessaire, les applications Svelte ont tendance à être plus rapides que les applications React ou Vue équivalentes sur les appareils peu puissants.
SvelteKit, le méta-cadre
SvelteKit s'appuie sur Svelte et ajoute le routage, le SSR et le chargement des données. La plupart des applications Svelte destinées à la production utilisent SvelteKit.
Quand Svelte excelle
Svelte est idéal pour les sites marketing, les tableaux de bord, les applications adaptées aux mobiles et partout où la taille du paquet et la DX comptent.
Récapitulatif de la comparaison
React, Vue et Angular fournissent tous un environnement d'exécution ; Svelte le supprime lors de la compilation. Résultat : des paquets plus petits et des modèles mentaux plus simples.
Vérification rapide
Vérifiez votre compréhension.
Récapitulatif
Vous savez maintenant que Svelte compile les composants, envoie moins de JS, utilise des styles limités au composant et alimente SvelteKit pour les applications complètes. Ensuite : créez votre premier projet.
Questions Fréquemment Posées
La leçon « Qu’est-ce que Svelte et pourquoi compile-t-il » est-elle gratuite ?
Oui — le texte complet de « Qu’est-ce que Svelte et pourquoi compile-t-il » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Qu’est-ce que Svelte et pourquoi compile-t-il » ?
Découvrez l’approche de Svelte fondée sur le compilateur et ses différences avec React et Vue. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Qu’est-ce que Svelte et pourquoi compile-t-il » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Qu’est-ce que Svelte et pourquoi compile-t-il
- Créer un projet avec npm create svelte
- Structure du projet : src routes static
- Le serveur de développement et le remplacement de module à chaud