🏨 👲🏾 🙂 Douleur et larmes dans Svelte 3 🍵 🔇 👼

Au lieu de l'avant-propos

L'article sera utile à ceux qui, tout comme Nous avons décidé d'essayer Svelte dans un projet live. Notre petite entreprise a reçu une commande pour développer un administrateur web pour un service avec un backend sur Mongodb Stitch. Au cours des deux dernières années, frontend Nous écrivons dans React ou Vue (selon la taille du projet et si ReactNative est nécessaire), mais après avoir entendu parler de la beauté de Svelte, nous avons décidé de l'essayer pour comprendre par nous-mêmes si c'était bon. Et peut-être devrions-nous également l'utiliser au lieu de Vue ou React? ..

Qui est Svelte?

Si en bref - c'est le nouveau framework js (mais il ne se considère pas comme ça), qui est le tueur de React et Vue, et blah, blah, blah ... Dans mon article, je veux considérer Svelte non seulement à quel point il est cool "sous le capot", mais du point de vue vue de la commodité de son utilisation dans un projet réel.
Nous ne fabriquons pas de voitures, nous les conduisons et nous avons de mauvais clients avec des termes non moins mauvais.

Tutoriel

La première chose que vous commencez à apprendre sur un nouveau langage ou un nouveau framework est un tutoriel sur le site. Chez Svelte, c'est Svelte.dev/Tutorial .

Malheureusement, une partie des tutoriels ne fonctionne tout simplement pas sur le site dans l'aperçu, alors qu'il n'est pas entièrement clair s'il fonctionne en réalité ou non. Vous devez passer du temps et le vérifier vous-même manuellement, car il n'est pas clair si le tutoriel est obsolète ou si quelque chose s'est mal passé sur le site Web de Svelte. Et cela prend vraiment beaucoup de temps.

Kit et styles d'interface utilisateur

Trouver un kit d'interface utilisateur pour Svelte était une douleur distincte pour nous tous. Je voulais m'exclamer: "Au moins Matériel, Bootstrap ... au moins quelque chose ...".

Seuls sveltematerialui.com et svelteui.js.org ont été trouvés, ce qui pour le moment semblait très brut.

Avec une simple importation de <Button/> partir de celui-ci, une erreur est tombée du paquet pendant l'assemblage, il n'y avait pas de temps pour résoudre l'erreur du kit ui.

Ayant parcouru rapidement la documentation, j'ai décidé de l'abandonner au profit de l'importation Vanilla depuis CDN.

Je voulais utiliser Material UI dans le projet, car il est possible que le panneau d'administration soit également utilisé à partir d'un appareil mobile, et Material est très approprié pour cela (à mon avis, il semble encore pire sur le bureau).

L'utilisation de JS sans UI Kit m'a mentalement ramené il y a 10 ans) Locomotives de classe et nostalgie aimable).

Du fait que Svelte fonctionne avec le DOM «d'une manière différente», MaterialUI a commencé à sortir toutes sortes de choses désagréables liées à la façon dont les composants d'interface utilisateur ajoutés via js à dom sont affichés. Par exemple, un simple spinner est affiché toutes les deux fois:

Après une longue recherche, ce qui a mal tourné, il s'est avéré que le spinner dans l'interface utilisateur Material est ajouté via JS après que le document est prêt (onLoad), mais après cet événement, Svelte commence son ajout au DOM et le script JS Material ne le voit tout simplement pas puisque l'événement a été avant.

Cela devait être traité en ajoutant au composant parent de Svelte:

  afterUpdate(() => { componentHandler.upgradeDom(); });

Stylisation

Avec les styles, tout est très clair, on bourre tous les styles comme dans Vue. Vous écrivez le style et tout va bien, puis écrivez le composant UI (puisque vous n'avez pas UIKit) qui devrait prendre les paramètres d'accessoires, par exemple la largeur et la hauteur, et le faites logiquement comme ceci:

 <script> export let width = '20px'; export let height = '20px'; </script> <style> .loader { width: { width }, height: { height }, } </style>

Et ... non, dans le style, vous ne pouvez pas insérer de variables. Vous pouvez sortir de cette situation via «ReactWay» et créer des styles dynamiques dans le «script» en tant que variables ou fonctions avec retour de style.

En conséquence, nous avons à nouveau de la bouillie, une partie du style dans la partie style du script . Le code pur ne sera obtenu que si vous n'avez pas de paramètres dans les styles ou si vous n'avez que des paramètres dynamiques et ils ne sont que dans le script .

Routage et routeurs

Sans routeur normal, vous ne pouvez même pas créer une application d'une page.

React, Vue lors du scalping du projet 'Hello World' est déjà livré avec un routeur dans la boîte (ou vous pouvez le sélectionner). Mais comme tout à Svelte, ce n'est pas facile.

Vous devez choisir vous-même un routeur, et même entre des solutions très similaires. En vérité, il n'y a jusqu'à présent que deux routeurs github.com/EmilTholin/svelte-routing et github.com/kazzkiq/svero .

Les deux sont très similaires, mais j'ai choisi la première, je l'ai choisie en fonction du nombre d'étoiles (oui, je sais, je suis une personne terrible).

Commençons donc à l'intégrer dans notre MDL.

Enveloppez tout dans <Router url = "{url}"> et ajoutez <Lien /> pour les liens de la navigation.

Accédez à l'aperçu et voyez ce qui s'est passé.

Mais il s'est avéré que les maladies infantiles de Svelte continuent et que les cours ne peuvent pas être transférés à <Link />. Une question raisonnable s'est posée et comment allez-vous la styliser?

Apparemment, cela pose toujours des problèmes pour le routeur.

Heureusement, nous pouvons lier notre habituel a href = '' au routeur en spécifiant use: link pour lequel merci.

Erreurs

Contrairement à React, qui ne vous laissera tout simplement pas créer un bundle et criera fortement à propos d'une erreur, Svelte collectera parfaitement tout avec une erreur. En même temps, si vous avez oublié quelque chose, installez ou installez npm, tout ira bien et affichera simplement un écran blanc (Incidemment, c'était le cas dans les premières versions de React).

Dans React et Vue, nous avions l'habitude de voir de telles erreurs au stade de la construction ou des peluches.

Par conséquent, vous devrez détecter des erreurs à deux endroits. En toute justice - c'est dans React et Vue, mais beaucoup moins souvent et de telles erreurs évidentes sont détectées au stade de la charpie.

Svelte a juste besoin d'une convention de nommage

Vous rencontrerez ce problème assez souvent - en l'absence d'une convention de dénomination.

Par exemple, revenons au routeur.

Il y a une telle importation:

     import { Router, link, Link ,Route } from "svelte-routing";

Qu'en est-il de ce lien et de ce lien ? Même dans un projet aussi petit que le mien, il y avait déjà de la confusion avec le manque de conventions de dénomination dans les projets utilisés dans Svelte.

Bien sûr, cela aurait dû ressembler à ceci aux yeux de ReactMan:

 import { Router, useLink, LinkComponent ,RouteComponent } from "svelte-routing";

Dans Svelte, il y a une similitude avec ref comme dans react, c'est une référence à un élément ou un composant dom.
Le tutoriel officiel nous dit de le faire comme ceci:

 <script> let dialog; </script> <dialog bind:this={dialog} class="mdl-dialog» />

Et si vous avez 15 variables dans le composant?

 <script> let loading; let pins; let dialog; let stitch; </script> <dialog bind:this={dialog} class="mdl-dialog» />

Où et quelles sont vraiment ces variables, et où sont les liens vers les composants ou les éléments?
Je modifierais le tutoriel et rendrais les exemples plus corrects du point de vue des débutants et de leur convention de variables (voir le Tutoriel React pour un bon exemple). Si vous laissez la vinaigrette faire des variables, ce serait bien si le linter ou le bundler jurait sur une telle vinaigrette, comme par exemple, cela a été fait par golang.

 <script> let dialogElement; </script> <dialog bind:this={dialogElement} class="mdl-dialog» />

Un autre exemple de «vie» lorsque vous recevez des données dans la fonction de composant et ces données doivent être envoyées à votre vue , où une variable est vissée à la partie de l'élément d'interface utilisateur. Et cela ressemble à nous (ou plutôt à notre programmeur) comme ceci:

  async function ReloadPins() {        loading =  true;        pins = await getAllPins();        status = 0;    }

Lorsque j'ai ouvert son code, il m'est immédiatement devenu clair qu'il existe une variable qui indique et laquelle est attachée à notre interface utilisateur .

Je plaisante, bien sûr, rien n'est clair. De plus, l'état n'est même pas clair ou n'est-ce qu'une variable auxiliaire. Dans React, cela est décidé par l'État, ce qui apporte au moins une certaine clarté.

Qu'est-ce qui a changé où et qui l'a fait?

Les variables à l'intérieur du composant Svelte sont globales et changent partout (bonjour Angular).
Mais il y a de bonnes nouvelles, ils sont globaux au sein d'un composant (tout en angulaire), donc ce changement de tous et par tous n'est pas si effrayant à l'intérieur d'un composant.

En même temps, vous gagnez du temps sur la «beauté» du code et ne pensez pas à ce dont vous avez besoin pour faire de l' état une variable, mais à ce qu'il faut laisser à l'intérieur de la fonction (salut React) - vous avez tout et partout.

En conséquence, vous écrivez des composants rapidement, mais il est très difficile de comprendre ce qu'un junior a écrit dans cette «salade» quelques jours plus tard alors qu'il a lui-même déjà oublié (parfois même son nom). Pour cette raison, il sera impossible de comprendre ce qu'il y a à l'intérieur sans une organisation claire du code au sein du projet ou de l'équipe.

Lier le point

Stitch est une bonne chose, et je vais certainement vous en dire plus à ce sujet, et le comparer avec des pairs, mesurer les tests en production dans mon prochain article, et maintenant c'est plus sur Svelte.

Pour utiliser Stitch, vous devrez suivre le chemin "Vanille" et insérer:

 <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.4.0/stitch.js"></script>

Depuis lors de l'utilisation de npm et d'un package d' importation normal, le problème avec l'erreur de tampon commence.

Je ne sais pas si cela est lié au collecteur Svelte ou à Stitch lui-même, ou quelque chose d'autre, mais je n'ai pas eu le temps de le choisir et j'ai juste dû ajouter un script avec importation, après quoi tout a fonctionné avec succès.

Ce sont les principaux problèmes que nous avons rencontrés en travaillant avec Svelte. Et pour être honnête - en général, nous n'aimions pas ça, et personne ...

Quel est le résultat:

Pourquoi avez-vous besoin de Svelte?

Si vous travaillez seul et que vous devez de toute urgence faire MVP ou un petit panneau d'administration. Il y aura des problèmes avec un grand panneau d'administration, car lorsque vous écrivez du nouveau code, vous oublierez l'ancien ou vous devez écrire du code auto-documenté, car Svelte ne vous "force" pas à le faire.
Si la taille du paquet est très importante pour vous. Par exemple, vous créez une application Web pour un pays où il n'y a toujours pas de 3G ou Internet est très lent et très coûteux. Dans la plupart des régions du monde, les programmeurs coûteux, pas Internet, donc la taille des paquets dans des limites raisonnables ne sera pas un problème réel dans 99% des cas.
Si vous commencez tout juste à apprendre à écrire en JS et à faire un front-end, Svelte vous donnera toute la liberté de «tirer dans le pied», chez un voisin de bureau ou d'organiser une prise de vue massive dans les jambes. En fait, vous n'aurez pas besoin d'apprendre JSX ou de comprendre les conventions de code pendant longtemps, vous pouvez immédiatement faire votre premier projet frontal et voir que vous avez déjà réussi et que quelque chose fonctionne même.

Sur la base de ce dernier, je ne comprends vraiment pas pourquoi les responsables de Svelte vont prendre en charge TypeScript? Nous aimons Svelte juste pour «tirer sur les jambes» et TypeScript, à mon avis, est comme des pistes tout-terrain pour la voiture de sport Svelte. Et vous savez, après avoir travaillé avec Svelte, j'ai réalisé à quel point JS a changé ces dernières années, et que ce n'est plus JS.

Svelte donne la possibilité de travailler dans le même JS ancien et lampe, sans PropTypes, Flow et TypeScript.

Qu'est-ce que j'ai aimé?

Bien lisible si / sinon, qui n'est pas dans Vue. J'aimerais vraiment voir quelque chose de similaire dans Vue.
Vous pouvez créer votre événement dans des composants et vous débarrasser de la transmission de rappels aux fonctions dans enfant, pour la communication entre enfant> parent.

Pourquoi ne pas utiliser Svelte?

Il n'y a pas un seul kit d'interface utilisateur pleinement fonctionnel. Il est difficile d'imaginer une application Web sans UIKit; seuls les grands projets pour lesquels Svelte n'est tout simplement pas adapté peuvent écrire eux-mêmes le kit d'interface utilisateur. Visser quelque chose de vanille entre dans la création de ses propres composants d'interface utilisateur (leur kit d'interface utilisateur) ou dans la lutte contre les erreurs et les classes «locomotives».
La nature implicite de certaines erreurs simples et leur capture uniquement au stade des tests.
Si vous prévoyez de créer une application multi-plateforme (et maintenant partout est d'abord mobile), vous devrez tout réécrire dans ReactNative ou terminer le NativeScript généré avec vos mains (il existe un générateur NS de Svelte). Pour être honnête, Vue avec le développement mobile ne se porte pas très bien non plus, mais il a également des fonctionnalités de travail.
Vous devrez prendre soin d'écrire une convention de code très claire pour vos développeurs dans le projet, car le tutoriel et les exemples ne sont pas faits pour le développement d'équipe.

Douleur et larmes dans Svelte 3