AngularJS bei IS24

Scout24
Scout24 Engineering
3 min readJun 18, 2013

von Alexander Weiher

Im Team i18n setzen wir seit Anfang des Jahres das Framework AngularJS ein. In diesem Artikel möchten wir ein wenig von unserer Erfahrung berichten.

AngularJS ist ein modernes Javascript Framework welches seit 2009 als Open-Source Projekt von Google unter der MIT-Lizenz freigegeben wurde.

Die folgenden Features werden von AngularJS geliefert, auf die ich nachfolgend eingehen werde: Dependency Injection, Modularisierung (Controller, Service, Factory, Templates), Directiven, Jasmin Test Support.

Vorher war es ein großes Problem, den Quellcode im Frontend sauber getrennt zu pflegen. Oft wurde Controller-Code, Datenhaltung und DOM-Manipulationen in einer Komponente vermischt, was dazu führte, dass dieser Code schwer zu warten und zu testen wird.

Eine große Hilfe die AngularJS bietet um die Wartbarkeit von großen Projekten zu unterstützen ist der Einsatz von Dependency Injection. AngularJS bietet damit ein Alleinstellungsmerkmal gegenüber anderen Frameworks.

In der Praxis erweist sich Dependency Injection als eine der größten Stärken von Angular und kann als Basis aller weiteren Features von AngularJS gesehen werden.

Darauf aufbauend ist eine weitere Hilfe die Modularisierung die uns AngularJS bietet. Die Top-Level Komponente in AngularJS ist ein Modul, welche eine abgeschlossene Komponente ist.

Wenn eine Anwendung komplexer wird oder bestimmte Komponente wiederverwendet werden, können einzelne Komponente in eigene Module ausgelagert werden. Es können anschließend Abhängigkeiten zwischen Modulen hergestellt werden.

Innerhalb eines Moduls findet die Strukturierung in Controller, Provider, Factory, Service, Constant Value und Directive statt, welche jeweils eigene Eigenschaften zur Unstützung der Modularisierung bereitsstellen.

Ein Controller bestimmt welche Werte innerhalb eines Bereichs auf einer Seite angezeigt werden, in welchen er die Scope-Variablen verwaltet. Über Provider, Factory und Service können Komponenten erstellt werden, welche in Controller injiziert werden können. Über Constanten und Values können zudem einzelne Werte im Injektor bereitgestellt werden.

Im Frontend erweist sich das Konzept Two-Way Data Binding als eine sehr große Hilfe. Wir brauchen nicht nur keinerlei DOM-Manipulationen mehr durchführen sondern können unseren Code komplett von der View trennen.

Was in anderen Framework eine dedizierte Model-Klasse wäre, ist in AngularJS lediglich die Variable $scope, auf die aus dem HTML-Template heraus zugegriffen werden kann.

Es wird an den gewünschten Stellen im Template nur noch deklariert welche Werte eingesetzt werden sollen, den Rest übernimmt Angular.

Das bringt uns zum nächsten mächtigen Werkzeug: den Direktiven. Eine Direktive ist ein Markup-Element in Form eines Elements, Attributes, CSS-Klasse oder Kommentars. Angular bietet selbst eine große Bibliothek an Direktiven um das Verhalten auf einer Seite zu steuern.

Wir setzen Direktiven ein um unterschiedliche Probleme zu lösen. Von schmalen onclick-Aktionen bis hin zum Entwurf von großen und komplexen UI-Widgets die modularisert entworfen werden und an unseren Ansprüchen ausgerichtet werden.

Um den Anwendungs-Code testbar und somit besser wartbar zu halten wurde bei AngularJS bereits auf Framework-Ebene Design-Entscheidungen gefällt die dieses Ziel unterstützen. Da bereits Dependency Injection verwendet wird ist es einfach in Unit-Tests Mocks und Stubs in eine Komponente zu injizieren. Dadurch kann sicher gestellt werden, dass nur eine Komponente und keine Abhängigkeiten in Unittests getestet werden. Zusätzliche Unterstützung erhalten wir durch eine Bibliothek an Jasmin-Helpern und Angular-Mocks die ebenfalls Bestandteil von AngularJS sind.

Um unsere Functional-Tests zu verbessern evaluieren wir zur Zeit den Einsatz von Karma (ehemals Testacular‎) als Test-Runner um Scenario und E2E (end-to-end) Tests durchführen zu können.

Natürlich gab es wie mit jeder neuen Technologie einige Verständnisfragen zu klären und Anfangshürden zu bewältigen. Da AngularJS seine eigenen Konzepte selbst weiterläufig anwendet und die Konzepte problemlos miteinander zu kombinieren sind ist der Einstieg nicht sonderlich schwer.

AngularJS ist sicher nicht das finale Framework in der Javascript-Welt um die Frontendentwicklung zu unterstützen. Aber es ist ein gutes und solides Framework bei dem sichtbar ist, dass aus vielen Konzepten aus den letzen Jahre gelernt wurde und viel Raum für Innovation vorhanden ist.

Das Team i18n bei Immobilienscout24 erstellt die Plattform für Österreich unter Einsatz moderner Web-Technologien. Die Plattform ist unter www.immobilienscout24.at zu finden.

Hinweis: Alle Bilder die in diesem Artikel verwendet wurden kommen direkt aus dem AngularJS-Repository und sind unter der MIT-Lizenz verfügbar. Die MIT-Lizenz kann im Volltext unter folgender URL eingesehen werden: https://raw.github.com/angular/angular.js/master/LICENSE

--

--

Scout24
Scout24 Engineering

With our digital marketplace @ImmobilienScout, we inspire people's best decisions in housing. We make hard decisions easy. https://www.scout24.com