Schmerz und Tränen in Svelte 3

Anstelle des Vorworts

Der Artikel wird für diejenigen nützlich sein, die genau wie Wir beschlossen haben, Svelte in einem Live-Projekt auszuprobieren. Unsere kleine Firma erhielt den Auftrag, einen Webadministrator für einen Service mit einem Backend auf Mongodb Stitch zu entwickeln. In den letzten Jahren, Frontend Wir schreiben in React oder Vue (abhängig von der Größe des Projekts und davon, ob ReactNative benötigt wird), aber nachdem wir von der Schönheit von Svelte erfahren hatten, beschlossen wir, es zu versuchen, um selbst zu verstehen, ob es gut ist. Und vielleicht sollten wir es auch anstelle von Vue oder React verwenden?

Wer ist Svelte?

Kurz gesagt - dies ist das neue js-Framework (aber er betrachtet sich nicht so), das der Mörder von React and Vue ist, und bla, bla, bla ... In meinem Artikel möchte ich Svelte nicht nur als cool betrachten, "unter der Haube", sondern von Anfang an Ansicht der Bequemlichkeit seiner Verwendung in einem realen Projekt.
Wir machen keine Autos, wir fahren sie und wir haben böse Kunden mit nicht weniger bösen Bedingungen.

Tutorial

Das erste, was Sie über eine neue Sprache oder ein neues Framework lernen, ist ein Tutorial auf der Website. Bei Svelte ist dies Svelte.dev/Tutorial .

Leider funktioniert ein Teil der Tutorials auf der Website in der Vorschau einfach nicht, während nicht ganz klar ist, ob es in der Realität funktioniert oder nicht. Sie müssen Zeit aufwenden und es selbst manuell überprüfen, da nicht klar ist, ob das Tutorial veraltet ist oder auf der Svelte-Website ein Fehler aufgetreten ist. Und es braucht wirklich viel Zeit.

UI Kit und Stile

Das Finden eines UI-Kits für Svelte war für uns alle ein separater Schmerz. Ich wollte ausrufen: "Zumindest Material, Bootstrap ... zumindest etwas ...".

Es wurden nur sveltematerialui.com und svelteui.js.org gefunden, die im Moment sehr roh aussahen.

Mit einem einfachen Import von <Button/> fiel ein Fehler während der Montage aus dem Paket, es war keine Zeit, den UI-Kit-Fehler zu beheben.

Nachdem ich die Dokumentation schnell durchgesehen hatte, beschloss ich, sie zugunsten des Vanille-Imports von CDN aufzugeben.

Ich wollte die Material-Benutzeroberfläche im Projekt verwenden, da das Admin-Panel wahrscheinlich von einem mobilen Gerät aus verwendet wird und Material dafür sehr gut geeignet ist (meiner Meinung nach sieht es auf dem Desktop noch schlechter aus).

Die Verwendung von JS ohne UI-Kit hat mich vor 10 Jahren mental zurückgebracht. Klassenlokomotiven und freundliche Nostalgie.

Aufgrund der Tatsache, dass Svelte „auf eine andere Art und Weise“ mit dem DOM arbeitet, begann MaterialUI, alle möglichen unangenehmen Dinge herauszufinden, die damit zusammenhängen, wie die UI-Komponenten angezeigt werden, die über js zu dom hinzugefügt werden. Zum Beispiel wird jedes Mal ein einfacher Spinner angezeigt:



Nach einer langen Suche stellte sich heraus, dass der Drehfeld in der Material-Benutzeroberfläche über JS hinzugefügt wurde, nachdem das Dokument fertig ist (onLoad). Nach diesem Ereignis beginnt Svelte jedoch mit dem Hinzufügen zum DOM, und das JS-Material-Skript sieht es einfach nicht, seit das Ereignis aufgetreten ist vorher.

Dies musste durch Hinzufügen zur übergeordneten Komponente von Svelte behandelt werden:

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

Stilisierung

Bei Stilen ist alles sehr klar, wir füllen alle Stile wie in Vue. Sie schreiben den Stil und alles ist in Ordnung, und schreiben dann die UI-Komponente (da Sie kein UIKit haben), die Requisitenparameter, z. B. Breite und Höhe, verwenden und dies logisch wie folgt tun sollte:

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

Und ... nein, im Stil können Sie keine Variablen einfügen. Sie können diese Situation über „ReactWay“ verlassen und dynamische Stile im „Skript“ als Variablen oder Funktionen mit Stilrückgabe erstellen.

Als Ergebnis haben wir wieder Haferbrei, einen Teil des Stils im Stilteil im Skript . Reiner Code wird nur erhalten, wenn Sie keine Parameter in den Stilen oder nur dynamische Parameter haben und diese nur im Skript enthalten sind .

Routing und Router

Ohne einen normalen Router können Sie nicht einmal eine Seiten-App erstellen.

Reagieren Sie, Vue beim Skalpieren des 'Hello World'-Projekts wird bereits ein Router mitgeliefert (oder Sie können ihn auswählen). Aber wie alles in Svelte ist das nicht einfach.

Sie müssen selbst einen Router auswählen und sogar zwischen sehr ähnlichen Lösungen. In Wahrheit gibt es bisher nur zwei Router von github.com/EmilTholin/svelte-routing und github.com/kazzkiq/svero .

Beide sind sich sehr ähnlich, aber ich habe den ersten ausgewählt, ich habe ihn anhand der Anzahl der Sterne ausgewählt (ja, ich weiß, ich bin eine schreckliche Person).

Beginnen wir also damit, es in unsere MDL einzubetten.

Wickeln Sie alles in <Router url = "{url}"> ein und fügen Sie <Link /> für die Links aus der Navigation hinzu.



Gehen Sie zur Vorschau und sehen Sie, was passiert ist.

Es stellte sich jedoch heraus, dass Sveltes Kinderkrankheiten anhalten und der Unterricht nicht auf <Link /> übertragen werden kann. Es stellte sich eine vernünftige Frage und wie werden Sie sie stilisieren?

Anscheinend gibt es immer noch Probleme für den Router.

Glücklicherweise können wir unser übliches a href = '' an den Router binden, indem wir use: link angeben, wofür wir uns besonders bedanken.

Fehler

Im Gegensatz zu React, bei dem Sie einfach kein Bundle erstellen und stark über einen Fehler schreien, sammelt Svelte alles mit einem Fehler perfekt. Wenn Sie etwas vergessen, npm installiert oder exportiert haben, ist alles in Ordnung und zeigt nur einen weißen Bildschirm an (dies war übrigens in den ersten Versionen von React der Fall).

In React and Vue haben wir solche Fehler in der Build- oder Flusenphase gesehen.

Infolgedessen müssen Sie Fehler an zwei Stellen abfangen. Fairerweise - dies ist in React and Vue, aber viel seltener und solche offensichtlichen Fehler werden im Flusenstadium abgefangen.

Svelte braucht nur eine Namenskonvention

Sie werden häufig auf dieses Problem stoßen - wenn keine Namenskonvention vorliegt.

Zum Beispiel zurück zum Router.

Es gibt einen solchen Import:

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

Was ist mit diesem Link und Link ? Selbst in einem so kleinen Projekt wie meinem gab es bereits Verwirrung mit dem Fehlen von Namenskonventionen in Projekten, die in Svelte verwendet wurden.

Natürlich hätte es in ReactMans Augen so aussehen sollen:

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

In Svelte gibt es eine Ähnlichkeit mit ref wie in reag, dies ist eine Referenz auf ein dom-Element oder eine dom-Komponente.
Das offizielle Tutorial sagt uns, dass wir es so machen sollen:

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

Und wenn Sie 15 Variablen in der Komponente haben?

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

Wo und was sind diese Variablen wirklich und wo sind die Links zu Komponenten oder Elementen?
Ich würde das Tutorial modifizieren und die Beispiele aus Sicht der Anfänger und ihrer Konvention von Variablen korrekter machen (ein gutes Beispiel finden Sie im React Tutorial). Wenn Sie die Vinaigrette Variablen ausführen lassen, wäre es schön, wenn der Linter oder Bündler auf eine solche Vinaigrette schwören würde, wie dies beispielsweise von Golang getan wurde.

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

Ein weiteres Beispiel für "Leben", wenn Sie einige Daten in der Komponentenfunktion erhalten und diese Daten an Ihre Ansicht gesendet werden müssen, wo eine Variable mit dem Teil des UI-Elements verschraubt wird. Und es sieht bei uns (oder besser gesagt bei unserem Programmierer) so aus:

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

Als ich den Code öffnete, wurde mir sofort „klar“, dass es eine Variable gibt, deren Status und welcher an unsere Benutzeroberfläche angehängt ist.

Nur ein Scherz, natürlich ist nichts klar. Darüber hinaus ist der Zustand nicht einmal klar oder es handelt sich nur um eine Hilfsvariable. In React wird dies vom Staat entschieden, was zumindest irgendwie Klarheit bringt.

Was hat sich wo geändert und wer hat es getan?

Die Variablen in der Svelte-Komponente sind global und ändern sich überall (Hallo Angular).
Aber es gibt gute Nachrichten, sie sind global innerhalb einer Komponente (während Angular), daher ist diese Änderung von allen und von allen innerhalb einer Komponente nicht so beängstigend.

Gleichzeitig sparen Sie Zeit bei der „Schönheit“ des Codes und denken nicht darüber nach, was Sie benötigen, um den Status zu einer Variablen zu machen, sondern was Sie in der Funktion belassen müssen (hi React) - Sie haben alles und überall.



Infolgedessen schreiben Sie Komponenten schnell, aber es ist sehr schwer zu verstehen, was ein Junior einige Tage später in diesem „Salat“ schrieb, wenn er selbst bereits vergessen hat (manchmal sogar seinen Namen). Aus diesem Grund ist es unmöglich zu verstehen, was sich darin befindet, ohne eine klare Organisation des Codes innerhalb des Projekts oder Teams.

Bindungsstich

Stitch ist eine großartige Sache, und ich werde Ihnen auf jeden Fall mehr darüber erzählen und es mit Kollegen vergleichen, die Tests in der Produktion in meinem nächsten Artikel messen, aber jetzt mehr über Svelte.

Um Stitch zu verwenden, müssen Sie den Pfad „Vanilla“ gehen und Folgendes einfügen:

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

Da bei Verwendung von npm und einem normalen Importpaket das Problem mit dem Pufferfehler beginnt.

Ich weiß nicht, ob dies mit dem Svelte-Sammler oder Stitch selbst oder etwas anderem zusammenhängt, aber ich hatte keine Zeit, es auszuwählen, und musste nur ein Skript mit Import hinzufügen, wonach alles erfolgreich funktionierte.

Dies sind die Hauptprobleme, auf die wir bei der Arbeit mit Svelte gestoßen sind. Und um ehrlich zu sein - im Allgemeinen hat es uns nicht gefallen und niemand ...

Was ist das Ergebnis:

Warum brauchst du Svelte?

• Wenn Sie alleine arbeiten und dringend MVP oder ein kleines Admin-Panel benötigen. Es wird Probleme mit einem großen Admin-Panel geben, denn wenn Sie neuen Code schreiben, vergessen Sie den alten oder Sie müssen selbst dokumentierten Code schreiben, da Svelte Sie nicht dazu "zwingt".
• Wenn Ihnen die Bundle-Größe sehr wichtig ist. Sie erstellen beispielsweise eine Web-App für ein Land, in dem es noch kein 3G gibt oder das Internet sehr langsam und sehr teuer ist. In den meisten Teilen der Welt sind teure Programmierer, nicht das Internet, so dass die Bundle-Größe innerhalb angemessener Grenzen in 99% der Fälle kein tatsächliches Problem darstellt.
  
• Wenn Sie gerade erst anfangen zu lernen, wie man in JS schreibt und ein Frontend macht, gibt Ihnen Svelte die Freiheit, auf einen Schreibtischnachbarn zu „schießen“ oder Massenschüsse in die Beine zu arrangieren. Tatsächlich müssen Sie JSX für eine lange Zeit nicht lernen oder Code-Konventionen verstehen. Sie können sofort Ihr erstes Front-End-Projekt durchführen und feststellen, dass Sie bereits erfolgreich waren und sogar etwas funktioniert.
  

Aufgrund des letzteren verstehe ich wirklich nicht, warum Svelte-Betreuer TypeScript unterstützen werden. Wir lieben Svelte nur, um auf die Beine zu schießen, und TypeScript ist meiner Meinung nach wie eine Geländestrecke für den Svelte-Sportwagen. Und Sie wissen, nachdem ich mit Svelte zusammengearbeitet habe, habe ich festgestellt, wie sehr sich JS in den letzten Jahren verändert hat und dass es nicht mehr JS ist.

Svelte bietet die Möglichkeit, in demselben alten und Lampen-JS ohne PropTypes, Flow und TypeScript zu arbeiten.

Was hat mir gefallen?

• Gut lesbar wenn / sonst, was nicht in Vue ist. Ich würde wirklich gerne etwas Ähnliches in Vue sehen.
• Sie können Ihr Ereignis in Komponenten erstellen und Rückrufe an Funktionen in child für die Kommunikation zwischen child> parent vermeiden.
  

Warum nicht Svelte benutzen?

• Es gibt kein einziges voll funktionsfähiges UI-Kit. Eine Web-App ohne UIKit ist kaum vorstellbar. Nur große Projekte, für die Svelte einfach nicht geeignet ist, können das UI-Kit selbst schreiben. Das Verschrauben von Vanille geht in die Erstellung eigener UI-Komponenten (ihres UI-Kits) oder in den Kampf gegen Fehler und „Lokomotiven“ -Klassen.
  
• Die implizite Natur einiger einfacher Fehler und deren Erfassung nur in der Testphase.
  
• Wenn Sie eine plattformübergreifende Anwendung erstellen möchten (und jetzt überall zuerst mobil ist), müssen Sie alles in ReactNative umschreiben oder das generierte NativeScript mit Ihren Händen fertigstellen (es gibt einen NS-Generator von Svelte). Fairerweise läuft Vue mit der mobilen Entwicklung auch nicht sehr gut, hat aber auch einige funktionierende Funktionen.
  
• Sie müssen darauf achten, dass Ihre Entwickler im Projekt eine sehr klare Code-Konvention schreiben, da das Tutorial und die Beispiele nicht für die Teamentwicklung gedacht sind.