Questions d'entretien Svelte
1. Qu'est-ce qui differencie Svelte des autres frameworks frontend ?
Svelte est un compilateur plutot qu'un framework runtime. Au lieu d'envoyer un framework au navigateur qui interprete votre code, Svelte compile vos composants en JavaScript vanilla optimise au moment du build. Resultat : pas de virtual DOM, des bundles plus petits, et des performances excellentes. Le code reactif est compile en instructions imperatives directes qui mettent a jour le DOM chirurgicalement.
2. Comment fonctionne la reactivite dans Svelte 5 (runes) ?
Svelte 5 introduit les runes, un nouveau systeme de reactivite explicite. Les principales runes : $state pour declarer un etat reactif, $derived pour les valeurs calculees (equivalent des computed), $effect pour les effets de bord, $props pour les proprietes du composant. Les runes remplacent l'ancienne reactivite implicite basee sur les assignations ($: label) et offrent une semantique plus claire et composable.
3. Expliquez les stores dans Svelte et leur utilite.
Les stores sont des conteneurs d'etat reactif accessibles depuis n'importe quel composant. Svelte fournit writable (lecture/ecriture), readable (lecture seule) et derived (calcule a partir d'autres stores). On s'abonne a un store avec le prefixe $ dans les composants. Les stores sont utiles pour l'etat partage entre composants non lies, les donnees globales (authentification, theme) et l'integration avec des sources de donnees externes.
4. Qu'est-ce que SvelteKit et comment se compare-t-il a Next.js ?
SvelteKit est le framework fullstack pour Svelte, equivalent a Next.js pour React. Il fournit : routage base sur le systeme de fichiers, SSR (Server-Side Rendering), SSG (Static Site Generation), API routes (endpoints serveur), layout imbriques, gestion des erreurs, prerendering selectif. Par rapport a Next.js, SvelteKit offre des bundles plus petits et une syntaxe plus concise, mais un ecosysteme plus petit.
5. Comment gerer 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 bibliotheques 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 experience.
6. Expliquez le systeme de transitions et animations de Svelte.
Svelte inclut un systeme d'animations natif tres puissant. Les transitions (transition:fade, transition:slide, transition:fly) s'appliquent aux elements qui entrent/sortent du DOM. Les animations (animate:flip) animent les repositionnements dans les listes. Vous pouvez creer des transitions personnalisees 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 systeme 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'accessibilite et la fiabilite.
9. Comment optimiser les performances avec Svelte ?
Svelte est deja tres performant grace a 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, evitez les stores inutiles (preferez les props pour les donnees 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 maniere 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 recommande pour les tests end-to-end avec SvelteKit.