Svelte est un framework simple et facile à utiliser et ses dernières modifications devraient le rendre encore plus facile.

En juin 2023, Svelte a annoncé sa dernière version stable, la version 4. La mise à jour de Svelte 4 est principalement une version de maintenance de Svelte 3, visant à préparer le terrain pour que la prochaine génération de Svelte sorte en tant que Svelte 5.

Svelte 4 ajoute diverses améliorations à l'écosystème Svelte, notamment une refonte du site Web, la définition des transitions locales par défaut, l'amélioration de la prise en charge des composants Web et le passage de TypeScript à JSDoc.

1. Refonte du site svelte

Svelte 4 est arrivé avec des améliorations à l'officiel Site Web svelte. Le nouveau look du site est fantastique, avec des documents TypeScript améliorés, une option de mode sombre, et une expérience utilisateur généralement améliorée sur tous les appareils.

Le site Svelte dispose désormais d'un REPL amélioré qui vous permet d'expérimenter le code Svelte directement dans le navigateur.

instagram viewer

De plus, tous les liens du didacticiel Svelte pointent désormais vers la nouvelle expérience des apprenants Svelte, tandis que les anciens didacticiels sont disponibles pour les utilisateurs de Safari 16.3 et versions antérieures.

2. Les transitions locales sont par défaut

Imaginez l'expérience douloureuse de devoir se contenter de transitions CSS après avoir vu votre page se charger plus longtemps que prévu parce que vous avez utilisé des transitions Svelte.

Habituellement, une transition se joue lorsque vous détruisez un bloc parent. Vous pouvez remplacer ce comportement avec le |locale modificateur. Cela entraîne l'exécution de la transition uniquement lorsque vous détruisez le bloc contenant le composant cible. Dans Svelte 4, cela |locale modificateur est défini par défaut pour les transitions.

Dans l'extrait ci-dessous, une transition de diapositive est ajoutée localement au div élément:

 {article}

3. Prise en charge améliorée des composants Web

Svelte a toujours promu la réutilisation et la maintenabilité, d'où son support continu pour les composants Web. Les composants Web vous permettent de créer des éléments HTML personnalisés réutilisables avec des styles et des comportements injectés.

Svelte 4 change la façon dont il génère des composants Web, en supprimant les bogues et les incohérences. Ces modifications incluent :

  • Exporter crée un accessoire de composant, le rendant accessible aux consommateurs de composants.
  • Les missions sont réactives. Pour modifier l'état d'un composant et déclencher un nouveau rendu, affectez-le à une variable déclarée localement.
  • Utilisez le $ symbole au début d'une instruction pour la marquer comme une instruction réactive. Les instructions réactives s'exécutent après un autre code de script et avant le rendu du balisage du composant, chaque fois que les valeurs dépendantes changent.
  • Lors de la création d'objets de magasin, préfixez le magasin avec $ pour permettre un accès réactif à une valeur.
  • Définition de l'attribut de contexte d'une balise de script sur module provoque l'exécution du script une fois lors de la première évaluation du module plutôt que pour chaque instance de composant.

4. Le passage de TypeScript à JSDoc

JSDoc est un outil de documentation qui prend en charge l'ajout d'annotations de type et de commentaires aux codes JavaScript.

Considérant que JSDoc incite les développeurs à documenter leurs codes, cette migration vise à encourager davantage de développeurs Svelte à prendre l'habitude de documenter correctement leurs codes. Une base de code JavaScrpt correctement documentée nécessiterait peu ou pas de vérification de type.

Si vous débutez avec TypeScript, vous devriez explorez TypeScript et découvrez pourquoi les développeurs le préfèrent.

Migration vers Svelte 4

Svelte 4 offre des performances améliorées et un développement rationalisé, ce qui est excellent pour créer des applications Web hautes performances. Cette nouvelle version devrait également encourager une meilleure documentation du code avec le passage à JSDoc.

Svelte continue de s'améliorer, et bien que ce ne soit pas un framework que tous les développeurs connaissent, ceux qui le louent fortement.