Maîtriser SvelteKit : Développement Web Réactif et Ultra-Performant
Maîtriser SvelteKit : Développement Web Réactif et Ultra-Performant

Les Fondamentaux de Svelte : Composants, Réactivité et Props

Bienvenue dans cette leçon essentielle de notre parcours "Maîtriser SvelteKit : Développement Web Réactif et Ultra-Performant". Aujourd'hui, nous allons plonger au cœur de Svelte en explorant ses concepts fondamentaux : les composants, la réactivité et les props. Ces piliers sont absolument cruciaux pour construire des applications Svelte efficaces, maintenables et performantes.

Svelte est unique parmi les frameworks front-end modernes. Au lieu d'interpréter le code de votre application dans le navigateur, Svelte compile votre code au moment de la construction. Le résultat ? Des bundles JavaScript incroyablement petits et des applications d'une rapidité fulgurante, car il n'y a pas de "runtime" lourd à charger. Comprendre comment Svelte gère les composants et leur état est la clé pour exploiter toute cette puissance.

1. Les Composants Svelte : Les Briques de Votre Application

Dans Svelte, tout est un composant. Un composant est une unité de code autonome, encapsulant sa logique (JavaScript), son apparence (CSS) et sa structure (HTML). Cette approche modulaire facilite le développement, la maintenance et la réutilisation du code.

Qu'est-ce qu'un Composant Svelte ?

Un composant Svelte est défini dans un fichier unique avec l'extension .svelte. Ce fichier combine les trois langages du web de manière intuitive :

  • <script> : Contient la logique JavaScript du composant. C'est ici que vous déclarez les variables réactives, définissez les fonctions, gérez les événements et la logique métier.
  • <style> : Contient le CSS spécifique au composant. Par défaut, Svelte "scope" (limite) automatiquement le CSS à ce composant, évitant ainsi les conflits de style globaux. C'est une fonctionnalité très puissante pour la modularité visuelle.
  • Markup HTML : Le reste du fichier est le modèle HTML qui définit la structure de l'interface utilisateur du composant. Vous pouvez y intégrer des expressions JavaScript via des accolades ({expression}).

Avantages des Composants

  • Encapsulation : Chaque composant gère son propre état et ses propres styles.
  • Réutilisabilité : Une fois défini, un composant peut être utilisé plusieurs fois à différents endroits de votre application, voire dans d'autres projets.
  • Maintenabilité : Les problèmes peuvent être isolés et résolus plus facilement dans des unités de code plus petites et bien définies.

Exemple de Composant Simple

Créons un composant Bienvenue.svelte qui affiche un message de bienvenue.

<!-- src/lib/Bienvenue.svelte -->
<script>
    let nom = 'Monde'; // Une variable JavaScript simple
</script>

<style>
    h1 {
        color: #4CAF50;
        font-family: Arial, sans-serif;
    }
</style>

<h1>Bonjour, {nom} !</h1>

<p>Ceci est votre premier composant Svelte.</p>

Pour utiliser ce composant dans un autre fichier Svelte (par exemple, src/routes/+page.svelte ou src/App.svelte pour une application Svelte autonome), vous l'importez et l'utilisez comme une balise HTML personnalisée :

<!-- src/routes/+page.svelte ou src/App.svelte -->
<script>
    import Bienvenue from '$lib/Bienvenue.svelte'; // Chemin d'importation relatif ou alias
</script>

<main>
    <Bienvenue />
</main>

Ce Bienvenue.svelte est un exemple parfait de la simplicité et de la clarté de Svelte.

2. La Réactivité en Svelte : Le Cœur Battant de Votre UI

La réactivité est la capacité d'une application à mettre à jour son interface utilisateur (UI) automatiquement lorsque l'état de ses données change. Svelte gère la réactivité de manière très élégante et performante, sans nécessiter de "Virtual DOM" ou de mécanismes de détection de changements complexes à l'exécution.

Comment Svelte Gère la Réactivité

Le secret de Svelte réside dans son compilateur. Lorsque vous écrivez du code Svelte, le compilateur analyse vos variables et vos affectations. Si une variable est utilisée dans le template HTML et que sa valeur est modifiée via une affectation (opérateur =), Svelte injecte le code JavaScript nécessaire pour mettre à jour directement le DOM, et ce, de manière chirurgicale.

Le principe est simple : une affectation à une variable déclarée avec let est réactive.

// Changement réactif
let count = 0;
function increment() {
    count = count + 1; // Ceci est une affectation, Svelte mettra à jour l'UI
}

// Pas réactif directement (pour les objets/tableaux, à moins d'une réaffectation de l'objet/tableau lui-même)
let user = { name: 'Alice' };
function changeName() {
    user.name = 'Bob'; // Svelte ne détecte pas cette mutation par défaut
    // Pour que cela soit réactif, vous devez réaffecter l'objet ou une propriété
    user = user; // Réaffecte l'objet, forçant Svelte à détecter le changement
    // Ou mieux: user = { ...user, name: 'Bob' };
}

Déclarations Réactives ($:)

Svelte offre un moyen puissant de créer des "déclarations réactives" en utilisant la syntaxe $: (deux points après le signe dollar). Toute expression placée après $: sera ré-évaluée chaque fois que l'une de ses dépendances change. C'est idéal pour les valeurs calculées ou les effets secondaires.

<!-- src/lib/CompteurInteractif.svelte -->
<script>
    let count = 0;

    // Déclaration réactive : 'doubleCount' est recalculé chaque fois que 'count' change.
    $: doubleCount = count * 2;

    // Déclaration réactive : un effet de bord, loggue le message quand 'count' change.
    $: if (count % 5 === 0 && count !== 0) {
        console.log(`Le compteur est un multiple de 5 : ${count}`);
    }

    function increment() {
        count = count + 1; // Cette affectation déclenche la réactivité
    }

    function decrement() {
        count = count - 1; // Cette affectation déclenche aussi la réactivité
    }
</script>

<style>
    button {
        padding: 10px 20px;
        font-size: 1.2em;
        margin: 5px;
        cursor: pointer;
    }
    p {
        font-size: 1.5em;
        font-weight: bold;
    }
</style>

<div>
    <p>Compteur : {count}</p>
    <p>Double du Compteur : {doubleCount}</p>
    <button on:click={increment}>+</button>
    <button on:click={decrement}>-</button>
</div>

Lorsque vous cliquerez sur les boutons, count sera mis à jour, Svelte détectera l'affectation, et la vue ainsi que doubleCount seront automatiquement mis à jour. Le message de la console apparaîtra également lorsque count atteint un multiple de 5.

3. Les Props (Propriétés) : Faire Circuler les Données

Les applications ne sont pas composées que de composants isolés. Souvent, les composants doivent communiquer entre eux, notamment les composants parents qui doivent passer des données à leurs enfants. C'est là que les props (abréviation de "properties") entrent en jeu.

Qu'est-ce qu'une Prop ?

Une prop est un attribut que vous définissez sur un composant enfant lors de son utilisation dans le template d'un composant parent. Le composant enfant reçoit ces props comme des variables locales.

Déclaration des Props avec export let

Dans Svelte, pour qu'une variable devienne une prop acceptée par un composant, vous devez la déclarer avec le mot-clé export let dans la balise <script> du composant enfant.

<!-- src/lib/MessagePersonnalise.svelte -->
<script>
    // Déclare 'nom' et 'age' comme des props que ce composant peut recevoir
    export let nom = 'Inconnu'; // Avec une valeur par défaut
    export let age;           // Sans valeur par défaut, sera 'undefined' si non passé

    // Vous pouvez aussi déclarer des props pour des fonctions
    export let onSaluer = () => console.log("Pas de fonction de salutation fournie.");

    $: message = `Bonjour ${nom} ! ${age ? `Vous avez ${age} ans.` : ''}`;
</script>

<style>
    div {
        border: 1px solid #ddd;
        padding: 15px;
        margin: 10px 0;
        border-radius: 8px;
        background-color: #f9f9f9;
    }
    strong {
        color: #007bff;
    }
</style>

<div>
    <p><strong>Message :</strong> {message}</p>
    <button on:click={onSaluer}>Saluer</button>
</div>

Utilisation des Props dans le Composant Parent

Pour passer des données au composant MessagePersonnalise.svelte, vous l'utilisez dans un composant parent et lui attribuez des valeurs comme des attributs HTML classiques.

<!-- src/routes/+page.svelte (ou un autre composant parent) -->
<script>
    import MessagePersonnalise from '$lib/MessagePersonnalise.svelte';

    let utilisateurActif = {
        prenom: 'Alice',
        age: 30
    };

    function handleSaluerAlice() {
        alert(`Bonjour de la part d'Alice !`);
    }

    function handleSaluerBob() {
        alert(`Bonjour de la part de Bob !`);
    }
</script>

<main>
    <h2>Communication Parent-Enfant avec les Props</h2>

    <h3>Utilisateur Actif (avec toutes les props)</h3>
    <MessagePersonnalise
        nom={utilisateurActif.prenom}
        age={utilisateurActif.age}
        onSaluer={handleSaluerAlice}
    />

    <h3>Utilisateur Invité (avec valeur par défaut pour nom, et une autre fonction)</h3>
    <MessagePersonnalise
        age={25}
        onSaluer={handleSaluerBob}
    />

    <h3>Utilisateur Simple (utilise la valeur par défaut pour nom, pas de fonction onSaluer)</h3>
    <MessagePersonnalise />
</main>

Dans cet exemple :

  • Le premier MessagePersonnalise reçoit nom="Alice", age=30 et une fonction handleSaluerAlice.
  • Le deuxième MessagePersonnalise reçoit nom="Inconnu" (par défaut), age=25 et une fonction handleSaluerBob.
  • Le troisième MessagePersonnalise n'a aucune prop spécifiée, donc nom prend sa valeur par défaut ('Inconnu') et age sera undefined. La fonction onSaluer utilisera également sa valeur par défaut.

Conclusion

Félicitations ! Vous avez maintenant une solide compréhension des fondations de Svelte :

  • Les composants sont les blocs de construction autonomes de votre UI, encapsulant leur logique, style et structure.
  • La réactivité est gérée par le compilateur Svelte, qui détecte les affectations (=) aux variables let pour mettre à jour le DOM de manière très efficace. Les déclarations réactives ($:) permettent de définir des valeurs dérivées et des effets de bord.
  • Les props (déclarées avec export let) sont le mécanisme principal pour passer des données des composants parents aux composants enfants, assurant une communication unidirectionnelle claire.

Ces trois concepts sont interconnectés et essentiels pour développer des applications Svelte. Maîtrisez-les, et vous serez bien armé pour construire des interfaces utilisateur dynamiques et ultra-performantes. Dans les prochaines leçons, nous explorerons d'autres aspects de Svelte, comme la gestion des événements, le cycle de vie des composants et la gestion de l'état global avec les "stores".