🖱️ ➖ 👩‍👧‍👦 Warum Sie Svelte für Ihre Webprojekte verwenden sollten 🤱🏽 ☂️ 👆🏼

Wenn Sie ein Webentwickler sind, haben Sie wahrscheinlich von Svelte Js gehört. Trotzdem denke ich, dass Sie sich fragen werden, warum es immer beliebter wird und welche interessanten Vorteile es für Webentwickler hat.

Wir werden einen kurzen Überblick über dieses Framework, seine Vor- und Nachteile geben, damit Sie nach dem Lesen entscheiden können, ob es zu Ihrem Projekt passt oder nicht.

Das Svelte-Framework erschien 2018 und es war eine Sensation. Sowohl Anfänger als auch erfahrene Entwickler nutzten es gerne für alle Arten von Projekten. Nehmen wir uns in diesem Zusammenhang etwas Zeit, um zu klären, was Svelte so zugänglich macht.

Was ist Svelte und was sind seine Vorteile?

Für einige Entwickler ist Svelte JS als das beliebteste Front-End-Framework bekannt, das 2018 nicht in den Top 6 von State of JavaScript enthalten war. Es gibt einen Wikipedia-Artikel über Svelte , der jedoch erst vor sechs Monaten veröffentlicht wurde. Daher gibt es dort nicht viele Informationen.

Svelte wurde als Framework konzipiert, ist jedoch ein Komponenten- Framework, das zum Kompilieren von Komponenten in der Erstellungsphase entwickelt wurde. Dank dieses Ansatzes können Sie nur eine bundle.js pro Seite hochladen, um die gesamte Anwendung zu rendern.

Einfach ausgedrückt, schreiben Sie mit Svelte Komponenten mit HTML, CSS und JavaScript. Während der Entwicklung kompiliert das Framework sie in kleine eigenständige JavaScript-Module. Dies stellt sicher, dass ein Minimum an Arbeit seitens des Browsers erledigt wird, was die Webanwendung schneller macht und das Schreiben von Code einfacher macht.

Hier ist eine kurze Beschreibung von Svelte von den Autoren:

Quelle: Svelte.dev

Dank alledem ist Svelte Mobile einer der führenden Anbieter von „Startup-Leistung“. Andere Arten der Optimierung nicht. Svelte erzielt solche herausragenden Ergebnisse durch die Verwendung eines zugänglichen browserbasierten JavaScript-Compilers und nicht eines Drittanbieters. So erhalten wir eine großartige Lösung für die Webentwicklung unter anderen gängigen Frameworks und Programmiersprachen .

So erreicht Svelte eine genaue Code-Reaktionsfähigkeit und eine höhere Produktivität. Dies ist eine hervorragende Framework-Werbung für Entwickler und Geschäftsinhaber. Ein weiterer Vorteil von Svelte für Entwickler ist die Bequemlichkeit für Anfänger und eine klare Syntaxstruktur.

Übersicht über die schlanke Architektur

Svelte ist bekannt für seine Geschwindigkeit im Vergleich zu anderen Bibliotheken. Dies liegt daran, dass die Ladephase des Frameworks zum Erstellen eines virtuellen DOMs nicht mehr erforderlich ist . Anstatt das Tool zur Laufzeit zu verwenden, wird Svelte-Code in der Erstellungsphase in JS kompiliert. Dies bedeutet, dass die Anwendung keine Abhängigkeiten zum Ausführen benötigt.

Wie Svelte funktioniert

Ich werde versuchen, das Prinzip von Svelte mit den einfachsten Worten zu erklären:

Sie öffnen die Site.
Rendern Sie die Seite in reinem JS.
Sie geben die Seite an Ihre Kollegen weiter [wenn Sie mehr als eine arbeiten].
Kollegen erwarten echte Reaktivität von der Seite.
Wenn sie es finden, sollte die Anwendung / Site reibungslos funktionieren, nicht nur im Testmodus, sondern auch im Kampf.

Svelte JS vs. Reagieren vs. Vue: Vergleich

Viele Ingenieure vergleichen Svetle.Js mit anderen Frameworks. Die bekanntesten Alternativen sind React und Vue.

Die beliebtesten Webframeworks wie Angular, React und Vue.js basieren auf dem Prinzip, darauf zu warten, dass Code geladen wird, um ein virtuelles DOM zu erstellen. Nur dann können sie die Seite mithilfe der Bibliothek rendern.

Zum Beispiel machte React, das 2011 von Facebook entwickelt wurde, die reaktive Programmierung sehr beliebt. Dieses Framework begann zunächst mit der Verwendung des virtuellen DOM. Es trennt die Ereignisverarbeitung, Attributmanipulation und manuelle DOM-Aktualisierung, die andernfalls zum Erstellen der Anwendung erforderlich wären. Dies war der Schlüsselfaktor, der React so attraktiv machte.

Svelte ist mittlerweile ein Compiler. Es kompiliert Ihre Komponenten in JavaScript, anstatt sich auf Konzepte wie Virtual DOM zu verlassen, um das Browser-DOM zu aktualisieren. Dank Svelte Typoskript wurde es möglich, die Anwendung viel effizienter zu erstellen. Sie können Ihre Komponenten mit CSS, HTML und JavaScript schreiben. Während des Erstellungsprozesses kompiliert Svelte sie in separate JavaScript-Module.

Infolgedessen baut Svelte 3 ein DOM mit geringerem Gewicht auf. Beispielsweise wiegt die TodoMVC-Implementierung auf Svelte in komprimierter Form 3,6 KB. Zum Vergleich: React plus ReactDOM wiegt auch ohne Anwendungscode in komprimierter Form ca. 45 KB. Das vollständige Herunterladen von TodoMVC auf React dauert im Browser zehnmal länger als auf Svelte.

Es ist zwar schwierig, die Leistung von Svelte im Vergleich zu React unparteiisch zu bewerten, da die Frameworks im Wesentlichen sehr unterschiedlich sind.

Wenn Sie jedoch mehr Details über den praktischen Vergleich dieser Web-Frameworks erfahren möchten, ist es hilfreich, dieses Video anzusehen.

Laut GitHub ist Svelte Native deutlich schneller als Ember, Angular, React, Ractive, Preact, Mithril oder Riot. Es kann sogar mit Inferno konkurrieren, dem derzeit wahrscheinlich schnellsten UI-Framework der Welt. Dies ist letztendlich ein entscheidender Vorteil, da Sie durch eine höhere Anwendungsgeschwindigkeit der Konkurrenz einen Schritt voraus sein können.

Schlanke Komponenten

Lassen Sie uns tiefer in die Details der Svelte-Struktur eintauchen. Jede PWA-Komponente [Progressive Web Application] in Svelte kann drei Abschnitte enthalten: Skript, Stil und Vorlage. Hier ist eine detailliertere Beschreibung dessen, was gemeint ist:

Skript-Tag: Optionaler JavaScript-Block mit Deklarationen von Funktionen und Variablen, die innerhalb der Komponente verwendet werden.

Style-Tag: eine weitere optionale Einheit. Stellen Sie sich das als normales HTML-Tag vor, mit einem entscheidenden Unterschied. Die in diesem Block beschriebenen Regeln gelten nur für die aktuelle Komponente. Das Anwenden eines Stils auf ein Element wirkt Psich nicht auf alle Absätze auf der Seite aus. Das ist großartig, da keine Klassen für verschiedene Elemente erstellt werden müssen. Das heißt, Sie können eine andere Stilregel einfach nicht versehentlich neu definieren.

Vorlagenblock: Dies ist der letzte und einzige obligatorische Block, normalerweise das H1-Tag. Dies ist sowohl die Ansicht als auch die Ansicht Ihrer Komponente. Es ist eng mit Skript- und Stilblöcken verwandt, da es sein Verhalten und Design definiert.

Um eine bessere Vorstellung von der Erstellung all dieser Komponenten zu erhalten, empfehle ich Ihnen, eine kurze und verständliche Erklärung aus A shot of code zu lesen:

Aus diesen Gründen können wir Svelte als eine Bibliothek betrachten, die versucht, Modularität in das Frontend zu bringen. Diese Modularität wird durch die Gruppierung verschiedener Komponenten unterstützt. Das Framework isoliert jedoch auch die Vorlage, die Logik und das Design. Standardmäßig erstellt Svelte Stile für jede Komponente separat. Das heißt, Sie vermeiden Stillecks zwischen Komponenten, was die Verwendung einiger anderer Frameworks nicht garantiert.

Es ist auch erwähnenswert, dass Svelte gut mit einer JavaScript-Variablen namens interagiert name. Dies ist ein neues Konzept aus Svelte v3. Auf jede Variable im Skript Ihrer Komponente kann jetzt über das HTML-Markup zugegriffen werden. Es gibt auch keine Framework-spezifische Syntax, die Sie zum Verwalten von Status lernen müssen. Sie müssen sich nicht darum kümmerndataVue, $scopeAngular oder this.stateReact. Stattdessen können Sie überall verwenden let, um zugewiesene Statuswerte zu erreichen. Das Ändern von Werten jedes Mal führt automatisch zu einem erneuten Rendern.

So sieht es in der Praxis aus:

Das Erstellen einer Svelte-Komponente ähnelt dem Arbeiten mit CodePen. Sie müssen sich nicht fragen, wie Sie die deklarative JS-Funktion verbinden können, die Sie durch einige gelernt haben DOM query-selector. Svelte wird window listenersoder nicht beeinflussen callback functions. Diese Grundlagen bleiben so, wie sie sein sollten.

Eine weitere schöne Sache an diesen Komponenten ist, dass sie genauso Priorität haben wie herkömmliche. Sie müssen lediglich die HTML-Datei importieren, und Svelte wird verstehen, wie sie bereitgestellt wird.

Was Sie sonst noch über Svelte.js wissen müssen

Lassen Sie uns über die anderen wichtigen Vorteile von Svelte im Entwicklungsprozess im Vergleich zu anderen Frameworks sprechen.

Anfängerfreundlich

Wir haben bereits erwähnt, dass der Grund für die Beliebtheit von Svelte teilweise in seiner Einfachheit für Anfänger liegt. Wenn Sie es verwenden, müssen Sie das DOM nicht manipulieren. Außerdem müssen Sie die Framework-spezifischen Wrapper von Status nicht verstehen. Der Zugriff auf Variablen kann direkt über das Markup erfolgen. Dies vereinfacht das Erstellen einer Anwendung erheblich. In Zusammenarbeit mit Svelte können Programmierer die Grundprinzipien des Zustands von Komponenten lernen, ohne sich in den Details zu verwirren.

Svelte bietet eine eigene Syntax für bedingte Anweisungen und Schleifen zum Anzeigen von DOM-Elementen. Das Funktionsprinzip ist hier ähnlich wie bei JSX. Alle diese beiliegenden Klammern, in denen Anfänger leicht verloren gehen können, sind jedoch nicht so wichtig.

Es gibt eine Kuriosität bei Svelte, die erwähnenswert ist: Sie übergibt Eigenschaften an Komponenten. Dieses Framework ist leicht zu erlernen und voll funktionsfähig, aber nach dem Geschmack einiger Entwickler ist die Syntax zu exotisch.

Rückwärtskompatibilität

Wenn Sie beispielsweise beispielsweise ein Kalender-Widget oder ein anderes in Ihre Anwendung integrieren mussten, konnten Sie dies bisher nur mit derselben Version des Frameworks tun, auf dem das Widget basiert. Wenn Sie die Anwendung in Angular erstellen und das Widget in React erstellt wird, können Sie es nicht integrieren. Wenn das Widget oder Ihre Anwendung jedoch mit Svelte erstellt wird, ist dies möglich.

Codetrennung

Angenommen, Sie verwenden React als Hauptframework. Wenn Sie anfänglich nur eine React-Komponente verwenden und nicht viel, müssen Sie immer noch die gesamte React herunterladen. Mit Svelte ist die Codetrennung viel effizienter, da das Framework in die Komponente integriert ist und diese Komponente sehr klein ist.

Unterstützen Sie Open-Source-Community

Svelte ist eine Open-Source-Software, die von Enthusiasten entwickelt wurde. Die Verwendung des Svelte-Frameworks ist daher kostenlos und ermöglicht die kostenlose Implementierung vieler Funktionen. Darüber hinaus verfügt Svelte über eine aktive Entwicklergemeinschaft auf GitHub, der Sie beitreten können und in der Sie jederzeit um Hilfe bitten oder zu dieser Technologie beitragen können.

Ist Svelte stabil genug und zuverlässig?

Dies ist ein dringendes Problem für die Rahmenbedingungen, die in letzter Zeit auf dem Markt waren. Alle obigen Beispiele beziehen sich auf die Syntax von Svelte Version 3. Derzeit befindet sie sich noch in der Beta-Phase. Im Vergleich zu Branchenriesen wie ReactJS und VueJS ist es nicht sehr entwickelt.

Egal wie interessant SvelteJS sein mag, Sie sollten eine Weile warten, bevor Sie Meisterklassen über den Code unterrichten, der es verwendet. Dies liegt daran, dass die Beta-Version möglicherweise etwas anders ist als die endgültige. Svelte bietet jedoch eine übersichtliche Dokumentation für Version 3, die Anfängern möglicherweise die Arbeit erleichtert. Dieses Framework kann also durchaus als Teil Ihres vertrauenswürdigen Technologie-Stacks angesehen werden.

Ist Svelte.js der nächste Riese?

Schwer zu beantworten. Kann Svelte Vue and React als Front-End-Framework schlagen, das den Test der Zeit bestehen wird?

Dies ist nicht so einfach vorherzusagen. Im Moment hat er noch nicht die Popularität einiger seiner Brüder erreicht. Er hat nicht die gleiche Unterstützung von einem großen Unternehmen wie React. Aber andererseits kam Vue ohne sie ziemlich gut zurecht.

Letztes Jahr wurde eine weitere State of JS-Studie durchgeführt. Es wird jährlich abgehalten, um die Präferenzen führender Entwickler zu bewerten. Svelte ist im Vergleich zu anderen in die Umfrage einbezogenen Bibliotheken am beliebtesten geworden. Dies kann bedeuten, dass es früher oder später als eines der besten JS-Frameworks angesehen wird.

Svelte vs. Reagieren ist ein häufiges Diskussionsthema unter Programmierern, aber eines der Frameworks ist nicht unbedingt eindeutig besser als das andere. Svelte eignet sich gut für die Entwicklung von Webanwendungen oder MVP, während Angular für PWA- oder Unternehmenswebanwendungen gut geeignet ist. Einige Entwickler finden ein Framework, das ihnen gefällt, und halten sich daran, aber lassen Sie es trotzdem nicht versuchen, Svelte auszuprobieren. Möglicherweise gefallen Ihnen die von uns beschriebenen Funktionen.

Lassen Sie uns noch einmal kurz auf die Hauptmerkmale von Svelte

eingehen : ️

Dies ist ein komponentenbasiertes Framework, für das keine zusätzlichen Plugins erforderlich sind.
️ Es funktioniert mit der staatlichen Verwaltung ohne bekannte Schwierigkeiten.
️Es ermöglicht Ihnen, die integrierten [in der Komponente] -Stile zu verwenden, ohne CSS-in-JS zu benötigen, sodass keine Erweiterungen für den Code-Editor oder eine seltsame Syntax erforderlich sind.
️ Ein sehr einfaches Build-Skript reicht aus, um loszulegen.
️Um mit der Arbeit am Basisprojekt zu beginnen, werden praktisch keine Dateien benötigt.

Wenn Sie ein Webentwickler sind, der ein neues Framework benötigt, sollten Sie sicherstellen, dass Svelte einen Versuch wert ist. In anderen Fällen ist Svelte eine gute Option, wenn Sie nach der besten Technologie für Ihre Weblösung suchen.

Warum Sie Svelte für Ihre Webprojekte verwenden sollten