Vorstellung des JavaScript-Frameworks Aurelia

Inhaltsverzeichnis

Die rasante Welt von JavaScript erhält beinahe mit jedem Tag neuen Zuwachs an Bibliotheken und Frameworks. Aurelia versucht, sich mit eleganten Konventionen, Fokus auf dem Entwickler-Workflow und innovativen Techniken Aufmerksamkeit zu erkämpfen.

Mittlerweile hat sich beinahe eine eigene Bewegung unter dem Namen "Yet Another JS Framework" aufgetan, die ihren Frust über die wahre Flut an Frameworks auf amüsante Art und Weise zur Schau stellt. Betrachtet man das Geschehen jedoch nüchtern, fällt auf, dass Ähnliches bereits in Sprachen wie PHP und Ruby geschah, wo sich neue Kandidaten mit innovativen Ideen und vorausschauenden Konzepten langfristig etablieren konnten.

Aurelia ist als Weiterentwicklung von Durandal zu verstehen, einem SPA-Framework (Single Page Application), das die Knockout-Bibliothek und einen soliden MVVM-Kern (Model View ViewModel) zur Grundlage nimmt. Der Kopf hinter beiden Projekten ist Rob Eisenberg, der seit über zehn Jahren Open-Source-Frameworks für unterschiedliche Plattformen entwickelt und damit zu einer bekannten Größe in der JavaScript-Welt geworden ist.

Dem einen oder anderen dürfte er vielleicht auch als Vater des neuen Routers aus Angular 2 bekannt sein, der bisher großen Zuspruch genießt. Nachdem er die Zusammenarbeit mit Google aufgelöst und sich aus dem Angular-Team verabschiedet hatte, ist Aurelia als ein modulares, vorausschauendes Framework ins Leben gerufen worden, das sich an den Bedürfnissen der Entwickler orientiert. Darüber hinaus unterstützt das Unternehmen Durandal das Projekt und soll künftig bei Bedarf professionellen Support anbieten. Unter anderem durch den Support des Internet Explorer 9 zeigt sich eine deutliche Ausrichtung auf Unternehmen, die moderne Werkzeuge auch in Legacy-Bereichen einsetzen möchten.

Die Betreiber sehen Entwickler als die wahren Kunden des Frameworks und priorisieren deren Unterstützung seit den ersten Tagen. Ersichtlich ist das beispielsweise dadurch, dass der offizielle Gitter-Kanal zu einem der aktivsten überhaupt zählt. Darüber hinaus sorgen regelmäßige Blog-Beiträge für Transparenz in Bezug auf die aktuellen Entwicklungsschritte.

ECMAScript 2015 von Grund auf

Der wohl markanteste Unterschied zu aktuellen Konkurrenten ist die Entwicklung des Frameworks auf Basis der ECMAScript-Standards 2015 und 2016 – auch bekannt als ES6 und ES7 –, was zu einem überraschend verständlichen und gut lesbarem Code führt. Ermöglicht wird das durch den Einsatz von Polyfills, also Code-Schnipseln, die künftige Techniken für ältere Browser nachbilden.

Zu den verwendeten Konstrukten gehören neben Klassen, Modulen und den neuen Fat-Arrow-Lambda-Ausdrücken, auch vorrangig von Yehuda Katz (EmberJS) und Rob Eisenberg konzipierte neue Techniken wie Dekoratoren. Deren Einsatz ermöglicht es Aurelia, getreu dem Grundsatz "Convention over Configuration", Entwicklern möglichst viel redundante Arbeit abzunehmen und die verbleibende durch einfache Konventionen zu automatisieren. Nebenbei werden saubere Unit- und E2E-Test in den Workflow eingeschlossen.

Vorstellung der verwendeten Tools

Zur Einführung in Aurelia bedient sich der Artikel des offiziellen Beispiels der "Skeleton Navigation App", die einen Schnelleinstieg in die Arbeit mit dem Framework ermöglichen soll.

Um den Funktionsumfang von Aurelia voll nutzen zu können, ist das Zusammenspiel der folgenden Werkzeuge nötig:

• Gulp ist ein Werkzeug zur Abarbeitung automatisierter Aufgaben. Sie sind mit JavaScript innerhalb einer Konfigurationsdatei zu deklarieren. Im Falle von Aurelia ist sie auf mehrere Dateien verteilt, um sich so möglichst einfach an die Bedürfnisse der Entwickler anpassen zu lassen. Zu den Kernaufgaben gehören das Transpilieren des ES2015-Codes zu ES5 sowie das Bereitstellen eines einfachen Webservers zu Entwicklungszwecken, der laufende Änderungen mit dem BrowserSync-Tool nachverfolgt.
• SystemJS ist eine Bibliothek, die es ermöglicht, ES2015-Module gemäß der ES2015-Spezifikation unter Einsatz des ES6-Module-Loader-Polyfills in älteren Browsern zu laden. Dadurch lässt sich Anwendungscode auf mehrere Dateien verteilen, die separate Module umfassen und die Nutzer – ähnlich wie bei serverseitigen Sprachen – bei Bedarf anfordern können.
• JSPM: Um Pakete von Drittanbietern zu beziehen, verwendet Aurelia JSPM zur Frontend-Paketverwaltung. Dessen Besonderheiten sind das ausgezeichnete Zusammenspiel mit SystemJS und die Option, Pakete über unterschiedliche Endpunkte zu beziehen. So lässt sich direkt auf GitHub- und NPM-Projekte referenzieren. JSPM kümmert sich dann um die korrekte Installation und Ummantlung des Ausgangsformats (AMD, CJS, globale Variablen) im Modul-Format von ES2015.