Interview mit Norbert Schmidt

AngularJS: Über Konzepte und die Zukunft von Web-Apps
Kommentare

AngularJS ist meist das erste JavaScript-Framework an das man denkt, wenn man vor der Aufgabe steht, eine moderne Web-Anwendung zu entwickeln. Und das ist auch kein Wunder, bildet es schließlich mit seiner Architektur genau das ab, was man gemeinhin von einem Zukunftsfähigen Framework erwartet – Dependency Injection direkt von Haus aus, integrierte Unit-Testing-Funktionalitäten und eine hervorragende Auslegung auf Mobile.

Auch wenn das Team hinter dem Framework mittlerweile mit den  Arbeiten an Angular 2.0 begonnen hat, lohnt sich ein Blick auf den aktuellen Stand. Wie funktionieren die Konzepte von AngularJS, wo liegen die Stärken des Frameworks und warum setzt Google eigentlich nicht auf Web Components?

Das alles und noch einiges mehr haben wir Norbert Schmidt gefragt, der uns ausführlich Rede und Antwort stand.

AngularJS ist nicht einfach gestrickt

PHP Magazin: Norbert, du beschäftigst dich sehr intensiv mit AngularJS – warum ist Googles Framework deiner Meinung nach so erfolgreich?

Norbert Schmidt: Für mich sind es mehrere Konzepte, Features und Umstände, die AngularJS attraktiv machen.

Als erstes: AngularJS ist ein komplettes Framework für die Entwicklung und Strukturierung von modernen Web-Apps und nicht bloß eine weitere Bibliothek oder Komponenten-Sammlung. Der echte Framework-Charakter von AngularJS zeigt sich auf konzeptioneller Ebene bei der konsequenten Umsetzung von Dependency Injection. Im Vergleich mit anderen JavaScript-Frameworks ist das durchaus ein Alleinstellungsmerkmal.

Auch in Sachen Templating und Data-Binding gibt es bei AngularJS eine Besonderheit. Hier haben sich die Macher für einen deklarativen Ansatz auf Basis von „ordinärem“ HTML entschieden und das Konzept der Direktiven entwickelt. Das ist vom Ansatz her ebenfalls ein Unikum in der Welt der JavaScript-Frameworks.

Hinzu kommt, dass die Testbarkeit meines Codes im Rahmen von AngularJS quasi ein Core-Feature ist. Dependency Injection, modulare Struktur, Trennung zwischen Applikationslogik und DOM-Manipulationen mit Hilfe von Direktiven ermöglichen es, fast den gesamten JavaScript-Code Unit-Tests zu unterziehen.

Man darf auch nicht vergessen, dass die weitverbreiteten Single-Page-Apps mit etlichen Formularen und Listen und entsprechenden CRUD-Aktionen, mit AngularJS und seinem eingebautem Data-Binding unglaublich einfach und effektiv zu entwickeln sind.

Und zu guter Letzt: dass AngularJS aus dem Hause Google kommt, hat der Anziehungskraft dieses Frameworks sicherlich nicht geschadet. Natürlich ist es für ein ambitioniertes Open-Source-Projekt wie AngularJS eine komfortable Angelegenheit, dass ein Team von Google-Developern die beständige Weiterentwicklung von AngularJS auf hohem Niveau absichern kann.

PHP Magazin: AngularJS vereint viele Konzepte in sich und das des MVVM-Patterns ist nur bedingt mit anderen Frameworks vergleichbar. Ist das ein Hindernis, wenn man beginnt, sich mit Angular zu beschäftigen?

Norbert: Ich weiß, dass man AngularJS die fast schon sprichwörtliche „hohe Lernkurve“ nachsagt. Natürlich ist da was dran, denn AngularJS ist tatsächlich nicht einfach gestrickt.

Was nun die Art betrifft wie AngularJS das MVC- oder MVVM-Pattern interpretiert, so stellt sie meiner Ansicht nach aber kein echtes Hindernis beim Erlernen von Angular dar. Model-View-„Whatever“-Patterns sind in JavaScript schließlich keine Neuheit mehr, und wenn man sich damit beschäftigt hat, dann ist der Angular-Way auch nachvollziehbar. Ich selbst habe zuvor vor allem mit Ext JS und dessen MVC-Variante meine Erfahrungen gesammelt. Man merkt da sehr schnell, dass im Frontend noch andere Anforderungen an MVC gestellt werden, als bloß „Seperation of Concerns“ zu ermöglichen. Zum Beispiel das schnelle Synchronisieren zwischen Models und hoch dynamischen Views, also das Binding zwischen der Datenschicht einer App und der Präsentation im DOM, zwingt einen dazu, sehr pragmatisch über MVC nachzudenken.

Und MVVM in AngularJS ist eben stark pragmatisch ausgerichtet: dass, was einem ViewModel am nächsten kommt, ist das sogenannte $scope-Objekt in AngularJS. Das ist ein Bindeglied zwischen Controller und View, auf das sowohl Controller als auch Direktiven zugreifen können. Der Controller selbst ist nicht mehr als eine Konstruktor-Funktion die – eben durch den $scope – sehr nah am View angesiedelt ist. Und Models, als vom Framework bereitgestellte Funktionen (wie z. B. in Ext JS, aber auch in BackboneJS) gibt es in AngularJS gar nicht. Hier können stattdessen eigene Implementierungen eines Models zum Einsatz kommen, andere Libraries eingesetzt werden, oder doch nur POJOs genutzt werden.

Auf den Punkt gebracht: ich halte es für praxisnah – darum für sinnvoll und nachvollziehbar – wie AngularJS MVC, MVVM etc. umgesetzt hat.

Norbert SchmidtNorbert Schmidt ist JavaScript- und PHP- Entwickler und arbeitet bei der Mayflower GmbH in Würzburg und München. Seit mehr als zehn Jahren ist er in Sachen Webentwicklung unterwegs und hat sich dabei auf Frontend- und JavaScript-Themen spezialisiert: JS Fundamentals, AngularJS, Automatisierungen mit Grunt, Yeoman-Workflows und Web Components.

Norbert Schmidt auf der WebTech Conference

„Almost Native“ – Mit dem Ionic Framework hybride Apps für Mobile bauen
HTML maßgeschneidert – Direktiven in AngularJS und Web Components mit Polymer

Die Direktiven-API ist alles andere als selbsterklärend

PHP Magazin: Im Gesamtkontext mit anderen Frameworks betrachtet – welchen Stellenwert misst du den Direktiven bei?

Norbert: Ich habe es schon eingangs gesagt: das Konzept der Direktiven in AngularJS ist eine echte Besonderheit. „HTML enhanced for web apps!“ lautet das Credo von AngularJS und mit den Direktiven kann das auch umgesetzt werden.

Direktiven sind technisch gesehen Marker im DOM, die den HTML-Compiler von AngularJS anweisen, ein bestimmtes Behavior mit einem DOM-Element, -Attribut, einer CSS-Klasse oder auch einem HTML-Kommentar zu verknüpfen. Wenn wir von Custom-Direktiven sprechen – AngularJS hat auch built-in-Direktiven – dann reden wir im komplexesten Fall von eigenen HTML-Elementen, die, zum Beispiel als Widgets eingesetzt, Dinge tun können, zu denen HTML sonst nicht in der Lage ist.

AngularJS bietet von Hause aus ein Set von Direktiven, die in den Templates – im Fall von AngularJS einfache HTML-Dokumente – direkt verwendet werden können. Zum Beispiels ng-model für das Data-Binding oder ng-controller für die Verknüpfung eines DOM-Fragments mit einer Controller-Funktion. Neben diesen built-in-Direktiven stellt AngularJS auch eine API zur Verfügung, um eigene Direktiven für alle möglichen Anwendungsfälle zu schreiben: von einfachen Input-Validatoren und -Filtern über die Kapselung von Animationen bis hin zu komplexen, wiederverwendbaren UI-Komponenten. Auch die selbst gebauten Direktiven werden im DOM einfach als <my-element> oder <input my-validator=“email“> deklariert.

Hier muss ich allerdings zugeben, dass diese Direktiven-API von AngularJS alles andere als selbsterklärend ist und es einige Zeit dauern kann, bis man alle Möglichkeiten erkannt und zum Beispiel eine eigene, nicht triviale, Direktive entwickelt hat. Aber es lohnt sich, denn eigentlich wollte ich als Frontend-Developer doch immer schon eigene, maßgeschneiderte HTML-Elemente für meine dynamischen Webseiten und Web-Apps haben.

PHP Magazin: Inwiefern ist dieses Konzept mit Web Components vergleichbar?

Norbert: Der neue W3C-Standard „Web Components“ und AngularJS-Direktiven erfüllen prinzipiell den gleichen Zweck.

Web Components bieten nativ die Möglichkeit, HTML zu erweitern, d. h. Custom Elements zu entwickeln und diese dynamisch zu gestalten. Ermöglicht wird das mit dem neuen HTML-Template-Element und einem Zugriff auf den Shadow DOM per JavaScript.

Mit den Direktiven von AngularJS ist das, wie bereits gesagt, auch möglich. Aber eben nicht auf der Basis eines Webstandards, sondern nur mit Hilfe von JavaScript.

PHP Magazin: Wieso nutzt Angular dann etwas Eigenes?

Norbert: Tatsächlich sind Web Components eine fantastische Sache. Und in der Roadmap für AngularJS 2.0 ist auch die Rede davon, für das Templating und die Direktiven zukünftig Webstandards zu integrieren – also letztendlich Web Components für AngularJS nutzbar zu machen.

Nun stecken Web Components aber noch in den Kinderschuhen, was sich natürlich im noch schwachen Browser-Support zeigt. Das erste W3C Working Draft zu Web Components stammt erst aus dem Jahr 2012. Die Direktiven in AngularJS zum jetzigen Zeitpunkt zugunsten der Web Components über Bord zu werfen, würde darum keinen Sinn machen, klar.

Aber, es existieren bereits sogenannte Polyfills. Hierbei handelt es sich um JavaScript-Bibliotheken, die in etlichen Browsern dafür sorgen sollen, dass Web Components eingesetzt werden können. Bekannt sind hier vor allem X-Tag und Bricks von Mozilla und Polymer von Google.

Wenn man mit AngularJS also bereits heute Web Components nutzen will, dann wird das auf der Grundlage eines Polyfills geschehen müssen, zum Beispiel mit Googles Polymer. Das geht meiner eigenen Erfahrung nach auch ohne Schwierigkeiten, denn die mit Polymer gebauten Custom Elements sind im Endeffekt ganz normale DOM-Elemente mit denen AngularJS natürlich umgehen kann.

Aber auch Polymer ist noch nicht ausgereift und darum sind im Rahmen einer AngularJS-Applikation zunächst weiterhin die Direktiven eine gute Wahl.

AngularJS taugt nicht nur für Web-Apps auf dem Desktop

PHP Magazin: Wie sieht es mit dem Bereich Mobile aus – welche Stärken hat AngularJS dort zu bieten?

Norbert: Alle Stärken die AngularJS ganz allgemein besitzt, sind auch bei der Entwicklung auf mobilen Plattformen mit diesem Framework wirksam. AngularJS war und ist kein Framework, dass von seiner Architektur her nur zum Bauen von Web-Apps für Desktop-Browser taugt. Dass AngularJS als Ganzes ein modernes JavaScript-Application-Framework darstellt ist natürlich auch für Mobile gut. Dependency Injection erleichtert die Integration von mobilespezifischen Third-Party-Libraries enorm, z. B. für Animationen und Gestures. Das Konzept der Direktiven ist von großem Vorteil für das Entwickeln dynamischer und wiederverwendbarer UI-Komponenten, wie Listen, Tab-Navigationen, Action Sheets und Slide-Boxes. Und zusätzlich stellt AngularJS selbst das Modul ngTouch zur Verfügung, mit dem Touch-Events abgehandelt werden können.

PHP Magazin: Auf der WebTech Conference hältst du eine Session zum Ionic-Framework. Wie genau ist das einzuordnen? Womit ist das Framework am ehesten vergleichbar?

Norbert: Ionic ist übrigens ein gutes Beispiel für die Stärken von AngularJS im Bereich Mobile. Das relativ neue Ionic-Framework bietet fertige Frontend-Komponenten für die Entwicklung von mobilen Hybrid-Apps, also von Cross-Plattform-Apps, auf der Basis von HTML5, CSS3, SASS und AngularJS. Grundsätzlich ist Ionic vergleichbar mit jQuery Mobile, Sencha Touch oder Trigger.io.

In Sachen JavaScript stützt sich Ionic also auf AngularJS, was konkret bedeutet, dass es sich bei den UI-Komponenten von Ionic um Direktiven handelt. Nebenbei bemerkt, Ionic hat mir noch mal klar vor Augen geführt, wofür AngularJS auch noch da ist, nämlich um damit eigene Bibliotheken und Frameworks zu bauen.

Ionic liefert, zusätzlich zu den Frontend-Komponenten, ein Kommandozeilen-Tool, das für Scaffolding und – wenn man möchte – für die Integration von Cordova/PhoneGap genutzt werden kann. Cordova/PhoneGap für das Packaging von Ionic-Apps zu verwenden ist aber keine Notwendigkeit. Die Entwickler von Ionic machen aber keinen Hehl aus ihrer Präferenz für diese Technologie.

WebTech Conference 2014

WebTech Conference 2014

PHP- und Web-Interessierte aufgepasst! Vom 26. bis 29. Oktober findet die WebTech Conference 2014 in München statt. Über 90 Sessions, Workshops und Keynotes beschäftigen sich mit den Themen Responsive Design, HTML5, CSS, agile Methoden … und natürlich Mobile Web und JavaScript. Wer sich bis zum 25. September anmeldet kann sich attraktive Frühbucherpreise sichern!

Bei Anmeldung für 3 Konferenztage bekommt man zusätzlich das Intellibook-Tablet mit Android-OS, 7,85 Zoll-HD-Touch-Display und Dual-Core Rockchip-Prozessor als Geschenk oben drauf.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -