Aurelia und Angular sind beliebte JavaScript-Client-Frameworks, mit denen man moderne Anwendungen für Web, Mobile und Desktop erstellen kann. Sie bieten moderne Funktionen wie Data Binding, erweiterbares HTML, SPA, Routing, UI Composition, usw., um komplexe Anwendungen zu erstellen.
In diesem Blogbeitrag habe ich versucht, Aurelia und Angular zu vergleichen und die Vorteile von Aurelia gegenüber Angular zusammen mit den Vor- und Nachteilen von beiden hervorzuheben.
Aurelia ist unauffällig, leicht zu erlernen und zu verstehen, da die Philosophie „Konvention vor Konfiguration“ gilt. Man muss nur einige einfache Konventionen befolgen, ohne solche Konfigurationen, wie sie bei Angular erforderlich sind. Die Syntax ist leicht zu merken und erlaubt es, Komponenten sowohl in Typescript als auch in Vanilla JavaScript zu erstellen.
Aurelia und Angular basieren beide auf dem Komponenten-Ansatz und sind in vielerlei Hinsicht ähnlich. Angular wird im Wesentlichen vom IT-Giganten Google unterstützt, während Aurelia von Rob Eisenberg und seinem Team entwickelt wird. Eisenberg war früher Mitarbeiter des Angular-2-Teams von Google, verließ dieses jedoch aufgrund von Unstimmigkeiten und beschloss, eine „unaufdringliche“ Plattform unter Einhaltung von Webstandards zu entwickeln.
Dies ist einer der Vorteile von Aurelia. Sein Ansatz „Konvention statt Konfiguration“ macht es unaufdringlich. Sie müssen sich nicht um Frameworks kümmern, sondern können sich primär auf Ihre Anwendungslogik konzentrieren.
Wenn Sie in Aurelia eine Komponente erstellen, brauchen Sie keinen Dekorator, um eine Komponente zu annotieren, Sie müssen sich nicht um die Spezifikation von Metadaten kümmern, folgen Sie einfach den einfachen Konventionen und Aurelia wird viele Dinge von selbst erledigen.
Lassen Sie uns ein Beispiel sehen. Um eine einfache Komponente zu erstellen, die „Hello World!“ zu erstellen, kann Ihr Komponenten-Typescript-Code sein:
HTML-Vorlage:
Der Standard-Selektor für Ihre Komponente ist <hello></hello> und ihre HTML-Vorlage wird durch die Dateinamen-Konvention identifiziert.
Die gleiche Komponente in Angular
Typescript-Code:
HTML-Vorlage:
In Angular muss man die Komponente auch im Deklarationsabschnitt des ngModuls deklarieren.
Die Erstellung von Komponenten scheint in Aurelia einfacher zu sein, oder?
Bindungssyntax
Die Syntax von Aurelia ist einfacher zu erlernen und zu merken.
Wertbindungssyntax: attribute.command=“expression“
z.z.B. <Eingabewert.bind=“Vorname“>
Ereignisbindungssyntax: event.command=“expression“
z.B. <Button click.trigger=“sayHello()“>Say Hello</button>
Klassenbindung:
z.B. <div class.bind=“isActive ? ‚active‘ : ““></div>
Angulars Bindungssyntax
Wertbindung: In Angular wird die ngModel-Direktive für die Bindung von Eingaben verwendet, wobei „ngModel“ zwischen Groß- und Kleinschreibung unterscheidet.
z.B. <input =“firstName“ >
Event binding: Dies ist etwas einfach (event)=“expression“
z.B. <button (click)=“sayHello()“>Say Hello</button>
Class binding: Es hat die Syntax =“some-condition“
z.B. =“hero === selectedHero“
Routing und Navigation
Die Konfiguration des Routings ist in beiden Frameworks grundsätzlich ähnlich, allerdings mit einem wichtigen Unterschied. In Angular werden die Routen für ein Modul zentral in einer einzigen Konfiguration definiert, die die Pfade und die routingfähigen Komponenten zusammen mit allen Unterrouten definiert, was die Konfiguration sehr umfangreich und komplex macht.
Während in Aurelia die übergeordneten Routen an einer Stelle definiert werden können und die Konfiguration der Unterrouten in die untergeordnete Komponente gelegt wird, verbirgt sich die innere Komplexität und die Komponenten sind vollständig gekapselt.
Sprachunterstützung
Aurelia bietet Ihnen eine breite Auswahl an ES5, ES 2015, ES 2016, ES.Next und Typescript, um Ihren JavaScript-Code zu schreiben.
Während Angular den Benutzer einschränkt, um Code nur in Typescript zu schreiben.
Standardkonformität
Aurelia ist ordnungsgemäß konform mit bestehenden Standards und auch mit aufkommenden Webstandards.
Angular ist in diesem Fall weit hinterher, wie die Community darauf hinweist, dass es von Standards abweicht. Zum Beispiel unterscheidet HTML nicht zwischen Groß- und Kleinschreibung, aber Angular hat eine Syntax übernommen, die Groß- und Kleinschreibung unterscheidet, wie ngFor, ngModel, die nicht nativ vom Browser verarbeitet werden können.
Ökosystem und kommerzieller Rückhalt
Angular wird vom IT-Giganten Google unterstützt, hat ein breites Ökosystem und wird von der Community unterstützt. Aurelia hinkt in diesem Fall etwas hinterher, sein Ökosystem ist kleiner und Komponenten von Drittanbietern sind nicht weit verbreitet.
Aber sein Ökosystem wächst kontinuierlich und es entwickelt sich zu einem beliebten Framework aufgrund der einfachen Entwicklung, der Standardkonformität und der Einfachheit.
Dokumentation
Beide, Angular und Aurelia, haben eine reichhaltige Dokumentation und Tutorials, man kann die Grundlagen des Frameworks erlernen, indem man einfach den Tutorials auf ihren Seiten folgt.
Ein negativer Punkt von Angular ist, dass es eine „steile Lernkurve“ hat. Das Angular-Team aktualisiert ständig sein Framework und diese Updates sind sehr häufig, so dass man ständig lernen und die notwendigen Änderungen anpassen muss.
Fazit
Aurelia und Angular sind beides leistungsstarke Frameworks, Angular ist jedoch aufgrund der kommerziellen Unterstützung durch Google und der breiteren Unterstützung durch die Community bekannter.
Während Aurelia einfacher, unaufdringlicher und standardkonformer ist, macht seine Politik „Konvention vor Konfiguration“ die Entwicklung einfacher und schneller.