Interview mit Robin Böhm

AngularJS – "erstes JavaScript-Framework für richtiges Frontend-Engineering"
Kommentare

AngularJS ist das Framework über das man spricht, wenn es darum geht, moderne clientseitige Web-Anwendungen zu erstellen. Auch wenn es darum geht, JavaScript in einem Atemzug mit Enterprise-Applikationen zu nennen, fällt der Begriff regelmäßig. Das mag zum einen an der Architektur des Frameworks liegen. Denn sie bildet für viele genau die Ansprüche ab, um Applikationen zu entwickeln, die Enterprise-Ansprüchen gerecht werden sollen. Zum anderen kann es natürlich auch nicht schaden, in Google einen mächtigen Partner an seiner Seite zu wissen.

Mit AngularJS finden erstmalig bewährte Konzepte wie Dependency Injection und testgetriebene Entwicklung nun auch Einzug in die JavaScript-Welt und machen diese attraktiv für den Enterprise-Einsatz. Dabei besticht AngularJS mit einer nachvollziehbaren Implementierung und achtet im hohen Maße auf das Bilden und Einhalten von Schnittstellen. Inzwischen hat das Team mit den Arbeiten an Angular 2.0 begonnen, um das Framework in die Zukunft zu führen. 

Auf der MobileTech Conference, die vom 1. bis 3 September 2014 in Berlin stattfindet, führen Robin Böhm und Sascha Brink, Gründer und Geschäftsführer der Symetics GmbH, mit dem Workshop „Testgetriebene Entwicklung mit AngularJS“ Teilnehmer an die Entwicklung mit AngularJS heran und demonstrieren, dass saubere Anwendungsentwicklung mit JavaScript eben doch möglich ist.

Wir haben uns mit Robin Böhm über AngularJS, das Konzept der „scope hierarchy“, das Angular Templating System und den Fokus des MobileTech Con Workshops, Test-Driven Development, unterhalten.

Robin, was sind aus deiner Sicht die wichtigsten Aspekte, die für AngularJS als Framework sprechen?

Robin Böhm: Meiner Meinung nach ist es das erste Framework im Bereich JavaScript gewesen, was richtiges Engineering im Frontend erst möglich gemacht hat. Damit meine ich speziell die Möglichkeit Webanwendungen zu bauen und nicht nur Webseiten mit etwas Animationen.
Richtige Anwendungslogik mit beispielsweise purem jQuery zu verpacken ist sehr schwer, aber dafür ist das jQuery-Framework auch nicht gedacht. Es ist ein Framework, welches dafür erstellt wurde DOM-Manipulation auf verschiedenen Browsern für den Frontend-Entwickler zu vereinfachen.
Klar, das AngularJS-Framework kocht auch nur mit Wasser bzw. JavaScript, aber die Konzepte die dort umgesetzt sind, geben eine klare Linie vor und führen zu wiederverwendbaren und kombinierbaren Lösungen.
Dazu kommt, dass jedes der Konzepte mit einem klaren Fokus auf die Testbarkeit ausgelegt und entwickelt wurde – unter anderem ist hier das Pattern der Inversion of Control (Depencency Injection) eine sehr sinnvolle Entscheidung.
Durch die Leichtigkeit, mit welcher es möglich ist, eigene Konzepte wie z.B. eigene HTML-Erweiterungen zu erstellen, ist überragend.
Dadurch das AngularJS bereits eine Vielzahl eigener Erweiterungen und sinnvoller Services mitbringt, können viele Anforderungen oft durch die reine Umsetzung der Fachlogik erfüllt werden und erfordern (fast) gar keinen eigenen JavaScript-Code.
Ich lasse meine Teilnehmer in der Schulung z.B. immer einen Color-Picker bauen – dies geht sehr schnell und mit minimalen Kenntnissen innerhalb von wenigen Minuten. Die Begeisterung explodiert dann meist durch die Frage: „Und wie viele Zeilen JavaScript habt ihr geschrieben, um diesen ColorPicker zu entwickeln?“. Die Antwort lautet „gar keine“.
Geschicktes Wiederverwenden und Kombinieren von Teillösungen ist der Weg zum Erfolg mit AngularJS.

Ein interessanter Aspekt von AngularJS ist das Konzept der „scope hierachy“. Kannst du uns dieses Konzept kurz erklären?

Robin Böhm: Scopes in AngularJS sind Teil des verwendeten Pattern, Model View ViewModel (MVVM). Dieses Konzept unterscheidet sich in einigen Punkten stark von dem eher klassischen Ansatz eines MVC-Frameworks.
Der View-Layer ist hierbei die Schicht, in der der User mit der Anwendung interagiert. Dieser Layer ist z.B. ein DOM-Baum, welcher aus einem Template instanziiert wurde.
Dieses Template kann dann z.B. einige Platzhalter enthalten (sogenannte Expressions), in die – je nach Kontext – die gewünschten Werte eingetragen werden. Diesen Kontext nennt man in AngularJS Scope.

Model View ViewModel

Jeder, der beispielsweise schon einmal Formular-Anwendungen entwickelt hat, kennt das Problem: Es ist wahnsinnig mühsam, die Daten, nachdem Sie vom User bearbeitet wurden, wieder abzufragen und an die korrekte Datenstruktur zu übergeben. Es ist keinesfalls ein unlösbares Problem, aber wahnsinnig monotone Arbeit und dadurch sehr fehleranfällig, da man z.B. jedes Feld wieder im JavaScript-Code per jQuery Selector auslesen und einem JavaScript-Objekt zuweisen muss.
AngularJS geht hierbei einen geschickten Weg und bindet diese Werte aus dem Scope dauerhaft an die Expressions in der View. So ist z.B. die Variable Name an ein Input-Feld gebunden und ändert sich sofort bei jeder Änderung.
Das gleiche Spiel funktioniert auch auch, wenn ich z.B. durch ein externes Event eine Änderung in meinem Scope vornehme. Dann ändert sich auch direkt der Wert in meinem Input-Feld. Dies nennt man Zwei-Wege-Datenbindung.
Eine Besonderheit ist hierbei jedoch: Wir müssen uns nicht manuell um diese Updates, z.B. duch ein Observer-Pattern, kümmern, sondern können plain JavaScript Objects auf unseren Scope legen und an unsere View binden.
Der Mechanismus, der uns dies ermöglicht, ist das Dirty Checking des Scopes. Ein Scope ist immer an ein bestimmten Teil der View gebunden, besser gesagt einem DOM-Element. Wir können also das gleiche Template zwei mal nebeneinander mit verschiedenen Scopes instanziieren und bekommen verschiedene Ergebnisse.
Diese Verschachtelung von Scopes über DOM-Elemente erzeugt eine Scope-Hierarchie, die sich ähnlich wie die JavaScript-Funktion „Scope Hierarchie“ verhält.

javascript-scope-hierarchy javascript-scope-hierarchy

Nutzt Angular das jQuery Library? Und wenn ja, wie?

Robin Böhm: jQuery ist mit die wichtigste JavaScript-Library überhaupt. Diese ermöglicht uns eine Abstraktion über verschiedenen Browser-APIs und einen einfachen Zugriff auf DOM-Strukturen. Dies ist in AngularJS auch notwendig und somit eine Basis des Frameworks. Allerdings gibt es hierbei eine kleine Besonderheit: Um die direkte Abhängigkeit auf jQuery aufzulösen, hat AngularJS einen kleinen Teil der für das Framework benötigten Funktion aus jQuery extrahiert. Diese Extraktion nennt sich jqLite und ist ein API-kompatibles Subset von jQuery.
Natürlich gibt es die Möglichkeit auch das komplette jQuery Paket zu nutzen. Hierzu müssen wir die jQuery Library einfach ebenfalls in unser Projekt einbinden. Angular erkennt dies und nutzt dann korrekte jQuery-Library.

Wer jetzt Lust und Interesse bekommen hat, denn interessiert sicher, wie schnell man als Newbie deiner Erfahrung nach mit Angular durchstarten kann? Wie steil ist die Lernkurve?

Robin Böhm: Die ersten Schritte mit AngularJS sind schnell getan. Es ist leicht zu erkennen, dass es AngularJS auch Newbies sehr leicht macht, Anwendungen mit dem Framework zu erstellen.
Durch die Abstraktion von DOM-Manipulationen liegt der Fokus der Entwicklung sehr stark auf den fachlichen Anforderungen. Somit müssen lediglich die Grundkonzepte von Scopes und Dependency Injection verstanden sein, um mit Hilfe der API-Dokumentation bereits viel zu erreichen.
Geht es an die Erstellung eigener Direktiven, so benötigt man noch etwas mehr Wissen über den genauen Lifecycle der HTML-Erweiterungen und über die Manipulation von DOM-Elementen.
Hat man jedoch vorher bereits gute Erfahrung in der Web-Welt gesammelt, hilft oft bereits ein gutes Tutorial oder auch Buch, um den Einstieg in die Konzepte zu erleichtern.
Ein guter Weg, um das Framework besser zu verstehen, ist: Tests schreiben. Da im Test-Modus viele Sachen manuell angestoßen und gebaut werden müssen, welche das Framework sonst automatisch macht, versteht man zahlreiche Abläufe viel besser.

In Eurem Workshop legen Sascha und du einen besonderen Fokus auf die Möglichkeiten zum Test-Driven Development (TDD) in/mit Angular JS. Gib uns einen Vorgeschmack – wo liegen in diesem Bereich die Stärken von AngularJS?

Robin Böhm: Einer der wichtigsten Punkte von AngularJS ist definitiv die gute Testbarkeit. Wir legen bei unseren Projekten und Produkten immer einen hohen Wert auf Qualität, welche wir unter anderem durch eine gute Testabdeckung gewährleisten.
Dank des Konzepts der Dependency Injection ist das Testen von Komponenten sehr einfach, und es sogar wirklich Spaß, Tests zu schreiben. Das Modul Angular-Mocks liefert sogar bereits einige Mock-Objekte, z.B. für den HTTP-Layer, mit. Das Testen wird dem Entwickler so einfach gemacht, dass es wirklich problemlos in den Entwicklungsprozess eingebunden werden kann.
Der Ansatz der testgetriebenen Entwicklung ist dann noch einmal eine Erweiterung, da es meistens einfacher ist, sich vorher zu überlegen, was man mit einem Programmteil erreichen möchte und sich die Tests dazu zu definieren, als dies nachher zu tun. Gut testbaren Quellcode zu schreiben ist nämlich auch nicht immer einfache Aufgabe und benötigt oft viel Erfahrung. Unsere langjährige Erfahrung mit TDD versuchen wir den Teilnehmern für ein guten Start innerhalb des Workshops mit auf den Weg zu geben.

Zur Person
Robin BöhmRobin Böhm ist leidenschaftlicher Softwareentwickler, Berater und Autor im Bereich der Web-Technologien und speziell Enterprise JavaScript. Er beschäftigt sich seit einigen Jahren intensiv mit der Erstellung clientseitiger Web-Applikationen und unterstützt Unternehmen sowohl bei der Aus- und Fortbildung von Mitarbeitern als auch bei der Umsetzung von Projekten. Weiterhin ist er Mitgründer und Geschäftsführer der Symetics GmbH und betreibt gemeinsam mit Sascha Brink und Philipp Tarasiewicz das Portal AngularJS.de. Zusammen mit Philipp Tarasiewicz hat er das Buch „AngularJS – Eine praktische Einführung in das JavaScript-Framework“ (dpunkt.verlag) geschrieben.

 

MobileTech Conference 2014

MobileTech Conference 2014

Mobile-Interessierte aufgepasst! Jede Menge spannende Sessions rund um Android, iOS und das Mobile-Web gibt es auf der MobileTech Conference, die vom 1. bis 4. September in Berlin stattfindet und mit mehr als 60 renommierten Mobile-Experten aufwartet. Als Teilnehmer kann man zusätzlich auch die Sessions der gleichzeitig stattfindenden Internet of Things Conference kostenlos besuchen. Wer sich bis für 3 Konferenztage zusätzlich das Intellibook-Tablet mit Android-OS, 7,85 Zoll-HD-Touch-Display und Dual-Core Rockchip-Prozessor als Geschenk oben drauf. Im Rahmen des Kollegenrabatts (3+ Kollegen) spart man ferner 10 Prozent extra. Alle Infos auf der MobileTech Conference Homepage

 

Aufmacherbild: AngularJS logo CC BY-SA 3.0

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -