Questions d'entretien Svelte
1. Qu'est-ce qui differencie Svelte des autres frameworks frontend ?
Svelte est un compilateur plutôt qu'un framework runtime. Au lieu d'envoyer un framework au navigateur qui interprété votre code, Svelte compilé vos composants en JavaScript vanilla optimise au moment du build. Résultat : pas de virtual DOM, des bundles plus petits, et des performances excellentes. Le code réactif est compilé en instructions imperatives directes qui mettent à jour le DOM chirurgicalement.
2. Comment fonctionne la réactivité dans Svelte 5 (runes) ?
Svelte 5 introduit les runes, un nouveau système de réactivité explicite. Les principales runes : $state pour déclarer un état réactif, $derived pour les valeurs calculées (equivalent des computed), $effect pour les effets de bord, $props pour les propriétés du composant. Les runes remplacent l'ancienne réactivité implicite basée sur les assignations ($: label) et offrent une semantique plus claire et composable.
3. Expliquez les stores dans Svelte et leur utilité.
Les stores sont des conteneurs d'état réactif accessibles depuis n'importe quel composant. Svelte fournit writable (lecture/écriture), readable (lecture seule) et derived (calcule à partir d'autres stores). On s'abonne à un store avec le prefixe $ dans les composants. Les stores sont utiles pour l'état partage entre composants non lies, les données globales (authentification, thème) et l'intégration avec des sources de données externes.
4. Qu'est-ce que SvelteKit et comment se compare-t-il a Next.js ?
SvelteKit est le framework fullstack pour Svelte, equivalent à Next.js pour React. Il fournit : routage base sur le système de fichiers, SSR (Server-Side Rendering), SSG (Static Site Génération), API routes (endpoints serveur), layout imbriqués, gestion des erreurs, prerendering selectif. Par rapport à Next.js, SvelteKit offre des bundles plus petits et une syntaxe plus concise, mais un écosystème plus petit.
5. Comment gérer les formulaires dans Svelte ?
Svelte simplifie la gestion des formulaires avec le two-way binding via bind:value. Pour la validation, utilisez les attributs HTML natifs (required, pattern) ou des bibliothèques comme Zod avec superforms. SvelteKit fournit les form actions pour le traitement cote serveur avec progressive enhancement : le formulaire fonctionne sans JavaScript et s'enrichit avec JS pour une meilleure expérience.
6. Expliquez le système de transitions et animations de Svelte.
Svelte inclut un système d'animations natif très puissant. Les transitions (transition:fade, transition:slide, transition:fly) s'appliquent aux éléments qui entrent/sortent du DOM. Les animations (animate:flip) animent les repositionnements dans les listes. Vous pouvez créer des transitions personnalisées en retournant un objet avec duration, css et tick. Le tout est optimise au moment de la compilation.
7. Comment fonctionne le routage dans SvelteKit ?
Le routage de SvelteKit est base sur le système de fichiers dans le dossier src/routes. Chaque dossier represente une route, avec des fichiers conventionnels : +page.svelte (composant), +page.ts (load function client), +page.server.ts (load function serveur), +layout.svelte (layout partage), +error.svelte (page d'erreur). Les routes dynamiques utilisent [param], les routes optionnelles [[param]], et les rest params [...rest].
8. Qu'est-ce que le progressive enhancement dans SvelteKit ?
Le progressive enhancement signifie que l'application fonctionne d'abord sans JavaScript, puis s'enrichit progressivement. Les form actions de SvelteKit fonctionnent en HTML pur (POST classique) et ajoutent AJAX quand JS est disponible. Les liens de navigation fonctionnent comme des liens standard et SvelteKit ajoute le routage client-side. C'est une approche robuste qui garantit l'accessibilité et la fiabilité.
9. Comment optimiser les performances avec Svelte ?
Svelte est déjà très performant grâce à la compilation, mais vous pouvez optimiser davantage : utilisez les directives de chargement (lazy loading d'images), le code splitting automatique de SvelteKit, les each blocks avec key pour les listes performantes, évitez les stores inutiles (préférez les props pour les données locales), et utilisez le prerendering pour les pages statiques.
10. Comment tester une application Svelte ?
Utilisez Vitest comme test runner (rapide, compatible Vite). @testing-library/svelte pour rendre les composants et interagir avec eux de manière centree utilisateur. svelte-testing-library fournit render, fireEvent et les queries. Pour les tests de composants avec stores, mockez les stores ou fournissez des stores de test. Playwright est recommandé pour les tests end-to-end avec SvelteKit.