Wir veröffentlichen den zweiten Teil der Übersetzung des Materials, das den fünf besten JavaScript-Tools für die Entwicklung clientseitiger Teile von Webprojekten gewidmet ist. Der
erste Teil befasste sich mit der React-Bibliothek und dem Angular-Framework. Hier diskutieren wir Vue, Ember und Backbone.
3. Vue
Die Ideen hinter Vue kommen von Angular und React, aber Vue ist in vielerlei Hinsicht besser als diese beiden Front-End-Entwicklungstools. Vue wurde in diesem Jahr über 40 Millionen Mal heruntergeladen. Ein kürzlich veröffentlichter Snyk JavaScript Frameworks-Sicherheitsbericht wurde veröffentlicht. Es zielt hauptsächlich darauf ab, die Sicherheit von React und Angular zu erforschen, aber es gab einen Ort, an dem andere Projekte untersucht werden konnten. Von Vue aus können Sie in diesem Bericht herausfinden, was nur über 4 seiner sofortigen
Schwachstellen bekannt ist , die behoben wurden.
Wenn Sie mit Vue nicht vertraut sind, finden Sie hier einige wichtige Fakten zu diesem Framework.
Bei der Arbeit mit Vue werden die Logik der Komponente, ihr Layout und ihre Stile in einer Datei gespeichert. Mit Ausnahme von Stilen werden Projektmaterialien auch in React gespeichert. Die Interaktion von Komponenten in Vue erfolgt über Objekte, in denen die Eigenschaften und der Status von Komponenten gespeichert sind. Auch dieser Ansatz wurde, bevor er in Vue erschien, in React verwendet.
Mit Vue, das Angular ähnelt, können Sie HTML-Markup- und JavaScript-Code mischen. Um Komponentendaten in eine Vorlage zu integrieren, müssen Sie Vue-Anweisungen verwenden. Wie
v-bind oder
v-if .
Einer der Gründe, warum Vue als würdige Alternative zu React angesehen werden sollte, liegt darin, wie der Status der Anwendung hier organisiert ist. Wenn in React-Projekten das React + Redux-Bundle verwendet wird, werden die zum Verwalten des Status erforderlichen Verfahren mit zunehmender Größe der Anwendung komplizierter. Dies kann darauf zurückzuführen sein, dass der Programmierer, anstatt an der Anwendung selbst zu arbeiten, viel Zeit damit verbringen muss, Redux-Mechanismen einzurichten. Vue verwendet die Vuex-Bibliothek, um den Status zu verwalten. Es ähnelt Flux und wurde speziell für Vue erstellt. Das Arbeiten damit ist wesentlich komfortabler als mit Redux.
Wenn Sie versuchen, eine Wahl zwischen Vue und Angular zu treffen, können die Gründe, warum Sie Vue bevorzugen, auf die Tatsache reduziert werden, dass Angular im Vergleich zu Vue wie ein überkompliziertes Großprojekt aussieht, dessen Art der Wunsch ist, den Entwickler einzuschränken. Vue ist viel einfacher als Angular und schränkt Programmierer nicht so sehr ein.
Ein weiterer Vorteil von Vue gegenüber Angular and React ist, dass Sie keine neue Sprache lernen müssen, um mit diesem Framework zu arbeiten.
▍ Elemente des Vue-Ökosystems
Lassen Sie uns eine kurze Beschreibung des Ökosystems geben, in das jemand fällt, der sich für Vue entscheidet:
- Um den Status von Vue-Anwendungen zu steuern, wird die Vuex-Bibliothek verwendet, die auf Konzepten basiert, die sich auf Flux beziehen.
- Es gibt Entwicklertools für Chrome und Firefox, die das Erstellen von Vue-Projekten erleichtern.
- Das Vue-Ökosystem verfügt über einen Vue
vue-loader für Webpacks, mit dem Sie Vue-Komponenten als Single-File-Komponenten verwenden können. - Um mit Server-APIs zu arbeiten, können Sie den HTTP-Client für die
vue-resource und die Axios-Bibliothek verwenden. - Vue unterstützt das Nuxt.js-Framework, das die Unterstützung für Anwendungen umfasst, die auf dem Server gerendert werden. Nuxt.js kann als Konkurrent von Angular Universal angesehen werden.
- Mit der Weex-Bibliothek können Sie Vue-basierte mobile Anwendungen entwickeln.
Vue ist ein großartiger Rahmen, der andere in Bezug auf Benutzerfreundlichkeit übertrifft. Vielleicht werde ich selbst in naher Zukunft zu Vue wechseln. Dieses Framework ist nicht so komplex wie React und Angular und eignet sich auch gut für die Entwicklung von Anwendungen verschiedener Größen.
4. Glut
Ember 3.13 wurde in diesem Jahr veröffentlicht. In dieser Version des Frameworks sind viele neue Dinge aufgetaucht. Ember ähnelt Backbone und Angular. Es ist auch eines der ältesten JavaScript-Frameworks. Trotzdem bleibt er bei den Chancen nicht hinter seinen jüngeren Konkurrenten zurück. Beispielsweise wird die Technologie der nachverfolgbaren Eigenschaftsänderung unterstützt, mit der Änderungen im Anwendungsstatus auf einfache Weise überwacht und leichter visualisiert werden können.
Ember verfügt über eine ziemlich ausgefeilte Architektur, mit der Sie schnell große Client-Anwendungen erstellen können. Es setzt typische MVC-Ideen um. Ember-Anwendungen werden aus Adaptern, Komponenten, Controllern, Hilfsobjekten, Modellen, Routen, Diensten, Vorlagen, Dienstprogrammen und Add-Ons erstellt.
Eine der interessantesten Funktionen von Ember sind die Befehlszeilen-Tools (Ember CLI). Diese Tools helfen Front-End-Entwicklern, produktiv zu arbeiten. Mit der Ember-CLI können Sie nicht nur Projektvorlagen erstellen, sondern auch Vorgaben für Controller, Komponenten und andere Entitäten, aus denen Anwendungen erstellt werden.
▍Ember Ökosystemelemente
Der Front-End-Entwickler, der Ember verwendet, verfügt über die folgenden Hauptmerkmale:
- Ember CLI ist ein Befehlszeilentool für das Rapid Prototyping von Anwendungen und für das Abhängigkeitsmanagement.
- Standard Ember Developer Server.
- Ember Data - eine Bibliothek zum Arbeiten mit Daten.
- Lenker ist eine Vorlagen-Engine, die in Ember-Anwendungen verwendet wird.
- QUnit ist ein Framework zum Testen von Ember-Projekten.
- Ember Inspector - Entwicklertools für Chrome und Firefox.
- Ember Observer - Zusatzkatalog für Ember CLI.
Vielleicht kann Ember als unterschätztes Framework bezeichnet werden, aber es eignet sich trotzdem hervorragend für die Erstellung komplexer Webprojekte.
5. Backbone.js
Backbone ist ein JavaScript-Framework, das auf einer MVC-ähnlichen Architektur basiert. Nehmen wir an, dass MVC als "Controller" in einem Backbone als "View" bezeichnet wird. In Backbone-Ansichten können verschiedene Template-Systeme verwendet werden. Zum Beispiel - Schnurrbart, Lenker, jQuery-tmpl. In Backbone-Projekten können Sie Bibliotheken von Drittanbietern verwenden. Es ist zu beachten, dass die einzige feste Backbone-Abhängigkeit die Bibliothek Underscore.js ist.
Backbone ist ein benutzerfreundliches Framework, mit dem Sie schnell Anwendungen für einzelne Seiten entwickeln können. Unter den Hilfswerkzeugen, die in Verbindung mit Backbone.js verwendet werden, können wir Chaplin, Marionette, Thorax nennen.
Wenn Sie eine Anwendung entwickeln müssen, mit der Benutzer verschiedener Gruppen arbeiten, können Sie mit Backbone-Sammlungen (Arrays) Modelle trennen. In Backbone-Modellen, Sammlungen, Routen und Ansichten können Sie Ereignisse verwenden.
▍Backbone-Ökosystemelemente
Zu den Merkmalen des Backbone-Ökosystems gehören:
- Die Backbone-Bibliothek enthält Ereignisse, Modelle, Sammlungen, Ansichten und einen Router.
- Die Underscore.js-Bibliothek, von der Backbone abhängig ist, enthält eine Reihe von Hilfsfunktionen, mit denen Sie browserübergreifenden JS-Code schreiben können.
- Bei der Entwicklung von Backbone-Anwendungen können Sie verschiedene Vorlagensysteme verwenden.
- Das Backbone CLI-Befehlszeilentool vereinfacht die Anwendungsentwicklung.
- Die Bibliotheken Marionette, Thorax und Chaplin helfen bei der Erstellung von Anwendungen mit spezifischen Architekturlösungen.
Vielleicht kann Backbone nicht als ernstzunehmender Konkurrent für die anderen in diesem Material behandelten Front-End-Entwicklungstools bezeichnet werden. Dieses Framework ist jedoch bei Entwicklern sehr beliebt. Daher kann sich herausstellen, dass Backbone genau das ist, was Sie brauchen.
Zusammenfassung
Dieser Artikel bietet einen kurzen Überblick über Web-Frameworks, die laut einer Umfrage unter Entwicklern von
ValueCoders als die besten anerkannt wurden. Wir hoffen, dass diese Überprüfung dazu beiträgt, die richtige Wahl für diejenigen zu treffen, die gerade dabei sind, ein Framework für ihr nächstes Webprojekt auszuwählen.
Sehr geehrte Leser! Worüber schreiben Sie Front-End-Webprojekte?
