Créez une liste de lecture avec Svelte
Svelte a reçu de nombreux éloges au cours des deux dernières années et est loin d’être « un autre framework frontend ». Il a remporté le titre de « percée de l’année » dans le cadre de l’enquête State of JS 2019, suivi de la première place du classement de satisfaction en 2020. Il a également été élu « framework web le plus aimé » dans l’enquête Stack Overflow 2021.
Svelte séduit les développeurs par sa combinaison d’une petite taille de paquet, de très bonnes performances et de facilité d’utilisation. En même temps, il est livré avec de nombreux goodies. Une solution simple de gestion d’état sur laquelle s’appuyer est déjà fournie, ainsi que des transitions et des animations prêtes à l’emploi. Ce tutoriel d’introduction vous expliquera comment Svelte y parvient. Les tutoriels suivants de la série expliqueront plus en détail comment mettre en œuvre des applications avec Svelte en utilisant les diverses possibilités offertes par Svelte.
L’histoire de Svelte
Mais d’abord, un peu d’histoire sur Svelte. Bien qu’il ne soit entré dans le grand public qu’au début des années 2020, Svelte existe depuis bien plus longtemps.
Le premier commit sur GitHub date de fin 2016. Son créateur est Rich Harris, un magicien de l’open-source dont l’autre invention la plus marquante est Rollup, un bundler moderne. À l’époque, Rich Harris travaillait au magazine d’information The Guardian en tant que rédacteur graphique. Sa routine quotidienne consistait à créer des visualisations interactives pour le site Web, et il souhaitait disposer d’un outil qui lui permette de les écrire facilement sans faire de compromis sur la taille ou la vitesse des paquets. En même temps, il voulait quelque chose d’abordable pour que d’autres collègues moins férus de technologie puissent créer rapidement des visualisations.
C’est de ces besoins qu’est né Svelte. Parti de la salle de rédaction, Svelte a rapidement rassemblé un petit nombre d’adeptes dans la communauté open-source. Mais ce n’est qu’en avril 2019 que Svelte s’est vraiment fait connaître au monde entier. Cette date marquait la sortie de la version 3, qui était une réécriture complète axée sur l’expérience des développeurs et l’accessibilité. Depuis, la popularité de Svelte a beaucoup augmenté, d’autres mainteneurs ont rejoint l’équipe, et Rich Harris a même rejoint Vercel pour travailler sur Svelte à plein temps.
Pour un tutoriel approfondi sur Svelte et ses différences avec React et Vue, consultez Svelte 3 : A Radical Compiler-based JavaScript Framework.
Création d’une liste de livres simple
Plongeons dans Svelte ! Nous allons construire une petite liste de livres qui nous permettra d’ajouter et de supprimer des livres de notre liste de lecture. Le résultat final ressemblera à l’image ci-dessous.
Nous allons commencer par échafauder notre projet à partir d’un modèle de projet. Nous utiliserons le modèle officiel de Svelte. Les alternatives seraient d’utiliser un modèle alimenté par Vite ou d’utiliser SvelteKit, un cadre au-dessus de Svelte pour construire des applications à part entière avec un routage intégré, mais nous allons le garder aussi simple que possible pour ce tutoriel.
Après avoir téléchargé le modèle, allez dans son dossier et exécutez npm install, qui télécharge tous les paquets dont nous avons besoin pour commencer. Ensuite, nous passerons à App.svelte, où nous remplacerons le contenu par une version HTML uniquement pour mettre en place les visuels que nous voulons :
h4>Ajouter un livre
h4>
input type="text" />
h4>Mes livres
h4>
ul>
li>Un livre
li>
ul>Nous pouvons écrire le code ci-dessus directement au niveau supérieur du fichier Svelte ; nous n’avons pas besoin d’ajouter d’éléments d’habillage. La syntaxe de Svelte est un sur-ensemble de HTML, donc tout ce qui est valable dans un fichier HTML l’est aussi dans un fichier Svelte.
La question est maintenant de savoir comment y introduire les parties dynamiques. Nous allons commencer par ajouter une liste statique au script et la rendre à travers une boucle :
script>
let books = ['Learning Svelte', 'The Zen of Cooking Tea'];
/script>
étiquette>
h4>Ajouter un livre/h4>
input type="text" />
/label>
h4>Mes livres/h4>
ul>
{#chaque livre comme livre}
li>{book}/li>
{/each}
/ul>Nous avons ajouté une balise script dans laquelle nous mettons notre logique JavaScript liée au composant. Cette logique est exécutée chaque fois que le composant se monte. Nous améliorons également le HTML avec une syntaxe Svelte spéciale pour créer une boucle et imprimer le titre de chaque livre. Comme vous pouvez le constater, Svelte possède une syntaxe distincte pour les blocs de flux de contrôle, contrairement à Vue ou Angular, qui ajoutent une telle fonctionnalité sous la forme d’attributs spéciaux. Cela rend le code plus lisible, car vous pouvez plus facilement le repérer. Cela rend également inutile la création d’éléments enveloppants si vous souhaitez contenir plus d’un élément de niveau supérieur dans le bloc de flux de contrôle.
Le titre d’un livre est édité en entourant la variable d’accolades. En général, chaque fois que vous rencontrez une accolade dans le modèle, vous savez que vous entrez quelque chose en rapport avec Svelte. Nous examinerons plus en détail la syntaxe des modèles dans la deuxième partie de cette série de tutoriels.
Réagir aux entrées de l’utilisateur
Nous pouvons maintenant rendre une liste arbitraire de titres de livres, définie par notre variable books. Mais qu’en est-il de l’ajout d’un nouveau livre ? Pour ce faire, nous devons améliorer notre logique dans la balise et la connecter à l’élément :
script>
let books = ['Learning Svelte', 'The Zen of Cooking Tea'];
let newBook = '';
function addBook(evt) {
if (evt.key === 'Enter') {
books = [... books, newBook];
newBook = '';
}
}
/script>
étiquette>
h4>Ajouter un livre/h4>
input type="text" bind:value={newBook} on:keydown={addBook} />
/label>
h4>Mes Livres/h4>
ul>
{#each books as book}
li>{book}/li>
{/each}
/ul>Nous avons ajouté une nouvelle variable appelée newBook, qui doit refléter la valeur d’entrée. Pour ce faire, nous la lions à l’adresse en écrivant bind:value={newBook}. Cela établit une liaison bidirectionnelle, de sorte que chaque fois que l’utilisateur saisit du texte dans la balise , newBook se met à jour, et si newBook est mis à jour dans la balise , la valeur d’affichage de change. Nous aurions pu faire la même chose avec de simples attributs dynamiques, mais cette méthode nous permet d’économiser du code – un modèle de pensée que vous rencontrerez souvent dans Svelte.
Lorsque l’utilisateur appuie sur la touche Entrée, nous voulons ajouter le nouveau titre du livre à la liste. Pour ce faire, nous ajoutons un écouteur d’événement DOM. Pour dire à Svelte de s’accrocher à l’événement, nous ajoutons simplement deux points entre on et le reste du nom de l’événement – dans ce cas, c’est on:keydown. Après cela, nous utilisons les accolades et plaçons le nom de la fonction à l’intérieur. La fonction est appelée chaque fois que l’événement se déclenche. Vous trouverez plus d’informations sur cette syntaxe de modèle dans la deuxième partie de cette série de didacticiels.
La fonction à appeler dans ce cas est addBook, dans laquelle nous vérifions l’événement clavier, et si l’utilisateur a effectivement appuyé sur la touche Entrée, nous mettons à jour la variable books. Remarquez l’absence d’un contexte this comme on le trouve dans Angular ou Vue 2, ou l’absence d’objets de valeur spéciaux comme dans Vue 3, ou l’absence de setState dans React. Svelte n’a pas besoin de syntaxe supplémentaire dans ce cas pour savoir que la variable a été mise à jour. Cela peut ressembler à de la magie, mais aussi à du « simple JavaScript » en même temps.
Pour comprendre comment Svelte parvient à ce résultat, nous devons regarder sous le capot. Que fait réellement Svelte avec un fichier .svelte, et quand le traite-t-il ? La réponse : Svelte est en fait un compilateur ! Il effectue la majeure partie du travail avant même que votre code ne soit chargé dans le navigateur. Svelte analyse le code et le transforme en JavaScript normal. Au cours de l’analyse, il est capable de voir que des variables comme newBook sont utilisées dans le modèle, et que les affectations à ces variables provoqueront des rerendus. Le résultat de la compilation enveloppera donc ces affectations avec des appels à une fonction $$invalidate, qui planifiera un rerender de ce composant exact pour la prochaine peinture du navigateur. C’est le secret de la grande performance de Svelte : il sait à l’avance quelles parties pourraient déclencher des rerenders et n’a donc besoin de travailler qu’à ces endroits exacts, en mettant à jour chirurgicalement le DOM. C’est également la raison pour laquelle la taille des paquets des applications Svelte est si petite : tout ce qui n’est pas nécessaire ne fera pas partie de la sortie, donc Svelte peut laisser de côté chaque partie de son minuscule runtime qui n’est pas nécessaire. Une application Svelte Hello World ! a une taille de paquet de seulement 2.5KB !
La seule chose à laquelle il faut faire attention est que Svelte ne recherche que les affectations. C’est pourquoi nous devons faire books = [...books, newBook] ; ou books.push(newBook) ; books = books ;. Sinon, Svelte ne saurait pas que books a été mis à jour.
Les touches finales
Nous avons réussi ! Nous pouvons maintenant afficher et ajouter des livres à notre liste ! Mais ce n’est pas si joli que ça, alors mettons quelques touches finales à notre interface utilisateur. Tout d’abord, nous allons ajouter quelques CSS pour styliser nos éléments :
!-- script et code html... -->
style>
input {
padding: 5px 10px;
}
li {
list-style: none;
}
ul {
padding: 5px 0;
}
/style>Comme vous pouvez le voir, nous ajoutons simplement un
à notre fichier .svelte et nous continuons à y écrire du CSS normal. Si vous craignez que le code ci-dessus donne un style à toutes les pages ,
ou
de l’ensemble de l’application, sachez que ce n’est pas le cas. Par défaut, Svelte met les styles à l’échelle, de sorte qu’ils ne s’appliquent qu’au composant dans lequel ils sont définis. Si vous voulez définir quelque chose de manière globale, enveloppez le sélecteur avec la fonction:global. Si, par exemple, vous souhaitez donner un style à tous lesde l’application, le code serait:global(input) { padding :5px 10px ; }.Le style est meilleur maintenant. Terminons par une transition pour une meilleure UX : nous voulons que les nouveaux éléments de liste s’affichent en fondu. Pour ce faire, il nous suffit d’attraper l’une des transitions et animations intégrées de Svelte et de les appliquer :
script> import { fade } de 'svelte/transition'; /script> !-- entrée ... --> h4>Mes livres/h4> ul> {#chaque livre comme livre} li transition:fade>{book}/li> {/each} /ul> !-- style ... -->Et c’est tout ! En important simplement l’une des transitions intégrées et en l’appliquant en ajoutant
transition:fadeà l’élément, nous obtenons cette transition en fondu en douceur. Notre mini application est maintenant terminée. Elle ne contient pas encore la barre supérieure et le dégradé d’arrière-plan, mais il devrait être facile maintenant pour vous de les ajouter également. Voici le résultat final :script> import { fade } de 'svelte/transition'; let books = ['Learning Svelte', 'The Zen of Cooking Tea']; let newBook = ''; function addBook(evt) { if (evt.key === 'Enter') { books = [... books, newBook]; newBook = ''; } } /script> étiquette> h4>Ajouter un livre/h4> input type="text" bind:value={newBook} on:keydown={addBook} /> /label> h4>Mes Livres/h4> ul> {#each books as book} li transition:fade>{book}/li> {/each} /ul> style> input { padding: 5px 10px; } li { list-style: none; } ul { padding: 5px 0; } /style>Considérations architecturales
Nous avons vu comment écrire une petite application dans Svelte avec seulement 32 lignes de code. Nous n’avons fait qu’effleurer la surface, bien sûr. Une application complète a besoin d’une certaine forme de gestion d’état, de plusieurs composants et de moyens d’intégrer ces composants les uns aux autres.
Par exemple, il serait logique de séparer l’affichage d’une tâche dans un composant distinct, car nous ajouterons des fonctions telles que la modification du nom sur place ou le marquage de la tâche. Avoir tout cela dans un seul composant deviendrait difficile à maintenir au fil du temps. Heureusement, l’utilisation d’autres composants est aussi simple que de les importer par défaut d’un autre fichier Svelte et d’interagir avec eux d’une manière similaire à ce que nous avons déjà vu avec les éléments DOM ordinaires. Nous examinerons l’interaction des composants plus en détail dans la cinquième partie de cette série.
Un autre exemple serait la gestion des to-dos. Pour l’instant, elles sont gérées à l’intérieur du composant et il n’y a pas de connexion à un backend. Si nous devions ajouter des appels d’API, nous mélangerions la logique de l’interface utilisateur avec l’interaction du backend, qui est généralement mieux gérée en dehors des composants pour une meilleure séparation des préoccupations. Pour cela, nous pouvons utiliser les magasins Svelte, que nous examinerons dans la quatrième partie.
Comme vous pouvez le constater, Svelte a des solutions à toutes nos exigences, et nous les examinerons au cours de cette série.
Prêts, partez … Svelte ?
Alors, est-il prudent d’utiliser Svelte pour votre prochain projet ? Votre responsable pourrait vous demander si Svelte sera encore là dans les années à venir ou s’il va s’éteindre comme les précédentes stars des frameworks frontaux. Aucune grande entreprise ne soutient l’ensemble du développement de Svelte comme c’est le cas pour Angular et React, mais Vue a déjà montré que ce n’est pas un problème. De plus, comme indiqué au début, Rich Harris, le créateur de Svelte, y travaille désormais à plein temps. Avec l’augmentation continue de la popularité de Svelte, il n’y a aucun signe qu’il ira nulle part dans les années à venir.
Un autre aspect du choix d’un framework est l’écosystème et son outillage. L’écosystème est encore petit comparé à React, mais de nouvelles bibliothèques sortent chaque jour, et il existe déjà une poignée de très bonnes bibliothèques de composants. En même temps, puisque Svelte est si proche de vanilla HTML et JavaScript, il est très facile d’intégrer n’importe quelle bibliothèque HTML/JavaScript ordinaire existante dans votre base de code, sans avoir besoin de bibliothèques enveloppantes.
En ce qui concerne l’outillage, Svelte se présente plutôt bien. Il y a une extension officielle VS Code qui est activement maintenue, ainsi qu’un serveur de langage sous-jacent qui peut être utilisé par de nombreux autres IDE pour intégrer Intellisense. IntelliJ dispose également d’un plugin pour Svelte et a récemment engagé le créateur à l’origine de ce projet pour travailler chez JetBrains. Il existe également divers outils pour intégrer Svelte avec différents bundlers. Et oui, vous pouvez également utiliser TypeScript avec Svelte.
Si vous cherchez à créer un site Web complet ou une application Web, vous pourriez également être intéressé par SvelteKit (voir notre Guide du débutant pour SvelteKit). Il offre une expérience de développement exceptionnelle et est doté d’un routeur flexible basé sur le système de fichiers. Il vous permet également de déployer sur de nombreuses plates-formes différentes comme Vercel, Netlify, votre propre serveur Node, ou simplement un bon vieux serveur de fichiers statique, en fonction des fonctionnalités et des besoins de votre application.
Quelques faits sur Svelte
En bref, voici les points importants à retenir au sujet de Svelte :
- il a un mainteneur à plein temps
- il dispose de bons outils
- ses fonctionnalités sont stables
- son écosystème est en pleine croissance
- SvelteKit est disponible pour créer rapidement des applications
Prochaines étapes
Svelte est définitivement prêt à être utilisé pour votre prochain projet !
Ceci était la première partie d’une série de 6 parties sur SitePoint Premium. Dans la deuxième partie, nous examinerons de près la syntaxe des modèles. Dans la troisième partie, nous examinerons les instructions réactives et la manière dont elles nous aident à réagir aux changements de variables ou à dériver des variables calculées. La partie 4 s’intéressera aux magasins, qui nous aideront avec la logique en dehors et à travers les fichiers Svelte, et que nous pouvons également utiliser pour la gestion des états. La partie 5 s’intéresse à divers concepts d’interaction entre composants. Enfin, dans la partie 6, nous nous pencherons sur le test des applications Svelte.
Cette série est également disponible sur Amazon ici : Svelte : A Beginner’s Guide
.
Nous espérons avoir suscité votre intérêt pour Svelte !
