IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Sortie de la version stable du framework JavaScript Svelte 4
Avec une mise à jour des performances

Le , par Sandra Coret

51PARTAGES

8  0 
Svelte est un framework ou langage de composants frontaux, libre et gratuit, créé par Rich Harris et maintenu par les membres de l'équipe Svelte. Svelte n'est pas une bibliothèque JavaScript monolithique importée par les applications : au lieu de cela, Svelte compile les modèles HTML en code spécialisé qui manipule directement le DOM, ce qui peut réduire la taille des fichiers transférés et améliorer les performances du client.

Le code de l'application est également traité par le compilateur, qui insère des appels pour recalculer automatiquement les données et re-rendre les éléments de l'interface utilisateur lorsque les données dont ils dépendent sont modifiées[8], ce qui permet également d'éviter les frais généraux associés aux représentations intermédiaires à l'exécution, telles que le DOM virtuel, contrairement aux frameworks traditionnels (tels que React et Vue) qui effectuent la majeure partie de leur travail à l'exécution, c'est-à-dire dans le navigateur.

Le compilateur lui-même est écrit en TypeScript. Son code source est placé sous licence MIT et hébergé sur GitHub.

Annonce de Svelte 4

Le temps passe vite - Svelte 3 est sorti il y a plus de quatre ans ! En temps de cadre JavaScript, c'est une éternité. La fraîcheur de Svelte a persisté pendant tout ce temps, mais Node.js et les API des navigateurs ont évolué pendant cette période et aujourd'hui nous mettons à jour Svelte pour profiter de certaines de ces améliorations. Svelte 4 est principalement une version de maintenance, augmentant les exigences minimales de la version et resserrant la conception dans des domaines spécifiques. Elle prépare le terrain pour la prochaine génération de Svelte qui sortira sous le nom de Svelte 5 - nous pensons que vous allez l'adorer.

Si vous n'avez pas encore essayé Svelte, faites un tour dans le tutoriel interactif, sur StackBlitz, ou localement avec npm create svelte@latest. Svelte vous permet de créer facilement des interfaces web en exploitant la puissance du HTML, du CSS, du JS et du compilateur Svelte. Regardez Svelte Radio Live pour en savoir plus sur cette version.
Quoi de neuf ?

Performance

Cette version se traduit par un code d'hydratation plus petit et plus rapide. Pour voir l'impact, les utilisateurs de SvelteKit peuvent voir la taille de leur sortie compilée diminuer en examinant le dossier .svelte-kit/output/client/_app/immutable/nodes. Par exemple, sur kit.svelte.dev, la taille du JS généré sur l'ensemble du site a été réduite de 12,7 % (126,3 kB à 110,2 kB).

Svelte 4 réduit la taille des paquets Svelte de près de 75% (de 10,6 Mo à 2,8 Mo), ce qui signifie moins d'attente lors du npm install. Cette amélioration sera particulièrement visible pour les utilisateurs qui chargent l'expérience d'apprentissage interactive sur learn.svelte.dev pour la première fois, les utilisateurs de la Svelte REPL, et les utilisateurs avec une connectivité limitée. La majorité de la taille restante du paquet est le support eslint, qui nécessite la distribution d'une version CJS, et une fois que la réécriture eslint sera terminée, la taille du paquet Svelte pourra encore diminuer de plus de 50%.

Le nombre de dépendances dans Svelte a été considérablement réduit, passant de 61 à 16. Cela signifie des téléchargements plus rapides pour nos utilisateurs ainsi qu'une moindre susceptibilité aux attaques de la chaîne d'approvisionnement. Le nombre de dépendances a également été légèrement réduit dans les dernières versions de SvelteKit.

Expérience des développeurs

Svelte 4 rend l'expérience de création de Svelte plus intuitive et cohérente : |local est désormais la valeur par défaut pour les transitions afin d'éviter que les animations ne bloquent les transitions de page, les préprocesseurs sont désormais plus faciles à écrire et de nombreuses corrections facilitent la configuration et l'utilisation de CSP.

Pour les utilisateurs de composants web, le changement le plus important est une refonte de la façon dont vous utilisez Svelte pour créer des éléments personnalisés. En changeant la façon dont ils sont générés, toute une série de bogues et d'incohérences ont été éliminés.

Enfin, plusieurs améliorations ont été apportées à l'expérience de création de l'IDE : cmd+click dans les modules svelte vous amène maintenant à l'implémentation plutôt qu'à un fichier .d.ts les imports de svelte/internal sont maintenant cachés et n'encombreront pas les suggestions de l'autocomplete les auto-imports fonctionnent maintenant de manière plus fiable.

Mise à jour du site, de la documentation et du tutoriel

Le site officiel de svelte.dev a été remanié. Il est maintenant divisé en plusieurs pages avec une navigation mobile améliorée, une documentation typescript remaniée, un mode sombre, et un REPL amélioré. Le site SvelteKit est également mis à jour. Et tous les liens des tutoriels ont été mis à jour pour pointer vers la nouvelle expérience learn.svelte.dev. L'ancien tutoriel reste disponible pour les utilisateurs de Safari 16.3 et antérieurs.

Migration

La plupart des applications et des bibliothèques compatibles avec Svelte 3 devraient l'être avec Svelte 4. Les auteurs de bibliothèques devront mettre à jour la gamme de versions pour inclure Svelte 4 si svelte est spécifié dans les peerDependencies. Pour les auteurs d'applications, le changement le plus courant consistera à mettre à jour l'outillage pour qu'il réponde aux exigences de la nouvelle version minimale, par exemple Node.js 16. De nombreuses autres étapes de la migration peuvent être gérées avec npx svelte-migrate@latest svelte-4.

Svelte 5 : la nouvelle génération de Svelte

Svelte 5 sera une réécriture du compilateur et du runtime Svelte. Svelte 4 était principalement destiné à préparer le terrain pour ces améliorations futures en adoptant des outils modernes et en abandonnant le support de certaines versions anciennes de diverses technologies telles que les anciens bundlers. Ces changements seront utiles à plusieurs égards, par exemple en permettant de comparer plus facilement les bases de code de Svelte 5 et de Svelte 4 et en permettant d'exécuter les tests existants avec la nouvelle implémentation. Svelte 5 apportera de nouvelles fonctionnalités majeures et des améliorations de performance à Svelte. Les changements sont encore en cours d'élaboration et ne sont pas encore prêts à être partagés.

Voir la liste complète des Voir la liste complète des changements




Source : Svelte

Et vous ?

Qu'en pensez-vous ?
Faut-il utiliser ou pas Swelte ? Quelle est votre expérience sur ce sujet ?

Voir aussi :

La version 0.6.0 de Bun, la boite à outils pour les applications JavaScript et TypeScript, est désormais disponible, et s'étoffe d'un bundler et d'un minifier JavaScript intégrés

La version 20 de Node.js, le moteur d'exécution JavaScript, est désormais disponible, et inclut plusieurs nouveautés, dont un modèle de permission Node.js, pour offrir des performances améliorées

Des hackers ont inondé NPM avec de faux packages, provoquant une attaque DoS qui a rendu NPM instable, selon un rapport de Checkmarx qui note une explosion de packages publiés en mars

Une erreur dans cette actualité ? Signalez-nous-la !