AngularJS – HTML enhanced for web apps

AngularJS
Das Frontend Engineering und die dabei verwendeten Technologien verändern sich immer wieder. Ebenfalls verändern sie den Stil des Codes, was durchaus meist positiv ist. Wenn man wie ich, aus einem stark geprägten Java und C# Umfeld stammt, eignet man sich gewisse Programmierweisen an, sei das „MVC“ (Model-View-Controller) oder „MVVM“ (Model-View-ViewModel). Das Ziel ist dasselbe, wir wollen den UI-Code von der Logik trennen. Diese Paradigmen wurden jedoch lange Zeit im JavaScript vermisst. Es gab gewisse Ansätze, wie der logisch relevante Code von den eher langweiligen DOM-Manipulationen getrennt werden konnte, nur leider entstand nie ein richtiges Framework. Hier kommt AngularJS ins Spiel! 2009 wurde von Google die erste Version von AngularJS ins Netz geschossen und ist seit Anbeginn in stetiger Weiterentwicklung.

Nur, was ist AngularJS? Laut Wikipedia ist es:

Ein Open-Source-Framework von Google, welches die Erstellung von browserbasierten Single-page-Anwendungen mit einem MVC-Modell unterstützt, um die Softwareentwicklung und das Komponententesten entsprechender Anwendungen zu vereinfachen.

Klingt nach Spass.

Sinn und Zweck

AngularJS bietet uns als Programmierer genau die Möglichkeiten, welche uns beispielsweise der MVVM Ansatz von Microsoft liefern. Wir können das UI deklarativ und einmalig beschreiben und kümmern uns nicht mehr um die Anpassungen. Wer von XAML einmal was gehört hat, der weiss wovon ich spreche. Als Programmierer möchte ich mich mit den interessanten Problemen auseinandersetzen, nicht ob auf dem 15ten <div> nun die CSS-Klasse „xy“ gesetzt ist, oder nicht. Und hier greift uns Angular unter die Arme. Wir definieren das UI mit bestimmten Tags und sämtliche DOM-Manipulationen gehören der Geschichte an. Dazu gehören auch das Einfügen von neuen Elementen in eine Liste, das Verschieben oder das Löschen derselben.

Ich habe, als ich mich intensiv mit dem Framework beschäftigte, einmal den folgenden Satz gelesen:

If you need to write some jQuery dom manipulations,
you did it wrong.

Heute muss ich diesem Schreiberling zustimmen. Wenn man sich auf AngularJS und die dazugehörigen Patterns einlässt, muss man keine Zeile jQuery mehr schreiben.

Code!

Jetzt habe ich alle erschlagen mit irgendwelchen Abkürzungen und wichtig klingenden Dingen. Zeit, mal ein, zwei Zeilen Code zu schreiben.

Wie jede neue Sprache, lernen wir das anhand eines „Hello World“ Beispiels.

Hier wird ersichtlich, wie Angular geschrieben wird. Die Ausdrücke in den Klammern „{{name}}“ werden an den Controller gebunden. Sobald sich im Controller der Wert der Variable „name“ verändert, wird diese Änderung sofort im UI angepasst. Somit wird MVC gemäss dem eigentlichen Grundgedanken „A model notifies its associated views and controllers when there has been a change in its state.“ unterstützt, welches bis anhin rar in Web-MVC-Frameworks wiederzufinden war. Im JavaScript „Backend“-Code kann nun mit dem sogenannten Scope auf die Variable zugegriffen werden:

console.log($scope.name);

Beziehungsweise:

$scope.name = „Max Muster“;

Dieses Binding funktioniert mit allen möglichen HTML-Tags.

Komplexere Beispiele machen an dieser Stelle keinen Sinn mehr, da der Platz fehlt, um ein wirklich interessantes Stück Code zu produzieren. Speziell zu erwähnen sind meiner Meinung nach die „Direktiven“, welche es ermöglichen (kompatibel bis IE8), eigene HTML Tags zu schreiben. Wir können beispielsweise ein Element <user/> schreiben, welches dann über unseren Code angesteuert werden kann. Ebenfalls können Templates mitgegeben werden und erhöhen somit die Wiederverwendbarkeit des Codes enorm. Kein lästiges Copy-Paste von coolen Controls. Wir definieren diese in einer Direktive und können sie immer wieder verwenden. Diese Elemente haben einen eigen Scope und werden so gekapselt. Es bleibt unserer Definition überlassen, ob wir diese Elemente als Tag, CSS-Klasse, Attribut oder Kommentar verwenden möchten.

Make it big!

Nun, die Frage stellt sich: Wie skalieren wir? Wie kann dieses doch tendenziell grosse Framework mit grossen Applikationen zurechtkommen? Auch darauf hat AngularJS eine Antwort:

  • Kapselung von „Businesslogik“ wie Zugriffe auf ein Backendsystem mittels Services. Dies ermöglicht ebenfalls die Wiederverwendbarkeit des Codes.
  • Ressourcen können (beim Client) gecached werden.
  • Nutzen von Direktiven für Controls.
  • Lazy Loading der Controller und anderen Elementen.
  • Routing und Lazy Loading der Templates.
  • Preloading der ersten Route (DOM-Template und allfällige Daten aus dem Backend)

Module

AngularJS selbst lebt die Modularisierung vor und ist in verschiedenste Module aufgeteilt. Dies ist nicht zuletzt deshalb so, dass nicht das ganze Framework geladen werden muss, wenn Teile davon gar nicht genutzt werden. Nachfolgend ist eine kurze Liste, welche Module es gibt und was sie bezwecken. (Den „angular“ Präfix lasse ich jeweils weg)

  • Animate: Animationen für Show/Hide und andere Events. Eigene Animationen können leicht geschrieben werden.
  • Cookies: Ermöglicht das Nutzen von Cookies.
  • Loader: Erlaubt, dass die JavaScript Dateien in jeglicher beliebigen Reihenfolge geladen werden können und macht das Linking der Module erst zum Schluss.
  • Mocks: Mocking für Angular, nützlich um das Backend zu simulieren und so die Testbarkeit zu erhöhen.
  • Resource: Kapselung von REST-Ressourcen. Ermöglicht intelligenten Zugriff auf Ressourcen eines Backends.
  • Route: Das Clientside-Routing von Angular. Kann erweitert werden und ermöglicht dynamische Single-Page-Applikationen. Lädt die Templates beim ersten Aufruf einer Route nach.
  • Sanitize: Ermöglicht das automatische „escaping“ von HTML Code. Sorgt dafür, dass kein potentiell schädlicher Code in die JavaScript Controller einfliessen kann.
  • Scenario: Testing Framework für AngularJS.
  • Touch: Touch-Events und andere verschiedene Helper für touchfähige Geräte.

Fazit

Meiner Meinung nach, eines der coolsten Frameworks, mit dem ich gearbeitet habe. Es erleichtert die Arbeit und nimmt einem den lästigen DOM Code ab. Zusätzlich lässt sich der Code schön strukturieren und wiederverwenden. Auch die Testbarkeit ist ein sehr cooles Feature, da heutzutage die Frontend-Applikationen aufkommen. Mit den Tests kann man die Qualität des Codes stark erhöhen und so gute Webapps programmieren. Ich könnte mir vorstellen, dass mit dem richtigen Preloading vom Backend auch richtig grosse Applikationen geschrieben werden können (Eine Liste mit den aktuell laufenden Applikationen findet man hier: http://builtwith.angularjs.org/).

Wenn man, wie ich, einen C# oder Java Background hat, kommt man mit AngularJS sehr schnell zurecht und kann seine Webapplikationen bauen. Natürlich ist es JavaScript und daher keine kompilierte Sprache, doch können wir trotzdem Paradigmen einsetzen, welche in vielen anderen Sprachen schon lange Einzug gehalten haben.

Bleibt zu hoffen, dass Dart nicht zum Scheitern verurteilt ist, dann hätten wir sogar ein typensicheres AngularJS 😉

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>