Ein erster Blick auf Frontend-Framework Aurelia

Web-Frontend-Frameworks gibt es mittlerweile mehr als genug, doch besonders AngularJS erfreute sich in der Vergangenheit starker wachsender Beliebtheit.
Große und komplexe Projekte lassen AngularJS aber an seine Grenzen stoßen. Beispielsweise können Implementierungen, die nicht dem typischen „Angular Way“ folgen, teilweise schwierig integriert werden.
Wir stießen vor kurzem auf das Frontend-Framework Aurelia. Dieses verspricht nicht nur schneller als AngularJS erlernbar zu sein, sondern versucht Lösungen für die bekannten Probleme von AngularJS bereitzustellen. Somit ist Aurelia ein direkter Konkurrent für die kommende Angular-Version 2.0.
Wir haben eine frühe Version von Aurelia (0.18.0) angeschaut und sind auf Eure Erfahrungen mit Aurelia gespannt.

Entstehung und Architektur von Aurelia-Anwendungen

Aurelia wird unter der Leitung von Rob Eisenberg entwickelt. Rob war ehemals bei der Angular 2.0-Entwicklung beteiligt. Seine Vorstellung von Angular 2.0 und die des restlichen Angular-Teams gingen im Laufe der Entwicklung auseinander. Schlussendlich rief Rob sein eigenes Framework ins Leben – Aurelia. Aurelia ist laut ihm das Ergebnis, das die Angular-Community sich als Weiterentwicklung für AngularJS in der Version 2.0 gewünscht haben. [1]

Jede Aurelia-Anwendung besitzt eine gewöhnliche „index.html“-Seite. Sie bildet das HTML-Grundgerüst der Anwendung, besitzt aber noch keine View und kein View-Model.
Gemäß der Aurelia-Konvention lädt das Framework die View „app.html“ und das zugehörige View-Model „app.js“ und erstellt die Aurelia-Webseite.
Die Zusammengehörigkeit beider Dateien erfolgt über das Software Paradigma „Convention over Configuration“. Folglich müssen beide Dateien denselben Namen („app“) besitzen.
Jedes View-Template ist in HTML definiert und muss in einem <template>-Tag eingebettet werden. View-Models können in ECMAScript 2015 (ES6) verfasst und für ältere Browserversionen transkompiliert werden.

<template>
  <h1>car = ${carName}</h1>
  <h1>price = ${getPrice()}</h1>
</template>

Das dazugehörende View-Model („car.js“) enthält die zugehörende Funktionalität für das Template:

export class car {
  carName = “BMW”;
  price = 45000;
  getPrice(){
    return this.price;
  }
}

Auffallend ist die Übersichtlichkeit des Codes im Gegensatz zu Angular in der Version 1 und gleichzeitig die Ähnlichkeit zu Angular 2.0-Code.

Für eine einfache Single-Page-Aurelia-Anwendung werden mehrere Templates mit zugehörigen View-Models definiert und das gewünschte Paar dynamisch nachgeladen. Hierfür wird mit dem Aurelia-Router ein Navigationsgerüst aufgebaut. Der Router erstellt die Navigation in dem „app.html“-Template. Das zugehörige „app.js“-View-Model liefert die Einträge zu den aufzurufenden (Unter-)Seiten.

Fazit

Aurelia befindet sich zwar erst kurz vor dem Beta-Release, bietet aber schon bereits heute interessante, neue Ansätze für die dynamische Frontend-Entwicklung. Besonders die „Convention over Configuration“-Ansätze haben uns sehr gut gefallen.

Durch die wachsende Anzahl der Aurelia-Community und der sehr guten Dokumentation überlegen wir, Aurelia in einer stabilen Version zudem in unseren Projekten einzusetzen.

Zudem sind wir auf den Kontrahenten AngularJS 2.0 gespannt. Ob Aurelia das bessere AngularJS (2.0) ist, wird sich erst noch in Zukunft nach dem Release beider Frameworks zeigen. Gegenüber Angular in der Version 1 kann es sich nach unserer Meinung bereits heute durchsetzen. Der entscheidende Vorteil ist die bessere Lesbarkeit und Übersichtlichkeit des Codes.

Quellen: