Discussion :

[Aurélien]

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[ganatan]

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 ?

[jopopmk]

[..] 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.

[ganatan]

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.

[LordJerem]

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)

[Bruno]

Annonce de la version 1.0 de SvelteKit, un outil permettant de créer des applications Web à partir du framework JavaScript Svelte,
il propose par défaut une navigation côté client

Après deux ans de développement, SvelteKit a enfin atteint la version 1.0. « Nous sommes très heureux de partager cette version avec vous. C'est l'aboutissement de milliers d'heures de travail, tant de la part de l'équipe centrale de Svelte que de la communauté au sens large, et nous pensons que c'est le moyen le plus agréable de créer des sites Web de qualité, que vous soyez un développeur independant travaillant sur un petit projet ou faisant partie d'une grande équipe », a écrit l’équipe de développement dans un post publié sur son site officiel.

SvelteKit est un Framework permettant de créer des applications Web à partir de Svelte, un Framework de composants d'interface utilisateur que les développeurs apprécient pour ses performances et sa facilité d'utilisation. Il repose sur Svelte, un Framework d'interface utilisateur qui utilise un compilateur pour permettre d'écrire des composants d'une concision époustouflante qui effectuent un travail minimal dans le navigateur, en utilisant des langages conu - HTML, CSS et JavaScript.

Rappelons 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.

Un Framework d'application est conçu pour répondre à ces questions. SvelteKit répond à ces questions grâce à une conception fondée sur les besoins réels d'une armée de bêta-testeurs (dont beaucoup utilisent SvelteKit en production depuis un certain temps - nous saluons votre courage et vous remercions pour vos précieux commentaires) et sur les meilleures idées d'autres Framework d'application, notamment Next.js et Remix.

Les développeurs web ont aujourd'hui l'embarras du choix. Outre les Framework susmentionnés, il existe des options comme Astro, des Framework de serveur éprouvés comme Rails et Laravel, et un million de générateurs de sites statiques. « Contrairement aux Framework traditionnels d'applications multi-pages ou MPA, SvelteKit propose par défaut une navigation côté client après le chargement initial de la page rendue par le serveur. Cela permet des transitions de page plus rapides, un état qui persiste entre les pages (comme la position de défilement d'une barre latérale) et une utilisation moindre des données. Cela évite également de réexécuter des scripts tiers, comme les analyses, à chaque chargement de page.

« Il permet d'utiliser un seul langage, au lieu d'avoir deux applications étroitement liées (l'une pour générer le HTML, l'autre pour gérer l'interaction côté client). Comme SvelteKit s'exécute partout où JavaScript s'exécute, il est possible de déployer une application comme un serveur Node traditionnel ou en utilisant des fonctions sans serveur, y compris à la périphérie », écrit l’équipe Svelte.

À la différence des générateurs de sites statiques, il est possible de créer des applications contenant des données personnalisées ou dynamiques, sans que le fait d'aller les chercher dans le navigateur après le chargement de la page n'altère les performances et ne modifie la mise en page.

De nombreux Framework partent du principe qu'il n'y a qu'une seule façon de construire une application, mais la réalité est plus nuancée. Il n'est pas vrai, par exemple, que le prérendu des pages statiques n'est qu'un contrôle de cache - il permet également d'effectuer une validation au moment de la construction ou de rendre des données du système de fichiers auxquelles les fonctions périphériques ne peuvent pas accéder, et il sert de protection contre les bases de données défaillantes.

Il n'est pas vrai que tout doit être rendu côté serveur - c'est la bonne solution par défaut si vous voulez des applications robustes, performantes et bien référencées, mais il existe d'innombrables exceptions.

Inconvénients de l'utilisation d'un Framework

Les Framework sont des représentations simples d'un langage de programmation, car ils sont faciles à apprendre et permettent de faire le travail en un rien de temps. Cependant, l'utilisation excessive de ces outils de développement réduit souvent à néant les chances d'apprendre le langage de manière plus complète.
Comme SvelteKit utilise Vite, l'outil pour développeurs web, il prend en charge dès le départ le rechargement à chaud des modules, TypeScript et bien d'autres choses dont les développeurs ont besoin.

En février de l'année dernière, Evan You, fondateur de Vue Technology a publié Vite 2. Depuis, son adoption n'a cessé de croître, atteignant plus d'un million de téléchargements npm par semaine. Un écosystème très étendu s'est rapidement formé après la sortie de Vite. Evan YOU a annoncé la version 3 de Vite en juillet.

Comme toute autre chose dans la vie, les Framework ont aussi leur lot d'inconvénients. Un Framework logiciel est une abstraction ou une collection extensible de programmes qui fournissent une large fonctionnalité qui peut être modifiée de manière sélective par des codes supplémentaires écrits par l'utilisateur pour développer des logiciels spécifiques à une application.

Comme mentionné précédemment, les Framework gèrent l'implémentation de certaines fonctionnalités pour les développeurs en arrière-plan. Ces derniers peuvent donc apprendre et utiliser ces Framework pour développer et déployer des applications Web sans avoir une connaissance approfondie du langage de programmation lui-même. Cela élimine les chances de ces programmeurs d'appréhender le langage de programmation dans une meilleure utilisation.

De ce fait, les connaissances de chacun sont limitées à quelques bibliothèques. Pour les développeurs de logiciels avancés, les Framework sont votre meilleur ami, vous permettant d'économiser beaucoup de temps et d'efforts. Mais, ce n'est pas le cas pour les débutants et les novices, car ces Framework contrecarrent quelque peu les chances de mieux comprendre les rouages d'un langage de programmation.

Il empêche d'apprendre le langage réel

Le fait que la plupart des programmeurs considèrent les Framework comme le moyen le plus rapide de comprendre un langage de programmation est souvent un idéalisme farfelu. Car la plupart du temps, ils ont tendance à abandonner la tâche d'apprendre le fonctionnement d'un langage une fois que le travail est fait et terminé.

Fournit un paradigme de programmation inflexible

Les Frameworks sont personnalisés pour utiliser des outils spécifiques ou adopter des procédures prédéfinies pour le développement d'applications web. Il est donc pratiquement impossible d'apporter des modifications à une grande partie des composants de base de ces Frameworks. Même si les Frameworks permettent le développement d'applications web personnalisées, il y a toujours une limite au niveau de personnalisation qui peut être fait. En effet, les développeurs n'ont pas la possibilité de modifier certaines fonctionnalités jusqu'au niveau le plus fin.

Entrave au temps de chargement des sites Web

En raison de la quantité de codes prédéfinis fournis avec une bibliothèque ou un Framework donné - dont la plupart ne sont pas pertinents lors de la création d'applications web simples. Ces Frameworks intègrent souvent des fichiers volumineux qui ont un impact négatif sur la vitesse et les performances du site Web. Le temps de chargement de l'application résultante est donc beaucoup plus lent.

Bien que les développeurs aient la possibilité de choisir entre un Framework web complet et un Framework micro. Cependant, les Frameworks diffèrent les uns des autres en termes de fonctionnalité, de convivialité et de performance. De plus, chaque Framework a ses avantages et ses inconvénients ; ainsi, les développeurs et programmeurs web doivent garder à l'esprit l'étendue du type de site web qu'ils sont sur le point de construire tout en choisissant parmi les différents Frameworks disponibles.

Avec SvelteKit, il est possible d’installer des plugins issus des vastes écosystèmes Vite et Rollup pour ajouter la prise en charge d'autres outils. Lors de la création d'un projet SvelteKit, il sera demandé si l’utilisateur souhaite ajouter TypeScript, ESLint, Prettier, Playwright (pour les tests de navigateur de bout en bout) et Vitest (pour les tests unitaires). Des guides d'intégration existent déjà pour de nombreux projets populaires - Tailwind et Supabase, par exemple.

Le CLI de SvelteKit nécessite l'installation locale de Node.js, mais le Framework lui-même ne dépend d'aucune plateforme. Cela signifie qu’il peut être déployer partout où JavaScript s'exécute. Ceci est rendu possible par les adaptateurs. L'adaptateur par défaut, adapter-auto, fournit une prise en charge sans configuration pour Vercel, Netlify, Cloudflare Pages et Azure Static Web Apps, et d'autres plateformes seront ajoutées à l'avenir. Les adaptateurs fournis par la communauté prennent en charge Deno, Bun, Firebase, App Engine, AWS Lambda et bien d'autres encore.

L’application peut également être deployé en tant que serveur Node.js en utilisant adapter-node. Si l'ensemble de votre application se prête au prérendu, ou s'il s'agit d'une application à page unique (SPA), il est possible d’utiliser adapter-static - qui transforme SvelteKit en générateur de site statique - avec n'importe quel serveur Web, y compris GitHub Pages.

Source : Svelte

Et vous ?

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

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

Voir aussi :

Vite, l'outil pour développeurs web, est à sa version 3. Il vise à fournir une expérience de développement plus rapide et plus légère pour les projets web modernes

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

[marc.collin]

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

[Zefling]

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.

[marc.collin]

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é