Wie Aurelia uns fit für die Zukunft macht

Mike Reiche in News 15.03.2017

Aus der Frühwebzeit

Mit unseren 13 Jahre Expertise in der Web-Entwicklung haben wir schon viele Javascript-Technologien und Frameworks kommen und gehen sehen. Wer erinnert sich noch an Mootools, Knockout, TinyMCE oder Xajax? Sie alle enstammten einer Zeit, wo die Web-Entwicklung in den Kinderschuhen steckte, wo DHTML als Stern am Firmament erschien und für IE6 optimiert wurde, wo Flash die einzige wahre Lösung für Rich-Media-Inhalte war und Java-Applets verteufelt wurden. Das Web erfindet sich auch heute immer wieder neu. Man könnte sagen es befindet sich in seiner Pubertät - in seiner Persönlichkeitsentwicklung und Selbstfindungsphase, in einer Welt wo viele alteingesessene Platzhirsche dem Sprössling den Weg zeigen wollen. Aber unser aller Web entwickelt sich momentan selbstständig, befreit von Monopolen, unterstützt durch seine Vorfahren, getrieben von Open Source und Standards.

Zur Gegenwart

Aus dieser Moderne entstehen viele Frameworks: Polymer, Aurelia, Angular, React. Sie alle buhlen um die Gunst des Webs. Dabei machen sie zwar vieles besser, aber nicht unbedingt revolutionär. Zwar ist Javascript eine moderne Sprache, die schon sehr früh Paradigmen wie Closures und asynchrone Abläufe verstand, aber die technologische Grundlage der Browser-Unterstützung geht prinzipiell einige Schritte zurück in die Vergangenheit. MVVC-Frameworks gab es mit Robotlegs im Flash schon. Flex und AIR waren umfangreiche Komponenten-Systeme. Video- u. Audio-Bearbeitung war damit schon frühzeitig möglich und sogar 3D-Animationen verstanden Browser mit Java-Applets. Woher kommt eigentlich die Begeisterung für die Neu-Erfindung des Rades? Wenn man das Web als pubertär betrachtet kann man sich die Frage selber beantworten. Es trennt sich von den Weisheiten seiner Vorfahren, es macht seine eigenen Erfahrungen und findet das alteingesessene Zeug schlicht "uncool".

Und in die Zukunft

Cool dagegen ist, dass ich als Software-Entwickler endlich fürs Web so entwickeln kann, wie ich es bisher gewohnt war. Echte Objektorientierung, Namespaces und Dependency Injection. Es gibt sogar Canvas', wo ich meine Draw-Calls absetzen kann und wenn ich will projiziert mir das Betriebssystem nativ Polygone aus dem Raum auf den Bildschirm. Es hat lange gedauert, aber nun ist die Web-Entwicklung den Kinderschuhen entwachsen und in seinem Lauf nicht aufzuhalten. Schon allein, weil das W3C als Konsortium für die Weiterentwicklung von HTML und ECMAScript zum großen Teil aus Herstellern besteht, die dem Open-Source-Gedanken positiv gegenüberstehen. All das verdanken wir der Diversität im Browsermarkt und der Reinkarnation des Netscape Navigators als Firebird anno 2005.

Über Angular

Nach einer langen, langen Suche nach einer geeigneten Javascript-Technologie für unser E-Commerce-CMS Myty mussten einige Frameworks eine Bewährungsprobe bestehen. Die Anforderungen waren eigentlich simpel. Die Entwicklung von View- und Anwendungslogik sollte getrennt vonstattengehen. Außerdem sollte diese Technologie von der simplen Webseite bis zur komplexen Anwendung gleichermaßen eingesetzt werden können. Daher fiel die Wahl recht schnell auf AngularJS (1.x). Dieses fantastische Framework hatte alles was man braucht: Services, DI, Templating, Routing, MVC. Unterstützt von Google und den vielen Drittentwicklern konnte damit alles entwickelt werden. Offline-Unterstützung mit angular-ressource und Breeze, oder die Integration von UI-Frameworks wie angular-boostrap und angular-material. Time to Market in Nullkommanix. Soviel Awesomenes habe ich sogar in meiner Flash-Zeit selten gesehen. Klar hatte Angular auch Probleme. Ständig dieser $scope und seinen komischen $rootScope. Das konnte für Verwirrung sorgen und war fehleranfällig. Zwar hat man mit v1.5 angefangen diese, immer lauter werdenden, Kritikpunkte wegzurationalisieren indem man mehr die Komponentenentwicklung in den Fokus rückte, aber so richtig modern fühlte sich das auch nicht mehr an. Angular2 sollte vieles besser machen, indem es von Haus aus Webkomponenten unterstützt. Allerdings ist Angular2 nicht nur eine weitere Version, es ist ein völlig anderes Framework, was sich nur noch den Namen mit seiner Vorgängerversion teilte.

Im Sommer 2016, als die Suche nach einem aktuellen Framework für die Myty-Entwicklung begann, war Angular2 immer noch Alpha. Es gab wohl konzeptionelle Probleme mit der Router-Komponente und außerdem kaum Unterstützung für die ganzen tollen 3rdParty-Plugins, die noch in Angular1 verfügbar waren. Es war also abzusehen, dass wir die Implementation unseres Backends auf neuen Javascript-Technologien von Grund auf neu entwickeln mussten. Dieser Umstand und der Widerstand meines Kollegen Benjamin Süß haben dazu geführt, dass der Gedanke auf Angular 1 oder 2 zu setzen ad acta gelegt wurde. Das bis dato häufiger eingesetzte React wurde - zumindest meinen - Ansprüchen nicht gerecht. Es musste also eine Alternative her. In diese Bresche sprang Aurelia.

Zu Aurelia

Aurelia erfüllt genau diese Ansprüche, in dem es nicht zu viel verspricht, sich auf seine Stärken konzentriert und dabei das Prinzip der Gewaltenteilung (Separation of concerns) einhält. Das besondere dabei: Es bleibt einfach! 

Nach dem Prinzip Convention over Configuration hat man in Windeseile ein Projekt aufgesetzt und Routen mit Komponenten verknüpft. 

Eine Aurelia Komponente besteht aus etwas HTML

<template>
    <h1>Hallo ${subject}</h1>
</template>

und Javascript

export class HelloWorld {
    subject="World";
}

Hier befindet sich ein vollständiges Beispiel des Aurelia-Routers.

Dabei bleibt Aurelia interoperabel und harmoniert gut mit anderen Frameworks. Folgendes Video erläutert die Unterschiede zu anderen Frameworks wie React, Angular und Polymer genauer.

Kurz gesagt: Aurelia ist genau das Framework, was wir für die zukünftige Myty-Entwicklung benötigen und was uns hilft, Legacy-Code wegzukürzen und neue Softwareparadigmen umzusetzen. Deswegen kommt diese Technologie nun erstmals in unserem neu veröffentlichtem Myty 5.3 zum Einsatz - wir freuen uns auf eine spannende Zukunft.