Warum Angular?


Verbreitet die Message!

Als Software-Entwickler hat man die schiere Fülle an Auswahlmöglichkeiten. Für mich ist die Welt wie ein großer Spielplatz: Was lerne ich als nächstes?
Ein Framework, dass sich momentan großer Beliebtheit erfreut ist Angular. Die Versionsnummern steigen mit hoher Geschwindigkeit (powered by Google) und die Community wächst.
Doch warum sollte man Angular verwenden?
Angular ist ein Webframework für die Frontend-Entwicklung und bietet als solches alle allgemeinen Vorteile von Frameworks:
Ein Webframework vereinfacht repetitive Aufgaben oder nimmt sie gänzlich ab. Das führt dazu, dass Funktionalität schnell und auf die immer gleiche Weise zur Verfügung steht, gekapselt ist und wiederverwendet werden kann.

Architektur

Angular verwendet eine Hierarchie von Komponenten als Architektur. Der Kern jeder Applikation ist damit ein Komponentenbaum. Komponenten verwalten dabei immer einen Teil der View und können andere Komponenten enthalten.
Die Komponenten selbst sind in MVC-Architektur gehalten. Diese Architektur weist den Hauptvorteil auf, dass die Verbindung von Logik und Sicht auf eine definierte (immer gleiche Weise) geschieht. In Angular Beispielsweise durch das Instanziieren der Komponente. Mit Vanilla jQuery entsteht schnell Chaos wenn Callbacks auf Animations-Events gleichermaßen wie auf User-Events reagieren müssen, während asynchrone Prozesse neue Daten aus dem Backend laden. Mit einem Framework wie Angular wird dieses Chaos durch die Trennung von View und Daten gemindert.
Angular ermöglicht es die Daten früh zu mocken und in enger Zusammenarbeit mit der Backend-Entwicklung Schnittstellen zu definieren. Steht die Datenbank (und Web-Api) dann einmal, kann schnell im Frontend nachgezogen werden.
Benutzt man kein Framework ist View und Logik oft undefiniert verknäult. Man hat dann oft das Gefühl, das es besser ist das ganze Projekt nochmal neu zu schreiben, weil man ja jetzt die Spezifikationen kennt.. bis zur nächsten nötigen Änderung dieser.

Dennoch ist Angular nicht nur auf Komponenten eingeschränkt, sondern bietet mit Services sehr einfach die Möglichkeit beliebige, von einer Sicht losgelöste Funktionalität einzubinden. Services sind hier einfache Typescript-Klassen, die bei Bedarf über das eigene Dependency-Injection System in die Komponenten geholt werden können. Ein gutes Beispiel für einen Service ist ein Data-Service, der die Anfrage an Web-Apis regelt und Daten an die Komponenten rausgibt.
Aber auch ein Session-Storage wäre ein Service. Natürlich kann die Funktionalität an sich auch in einer Komponente implementiert sein, doch Daten-Funktionalität wird wahrscheinlich Komponenten übergreifend verwendet – der Clue: Durch die extrem einfache Verwendung der Dependency Injection stellt Angular guten Code sicher(er): Der Entwickler schreibt einen Service und verlässt sich darauf, dass in der Komponente die richtige Instanz des Services zur Verfügung steht. Magic!

Funktionalität

Angular kommt mit sehr vielen Standart-Funktionen daher. Allem voran begeistert mich immer wieder, wie einfach Daten über die Logik in der View angezeigt werden.

Verbindung von View und Komponentenlogik

Durch automatisches „Binding“ von View zu Logik (zielt auf Events), von Logik zur View (zielt auf DOM-Properties) oder Two-Way-Binding (beide Methoden verbunden) schafft Angular eine sehr einfache und effiziente Weise, dynamische Daten auf einem HTML-Template anzuzeigen. Ein veränderliches Daten-Feld in einer Überschrift anzuzeigen, geht mit einem einzigen Ausdruck im Template.

<p>Ich bin ein {{adjektiv}} Text</p>

Verändert sich in der Klasse nun die Variable ‚adjektiv‘ sorgt Angular automatisch dafür, dass das DOM-Element aktualisiert wird.
Ebenso einfach ist es mit einem solchen Ausdruck die ganze UI und Event-Handling mit einem input abzuhandeln:

<input [(ngModel)]=“meinInput” />

In der Klasse genügt, es eine Variable namens ‚meinInput‘ anzulegen. Angular sorgt durch ein ausgeklügeltes Change-Detection-System dafür, das Event des User-Inputs (der User tippt ein) abzufangen, sowie auch die Daten im Input anzuzeigen, beispielsweise, wenn ‚meinInput‘ aus der Datenbank vorbelegt wurde.

http-Module

Angular kennt seine Domäne gut und sorgt dafür, dass http-Kommunikation (mit Web-Apis) möglichst einfach zur Verfügung steht. Alle Standart http-Aufrufe und diverse Parameter-Einstellungen sind mit dem mitgelieferten http-Module möglich, so dass mir kein Request einfallen würde, der nicht damit auslösbar ist.
Zusätzlich verwendet Angular die Bibliothek ‚rxJS‘ welches im Gegensatz zu promises mit Observables arbeitet. Ohne hier zu weit auszuschweifen, ist diese Vorgehensweise moderner und umfangreicher als Promises zu verwenden.

Technologie-Stack

Angular kommt mit einer eigenen CLI daher. Als professioneller Frontend-Entwickler ist dies eines der wichtigsten Tools meiner Arbeit. Mit dem CLI (Command Line Interface) hat das Angular-Team eine Anwendung gebaut, die es erlaubt mit einfachen Befehlen eine Applikation zu erzeugen, Komponenten oder Services hinzuzufügen, die Anwendung zu starten, zu testen und unter verschiedenen Umgebungen laufen zu lassen.
Das CLI ist ein mächtiges Tool für den Entwickler (und ich bin sehr dankbar darüber).
Angular baut auf dem NodeJS Stack auf, das heißt, bei der Entwicklung von Angular Applikationen, wird man gemeinhin lokal einen eigenen Webserver starten, der die Source-Dateien kompiliert und ausgibt. Natürlich alles versehen mit einem Live-Sync: Verändert man die Source-Dateien erkennt Angular-CLI das und aktualisiert den Build. Konkret bedeutet das: verändern, speichern, sehen – sehr sinnvoll in der Frontend-Welt.
Um Entwicklungs-, bzw. Projekt-Abhängigkeiten zu managen wird gemeinhin webpack benutzt, welches Node-Packages (npm) verwaltet. Das Herunterladen, Updaten und Installieren von neuen Packages ist also sehr leicht – das Installieren einer Anwendungen geschieht durch einen einzigen Befehl.
Zusätzlich bietet npm enorm viele Pakete, von einzelnen Komponenten mit vorgefertigter Funktionalität bis zu ganzen CSS-Frameworks (Bootstrap, Material). Angular selbst ist ebenfalls ein eigenes npm-Paket.
Zum Schreiben der Angular Applikation selbst wird auf der Logikseite Typescript benutzt – eine Sprache, die zu Javascript transpiliert wird und für die gilt: Jeder Javascript-Ausdruck ist ein gültiger Typescript-Ausdruck (aber nicht anders herum).
Die Templates werden mit HTML und CSS entwickelt. Angular ist damit mit den „heiligen 3“ Websprachen implementierbar.

Anpassbarkeit

Der größte Nachteil von Frameworks ist die Knebelung, die man sich damit ins Haus holt.
Die Macher von Angular haben sehr darauf geachtet, die Implementierung und Strukturen von Angular immer anpassbar zu gestalten. So können durch die Dependency Injection mittels sogenannten Providern eigene Methoden zur Verfügung gestellt werden, wie Komponenten und Services bereitgestellt werden.
Bei der Verwendung einiger anderer Frameworks ist mir oft aufgefallen, dass bestimmte Anweisungen, Klassen oder Statements immer wieder implementiert werden (und müssen). In Angular ist zwingend nur der Einstiegspunkt der Applikation. Für jede Komponente gibt es nur Links zum Template- & CSS-File und den Namen der nötig ist – der Rest ist eine echte Typescript Klasse (ohne Vererbung). Schreibt man jedoch einen Service ist man völlig frei in der Implementierung. Ebenso haben Templates und CSS zwar Best-Practices und Konventionen, aber wenig bis keinen Zwang.

Community

Zu guter Letzt einen der schönsten Punkte an Angular: Es ist verdammt beliebt.
Sicher ist Angular nicht perfekt, ebenso wie Google nicht perfekt ist, aber ebenso wie Google ist auch Angular einfach verdammt verbreitet. Und das bringt einige Vorteile mit sich.
Einerseits gibt es eine enorme Fülle an Hilfestellungen bei Problemen, die beim Entwickeln auftreten. Tutorials, Ressources, Bücher oder Stack-Overflow-Einträge ebenso wie Workshops und Meetups.
Andererseits ist mit großer Beliebheit sichergestellt, dass Angular weiterhin entwickelt wird. Google macht das nicht (nur) aus Wohltätigkeit, sondern natürlich um Macht zu gewinnen. Fällt die Nutzung von Angular unter einen gewissen Wert, so lohnt es sich nicht mehr das Projekt weiter zu entwickeln. Und wir wissen alle wie schnell coole Technologien im Internet versinken, weil sie keiner mehr nutzt.
Ich persönlich muss sagen, dass es mir große Freude macht Applikationen mit Angular zu entwickeln. Vieles wurde in diesem Artikel noch gar nicht erwähnt, beispielsweise die hervorragende Möglichkeit des automatisierten Testens (Jasmine, Karma, Protractor) oder dass man sehr einfach Cross-Platform Apps (Android, iOS) mit Angular entwickeln kann, doch das würde den Rahmen sprengen.
Ich kann nur jedem empfehlen Angular einmal auszuprobieren und damit etwas herumzuspielen.

In diesem Sinne: Viel Spaß!

Verbreitet die Message!

Schreiben Sie einen Kommentar