La version 3 de Svelte, un framework JavaScript de composants graphiques, supporte officiellement le langage de programmation TypeScript,

Depuis juillet 2020

Le 2020-08-05 21:55:32, par Aurélien, Membre éprouvé

Rappelons tout d'abord que Svelte est un framework web dont l'objectif selon son concepteur Rich Harris, est de compilé du code JavaScript afin de produire un code de qualité, le plus léger possible, sans abstraction ou virtualisation du DOM, pour un chargement hyper court et des performances très rapides. Le plus gros avantage de Svelte depuis sa version 3 est comme son nom l’indique, le très faible poids de l’application une fois compilée. Ce qui promet une vitesse de chargement impossible à atteindre avec des frameworks comme Angular, Vue.js ou React, qui embarquent un « runtime » en plus du code logique de l’application.

Cependant; Svelte souffrait jusqu'ici d'un gros souci lié à son incompatibilité avec le langage de programmation TypeScript. Ce sur quoi, certains membres de la communauté autour du projet Svelte s'étaient penchés afin de concilier les deux outils dans des projets expérimentaux. Et c'est ainsi que le 17 juillet 2020, Svelte a officiellement annoncé la prise en charge totale du langage de programmation TypeScript par son framework web.

Concrètement, cette prise en charge se manifeste par le fait que le framework Svelte permet entre autres d'effectuer certaines opérations comme:

la possibilité d'utiliser TypeScript dans les balises <script>,

la vérification du code TypeScript,

l'autocomplétion lors de la saisie du code,

l'importation des composants Svelte dans un module TypeScript,

Et bien entendu, la compilation du code TypeScript via l'API TSServer.

A noter également que les éditeurs disposant d'un client LSP (Language Server Protocol) pourront intégrer l'extension Svelte, comme c'est déjà le cas avec l'éditeur Visual Studio. A ce jour des travaux d'intégration de Svelte sont en cour sur l'éditeur Atom et très prochainement l'on aura sur Vim une intégration complète via le projet coc-svelte en cours de réalisation.

Selon Orta Therox membre de l'équipe du projet Svelte, ces extensions permettront d'améliorer l'expérience de codage du développeur tout en offrant des outils d'inférence et de refactoring. Il sera par exemple possible d'ajouter le décorateur « // @check-js » en haut d'une balise <script> en utilisant JavaScript pour obtenir de meilleurs messages d'erreur sans changement de contexte. Ou d'utiliser la balise <script lang="ts"> pour passer d'un <script> à un TypeScript. En effet, le support du langage de programmation TypeScript par le framework Svelte se fait dans un premier temps via le compilateur tsc qui s'exécute en ligne de commande pour transcompiler « *.ts » en « *.js », puis ensuite via le TSServer qui est une API chargée de répondre aux requêtes effectuées depuis les éditeurs de texte. Le TSServer va permettre aux développeurs de solliciter le compilateur tsc (en arrière plan) et en temps réel via l'éditeur pendant le codage.

Pour finir, il est également possible d'ajouter TypeScript à un projet Svelte existant via l'ajout des dépendances:

Code :

npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check

Ces dépendances auront pour objectifs de favoriser la compilation des fichiers .ts édités après la mise en place du fichier de configuration tsconfig.json à la racine du projet:

Code :

1
2
3
4
5
{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*", "src/node_modules"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}

Source : Svelte

Et vous ?

Que pensez-vous de cette nouvelle évolution du framework Svelte ?
L'avez-vous déjà testé ? Si oui, quel est votre sentiment ?

Voir aussi

La version 3 de Svelte, le framework de composants graphiques, est disponible. Et repense la réactivité des frameworks autrement

The State Of JavaScript 2018 : l'enquête révèle que JavaScript est en constante évolution voici une vue macro des technologies JS utilisées

React : la version 16.8 de la bibliothèque JavaScript est disponible et embarque une version stable des Hooks

Quels sont les frameworks que vous aimeriez apprendre en 2019 ? Et quelles sont vos motivations ?

Discussion forum

8 commentaires

ganatan
Futur Membre du Club

Angular a mauvaise presse.
Pourtant Typescript ne cesse de progresser en notoriété.

Et typescript c'est indéniablement lié à Angular.

Svelte s'y met aussi.

Alors Typescript présage d'un avenir radieux pour Angular ou pas ?

le 09/08/2020 à 9:20
ganatan
Futur Membre du Club

Je suis d'accord.

Typescript 2012
Angular 2016

Mais qui avait entendu parler de Typescript avant Angular.

Je confirme Le C un bijou (pour moi c'était en 1991).
Mais J'irai encore plus loin encore pour moi 1987 et l'assembleur.
Alors là on est au coeur de la fournaise.

le 10/08/2020 à 17:47
LordJerem
Membre régulier

Angular a popularisé TypeScript
La plupart des libs/frameworks js qui sortent tendent à être écrit en TypeScript avec le support TS associé (Vue et React aussi)

le 15/08/2020 à 11:41
marc.collin
Membre émérite

pour avoir utiliser il y a plus de 13 ans ces produits

http://www.gwt-ext.com/demo/
https://www.sencha.com/products/extjs/
https://smartclient.com/

et
avoir dû utiliser à quelques reprises en autre

https://angular.io/
https://fr.reactjs.org/

je trouve le développement plus complexe qu'auparavant sans compté que les composants UI ne se sont pas autant améliorer

je mentionne que c'est pour du développement d'application de gestion

j'ai pu utiliser une approche hybride via

https://www.thymeleaf.org/

sans faire de refresh de la page en utilisant des fragments... certains librarie/framework appele cela des composants

j'ai simplifié encore plus en rajoutant https://htmx.org

je n'ai pas utilisé SvelteKit, mais à premier vue, ça semble comme les autres, faut écrire beaucoup de code pour faire peu, beaucoup de fichier, donc plus de maintenance

je trouve effectivement qu'il ya trop de framework, ils apportent peu car le développement ne s'est pas simplifié

alors qu'avec le combo thymeleaf, htmx, en quelques heures, les gens (bon ils avaient un background jsp) étaient opérationnels

je reste cependant assez décu, car c'est toujours pas évident de devoir gérer de multiple langage, formatage des dates, nombres.... rien de bien standard

le 16/12/2022 à 15:46
jopopmk
Membre expert

Envoyé par ganatan

[..] Et typescript c'est indéniablement lié à Angular. [..]

C'est plutôt l'inverse, Typescript (Microsoft) a été créé avant Angular (Google) et, comme on le voit ici, peut faire sa vie sans ce dernier.

le 10/08/2020 à 12:00
Zefling
Expert confirmé

Je ne suis pas du même avis.

Les frameworks apporte des cadres clefs en main, et j'ai jamais réalisé des applications aussi rapidement que dernièrement avec Rect, Vue ou Angular. On installer avec le CLI est on commence déjà faire quelque chose avec toutes les possibilités du framework.

Qu'il est y ait beaucoup de fichier ne me pose pas de problème, ça permet même de mieux structurer le code.

Mais c'est sûr que si tu veux lier ce qui est faire côté serveur à ce qui est côté client ça ne va pas fonctionner. Les frameworks s’oriente plus vers la conception d'application web, qui peuvent très bien fonctionner sans serveur ou vient des API.

C'est ce que j'ai fait récemment : https://git.ikilote.net/classement

J'aurais jamais pu faire un truc aussi complexe aussi rapidement sans.

Le développement web a-t-il nécessairement besoin de nouveau Framework ?

Pas d'avis, chaque framework à ces qualités et ces défauts. Tout dépend de ce que l'on veut faire.

Que pensez-vous de SvelteKit ? Un de trop ou pas ?

À voir, la partie animation semble bien mieux maîtrisée que sur les autres frameworks. Mais ça en fait 1 de plus à apprendre.

le 17/12/2022 à 12:28
marc.collin
Membre émérite

Envoyé par Zefling

Mais c'est sûr que si tu veux lier ce qui est faire côté serveur à ce qui est côté client ça ne va pas fonctionner. Les frameworks s’oriente plus vers la conception d'application web, qui peuvent très bien fonctionner sans serveur ou vient des API.

tu peux très bien avec framework ui orienté serveur faire des appels rest à un api et le tout est ainsi non lié

le 17/12/2022 à 23:05

Poster une réponse