© istockphoto.com/VikaSuhtion
Ein Blick auf das Aurelia-Framework

Aurelia im Überblick


Wieder einmal gibt es ein neues JavaScript-Framework, bei dem es sich lohnt, einen Blick darauf zu werfen. Neu heißt konkret, dass der initiale Commit in das Projekt-Repository auf GitHub am 10.12.2014 stattfand. Das Framework heißt Aurelia und wurde von Rob Eisenberg ins Leben gerufen. Es wird vom Unternehmen Durandal entwickelt und ist ein wichtiger Bestandteil der Unternehmensstrategie, die vorsieht, weitere Dienstleistungen rund um das Framework anzubieten. Bevor Sie sich nun auf das nächste JavaScript-Framework stürzen, sollten Sie zunächst erfahren, was genau es von den anderen unterscheidet und warum es sich tatsächlich lohnt, etwas Zeit mit Aurelia zu verbringen.

Aurelia bezeichnet sich selbst zu Recht als ein modernes Framework. Es setzt grundlegend auf den aktuellen JavaScript-Sprachstandard, wobei vor allem das Modul- und Klassenkonzept von JavaScript zum Einsatz kommen. Die gute Nachricht für alle Entwickler, die sich mit älteren und/oder ungeliebten Browsern herumschlagen müssen: Aurelia bemüht sich, auch den Internet Explorer in der Version 9 zu unterstützen. Hierzu sind zwar zusätzliche Polyfills erforderlich, trotzdem ist das ein wichtiger Faktor für den Einsatz in größeren Unternehmen.

Bei der Architektur des Frameworks setzen die Entwickler auf bekannte und etablierte Standards wie einen MVVM-Aufbau, Modularisierung und Dependency Injection. Das Framework kommt – ähnlich wie AngularJS – hauptsächlich in Single-Page-Applikationen zum Einsatz, da es hier seine volle Stärke ausspielt, indem es den Application State verwaltet und mit einem Router zwischen verschiedenen States wechselt. Haben Sie als Entwickler bereits Erfahrung mit anderen modernen Frameworks sammeln können, werden Ihnen viele der Konzepte von Aurelia bekannt vorkommen. Der Einstieg in das Framework gestaltet sich dann relativ komfortabel, und Sie erzielen schnell Fortschritte in der Entwicklung.

Setup

Das grundsätzliche Tooling für Aurelia basiert auf Node.js und Git. Sie sollten also beide Werkzeuge auf Ihrem Entwicklungssystem installiert haben, bevor Sie mit der eigentlichen Entwicklung einer Applikation beginnen. Die Entwickler von Aurelia haben mit dem Navigation Skeleton eine Art „Hello World“-Applikation für einen schnellen Einstieg in das Framework geschaffen. Die Grundlagen hierfür können Sie entweder herunterladen [1] oder sich über einen Yeoman-Generator erzeugen lassen. Diese Skeleton-Applikation enthält eine voll funktionsfähige Aurelia-Applikation, bei der die wichtigsten Komponenten bereits zusammengefügt sind. Auf dieser Struktur können Sie direkt mit der Entwicklung ihrer eigenen Applikation beginnen.

Die Skeleton-Applikation nutzt gulp als Build-System. Bevor Sie also mit der Entwicklung beginnen, müssen Sie mit den Kommandos npm install --g gulp und npm install --g jspm gulp und JSPM installieren. Primär dient dieses System dazu, den Quellcode aus ECMAScript 6 in ECMAScript 5 zu übersetzen und für die Entwicklung einen Webserver auf dem lokalen Port 9000 zu starten. Mit dem Kommando gulp watch starten Sie das Entwicklungssystem und können dann in Ihrem Browser über http://localhost:9000 auf die Applikation zugreifen. Die Watch-Task, die Sie mit diesem Kommando starten, sorgt dafür, dass alle Änderungen an den Quellcodedateien sofort im Browser aktiv werden. Hierfür wird die Applikation neu gebaut und über das BrowserSync-Plug-in Ihr Browser benachrichtigt. Diese Kombination von Werkzeugen erlaubt eine schnelle Entwicklung mit einer direkten Rückmeldung vom System über Änderungen.

Das zweite Werkzeug, das beim Setup zum Einsatz kommt, ist JSPM. JSPM ist ein Paketmanager für den Browser, der auf dem SystemJS-Modul-Loader aufbaut. Damit können Sie Module installieren und in Ihre Applikation einbinden. Mit der entsprechenden Konfiguration kann der Modul Loader die installierten Module direkt finden und einbinden, was die Arbeit mit Bibliotheken von Drittanbietern erheblich erleichtert. Die Kombination von JSPM und SystemJS ermöglicht es schließlich, einen Build für den Produktivbetrieb zu erstellen, bei dem sämtliche Ressourcen in wenige optimierte Dateien zusammengefasst werden können.

Die folgenden Schritte werden Ihnen von der Skeleton-Applikation abgenommen. Es ist jedoch hilfreich, die einzelnen Vorgänge zu verstehen.

Nach der Installation aller erforderlichen Komponenten müssen Sie dafür sorgen, dass das Framework korrekt geladen wird. Den ersten Schritt bildet das Laden des Modul Loaders SystemJS, indem Sie diese Datei per Script-Tag laden. Als Nächstes benötigen Sie die Konfiguration für JSPM und SystemJS. Sie enthält die Beschreibung der installierten Module und dient zur Pfadauflösung – also zum korrekten Auffinden der Module. Möchten Sie eine solche Konfiguration für Ihr Projekt manuell erstellen, nutzen Sie dafür JSPM auf der Kommandozeile mit der Option init. Nachdem Sie die Konfiguration erstellt haben, binden Sie sie ebenfalls mittels Script-Tag ein.

Das eigentliche Bootstrapping von Aurelia besteht aus zwei Teilen. Zunächst erhält ein HTML-Element das Attribut aurelia-app, um zu kennzeichnen, an welcher Stelle die Aurelia-Applikation eingebunden werden soll. Der zweite Teil besteht aus dem Laden des aurelia-bootstrappers – einem Bestandteil des Frameworks, der dafür zuständig ist, die einzelnen Module zum Leben zu erwecken. Zu diesem Zweck nutzen Sie die System.import-Methode mit der Zeichenkette aurelia-bootstrapper. Um alles Weitere kümmern sich dann SystemJS und das Framework selbst. Listing 1 fasst die einzelnen Schritte noch einmal für Sie zusammen.

Listing 1: Aurelia Bootstrapping

<body aurelia-app> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.import('aurelia-bootstrapper'); </script> </body>

Der Startpunkt für eine Applikation mit Aurelia ist die Datei app.js. Alternativ können Sie hier in den Bootstrap-Prozess eingreifen und ein Konfigurationsmodul angeben, in dem zum Beispiel der Router konfiguriert wird. Dazu später aber noch mehr. Zunächst erfahren Sie jetzt etwas über die grundsätzliche Architektur und das MVVM-System von Aurelia.

MVVM

Aurelia orientiert sich bei der Architektur einer Applikation an einem klassischen MVVM-Ansatz. Die wichtigsten Elemente, mit denen Sie gleich beim Einstieg in Aurelia zu tun haben werden, sind die Views und die zugehörigen ViewModels. Die View stellt das Tem­plate – also die HTML-Struktur – dar, das dem Benutzer im Browser angezeigt werden soll. Das ViewModel trägt alle Daten und Methoden, die der View zur Verfügung stehen.

Eine herausragende Eigenschaft von Aurelia ist, dass Sie als Entwickler relativ wenig Frameworkcode schreiben müssen, sondern sich auf Standard-JavaScript beschränken können. So ist ein ViewModel nichts anderes als eine ganz normale JavaScript-Klasse. Die Berührungspunkte mit dem Framework beschränken ...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang