Veranstaltungen

Spring Boot (Michael Simons)

Do, 25. Januar 2018

Kalender als XML und iCal

Wir unterstützen...

Elterninitiative Kinderkrebsklinik e.V

Kinderkrebsklinik e.V

Sponsoren

Wir danken unseren Sponsoren:

Permanente Sponsoren

Uni Düsseldorf
(Raum und Beamer)


(Preise)


(Preise)


(Preise)


(Preise)

Mitgliedschaften



java.net Member

Events

Nachlese: AngularJS | Print |
Written by Philip Höfges   
Friday, 19 December 2014 11:05

>> Slides

>> Video

Bald ist Weihnachten und das darf auch bei der Rheinjug nicht fehlen. Bei diesem letzten Vortrag des Jahres 2014 werden neben den üblichen Subs auch weihnachtliche Plätzchen gereicht. Schon im Vorfeld wird klar, dass die weihnachtliche Stimmung auch auf den Vortrag übergehen wird. Wieder finden sich etwa 90 Zuschauer im Hörsaal ein. Dieses mal wird ein Vortrag von zwei Rednern gehalten. Philipp Tarasiewicz und Robin Böhm sind Softwareentwickler und Coaches, die mit ihrer eigenen Firma sich vor allem mit dem heutigen Thema beschäftigen: AngularJS.

Zunächst erzählen die beiden Redner ein wenig über sich und werben nebenbei für ein Buch zum Thema, welches sie selbst mit verfasst haben. Der erste Teil des Vortrags wird von Philipp Tarasiewicz gehalten. Er stellt mit einer Einleitung AngularJS dar. Natürlich beginnt er mit der Nennung der Haupteigenschaften des Frameworks für JavaScript: Mit dem Two-Way Data Binding schafft es AngularJS, die Web-Applikation ständig zu aktualisieren, sofern es nötig ist, also tatsächlich nur dann, wenn wichtige Änderungen durchgeführt worden sind. Um dies zu veranschaulichen, zeigt Philipp ein kleines Beispiel. Daran kann sehr schön abgelesen werden, dass sich Two-Way Binding lohnt. Damit ist AngularJS sowohl MVVM (kurz für Modelview View Model), als auch MVW (kurz für Modelview Whatever). Es kann also in vielerlei Hinsicht dargestellt werden und ist somit sehr flexibel. Weiterhin stellt der Redner fest, dass die Lesbarkeit sehr hoch ist. Dies will er in einer Live-Coding-Session am Ende seines Abschnitts zeigen. Ein weitere wichtiger Punkt sind die Direktiven. Man hat damit die Möglichkeit, DOM-Manipulation tatsächlich nur in diesen Direktiven auszuführen und läuft nicht Gefahr, dass solche Manipulationen von anderer Stelle das Programm beeinflussen. Zudem kann man mit AngularJS mehr aus seinem HTML Tags und Attributen machen, wie Philipp am Ende zeigen will. Zuletzt ist noch Dependency Injection ein wichtiges Thema. Es ist schwierig, die Abhängigkeiten gut darzustellen, obwohl sie wichtig für das Konzept von AngularJS sind. Alles muss in einem Modul deklariert werden, was natürlich Abhängigkeiten hervorruft.

Am Ende zeigt Philip noch ein ausführliches Beispiel in einer Live-Coding-Session. Er zeigt, wie man einen ColorPicker in sehr kurzer Zeit, sehr effizient entwickeln kann. Zunächst wird eine direkte Verbindung von einem Textfeld zu einer Überschrift hergestellt. Und das Ganze live. Es muss nichts kompiliert werden, der Text erscheint sofort in der Überschrift. Schöne Sache. Mit diesem einfachen Trick können auch Schieberegler direkten Einfluss auf die App nehmen. Was am Ende dabei heraus kommt ist ein Feld, welches live die Farbe ändern kann. Und das mit diesem einen, einfachen Trick. Schöne Sache. Zuletzt zeigt Philipp noch, wie man aus diesem Code eine Direktive erzeugt und damit mehrere ColorPicker gleichzeitig anzeigen lassen kann, ohne den Code duplizieren zu müssen. Auch hier: Schöne Sache.

Danach darf auch Robin Böhm endlich zu Wort kommen. In seinem Abschnitt des Vortrags geht es um TDD (Test Driven Development). TDD stellt eines der wesentlichen Features von AngularJS dar. Hier kann man sich nach Herzenslust austoben. Es gibt ein Framework für E2E (End-To-End) Testing, Unit Testing mit Hilfe von Jasmine und Test Runner wie Karma. Nun behauptet Robin, dass jede Komponente unit-testbar sei und beweist dies, in dem er auf seinen Folien einige Beispiele zeigt. Da inzwischen das manuelle Kontrollieren des Codes mehr als veraltet ist, wird TDD immer wichtiger in der Softwareentwicklung. Außerdem können Tests als Gedächtnisstütze eingesetzt werden. Wenn man montags morgens ins Büro kommt, kann man anhand der Tests sehr schnell nachvollziehen, was man eigentlich in der letzten Woche so alles getrieben hat. Als nächstes erklärt Robin das Tool Jasmine. Die Methoden und Funktionen, die Jasmine bietet, liefern eine hervorragende Basis für Tests. Es werden Ausgaben mit erwarteten Ergebnissen verglichen. Vergleiche sind hierbei unter Anderem Gleichheit und Identität. Somit kann ein Testvorgang mit Jasmine leicht nachvollzogen werden. Im nächsten Schritt zeigt der Redner, wie man HTML-Templates leicht mit Direktiven ausstatten kann und damit auch Fehler in Browsern finden kann, die nicht von einem selbst stammen.

Abschließend zeigt Robin ebenfalls Live-Coding. Er erzeugt einen Würfel, der in alle drei Dimensionen drehbar ist. Schöne Sache. Jedes Element des Würfels, also Kanten und Flächen, sind nichts weiter als div-Elemente. Da jedes Element auch für sich selbst steht, kann man sie einzeln testen. Vom Grundaufbau her sieht der Code dem vom vorherigen Beispiel mit dem ColorPicker sehr ähnlich. Was natürlich mehr interessiert in diesem Kapitel sind die Tests. Diese sind schlicht einfache Vergleich nach Gleichheit etc. bei Jasmine. Damit zeigt Robin, dass man testgetriebene Entwicklung mit AngularJS sehr gut umsetzen kann.

Zum Schluss verlosen die beiden noch einige Exemplare ihres Buches, indem sie dem Publikum fragen zu ihrem Vortrag stellen. Eine gute Methode, die Aufmerksamkeit zu überprüfen. Bleibt am Ende nur zu sagen: Frohes Fest und einen guten Rutsch!