Pourquoi Svelte n’est pas encore prêt pour les heures de grande écoute | par Jan Kalfus | Meilleure programmation | Novembre 2020

Online Coding Courses for Kids

Avec les mauvaises choses à l’écart, passons aux bonnes choses.

Le tutoriel et REPL

Svelte a un tutoriel génial. Ensuite, vous apprendrez tout ce que vous devez savoir sur Svelte dans un jour ou deux. Il y a aussi un excellent REPL, où vous pouvez essayer diverses choses et même télécharger le résultat avec tout ce dont vous avez besoin pour le faire fonctionner.

Si vous avez passé les dernières années à écrire du code React comme moi et que vous avez déjà vu un composant mono-fichier Vue (SFC), vous vous sentirez comme chez vous en venant à Svelte grâce à ce tutoriel. Alors plongez-y si vous voulez voir à quoi ressemble la syntaxe.

Composants à fichier unique (SFC)

Dois-je en dire plus? 🙂 Les composants à un seul fichier sont tout simplement géniaux. Si vous avez déjà utilisé les SFC de Vue, vous savez pourquoi. Tout le code associé se trouve au même endroit, il vous permet de créer rapidement des prototypes et vous n’avez pas à vous soucier des styles qui se mélangent.

Avec Svelte, c’est la valeur par défaut. Et l’expérience est à mon humble avis un peu meilleure que dans Vue, car il n’y a littéralement pas de passe-partout, vous commencez à 0 indentation et les styles sont définis par défaut. Voyons à quoi ressemblerait un bonjour typique:

Hello world

Ouais, même c’est un composant dans Svelte et il restituera exactement comme vous vous attendez! Comme vous pouvez le voir, je ne plaisantais pas, zéro passe-partout.

Voyons quelque chose d’un peu plus compliqué, avec du JavaScript et du style:

%MINIFYHTML7f924184852a4676297f986b45acd4ad2%%MINIFYHTML7f924184852a4676297f986b45acd4ad14%

C'est un {quelque chose}.

Cela sera rendu comme:

En revanche, pensez simplement à combien d’onglets vous commencez à écrire un composant React typique et à ce que vous devez faire pour configurer ses styles.

Batteries incluses

Svelte est également livré avec des magasins pour la gestion de l’état des applications et des outils de mouvement / transition pour faciliter la création d’animations. Il a également une directive de classe, des emplacements, des éléments spéciaux, etc. En gros, si vous construisez un SPA, il y a tout ce dont vous avez besoin à l’exception d’un routeur (voir ci-dessus). Donc, presque pas de fatigue décisionnelle.

Pas de DOM virtuel

Ce n’est que lorsque j’ai commencé à utiliser Svelte que j’ai réalisé à quel point je détestais le DOM virtuel. Nous créons des interfaces utilisateur, mais nous plaçons cette couche d’abstraction entre nous et l’interface utilisateur. Pourquoi? Pendant un bref instant, arrêtez-vous et réfléchissez si vous avez vraiment, vraiment besoin et que vous voulez utiliser un DOM virtuel, ou si vous avez fini par l’utiliser simplement parce qu’il était fourni avec la bibliothèque.

Le DOM virtuel présente de nombreux inconvénients (performance et des difficultés à accéder directement au DOM, pour n’en nommer que quelques-uns), mais le seul réel avantage était probablement que vous pouviez écrire des interfaces utilisateur déclaratives qui ont un état prévisible. A-t-il réussi à tenir cette promesse? Sur la base de mon expérience, je dirais seulement un peu. Il est certainement plus facile de faire certaines choses via le DOM virtuel que de devoir manipuler le DOM directement. En même temps cependant, et dans le cas de React, j’ai vu tellement de morceaux de code mal écrits (certains de ceux qui sont les miens), simplement parce qu’il donne au programmeur tellement de puissance, que je doute sérieusement qu’il ait cet avantage en général.

Svelte, d’autre part, vous offre un ensemble d’outils qui facilitent la manipulation du DOM, comme des instructions if, des boucles, des liaisons, des événements ou des emplacements – tout cela étant converti en éléments de JS lisibles par l’homme (vérifiez l’onglet de sortie JS ici pour un exemple) pendant la compilation. C’est ce dont vous avez vraiment besoin dans la grande majorité des cas.

La simplicité de Svelte avec la combinaison d’une séparation claire entre HTML, CSS et JavaScript est ce qui le fait vraiment briller. En fait, c’est pour cela que le Web a été conçu.

De plus, puisque vous avez un accès direct au DOM avec Svelte, vous n’êtes pas limité à l’utilisation de composants spécifiques au framework. Et comme vous ne rencontrerez aucune bizarrerie, comme dans le cas d’un DOM virtuel, vous réussirez facilement à en écrire la plupart vous-même, si vous le souhaitez.

Enfin, comme Svelte n’utilise pas de DOM virtuel, et en fait aucun moteur d’exécution, c’est très rapide et la taille du lot avec laquelle vous commencez est extrêmement petite.

Snowpack + Svelte = paradis de la productivité

Jamais entendu parler Manteau neigeux? C’est un outil de construction frontale incroyablement rapide qui crée des modules ES au lieu d’un ensemble pour le développement. Des heures de démarrage du serveur de développement quasi instantanées et un chargement à chaud sont ce que vous obtenez. Et vous pouvez l’utiliser avec Svelte. Et contrairement à React, le chargement à chaud fonctionne de manière fiable. Sérieusement, essayez-le. Vous ne voudrez plus jamais revenir à Webpack. J’irais même jusqu’à le qualifier de révolutionnaire. Mais vous n’avez pas à me croire, regardez la démo de Rich Harris. Mon expérience a été exactement la même jusqu’à présent.

Ici, Rich Harris démontre la vitesse de Snowpack

Close Menu