Webapps mit Angular entwickeln

Wozu Angular?

Das Framework Angular basiert auf JavaScript. So können grosse Teile der User-Interaktionen im Browser ohne Seiten-Reload ausgeführt werden. Damit wird der Server entlastet und die Reaktionszeiten der Webapp sind kürzer. So entsteht eine bessere User Experience als bei klassischen serverseitigen Applikationen.

Damit Entwickler’innen den Code einer Web-Applikation gut überblicken und handhaben können, ist ein Framework wie Angular unerlässlich. Wie andere populäre Frameworks erlaubt Angular den Aufbau von wiederverwertbaren Komponenten. Diese Komponenten werden kombiniert und verschachtelt und liefern so einen Setzkasten für den Aufbau der Applikation.

Darüber hinaus bietet Angular Lösungen für gängige Probleme wie etwa für die Beherrschung der Navigationslogik und für den koordinierten Austausch von Daten zwischen Komponenten.

Angular wird von Google entwickelt und hat seit der ersten Veröffentlichung 2010 (unter dem Namen AngularJS) eine starke Entwicklung durchgemacht. Nachdem die Kinderkrankheiten nun weitgehend behoben sind, ist Angular mittlerweile ein stabiles und verlässliches Framework.

Alternative JavaScript-Frameworks zur Realisierung von Web-Applikationen sind React und Vue.js. Da diese Alternativen weniger Strukturvorgaben beinhalten als Angular und mehr Flexibilität bei der Wahl der Mittel erlauben, gehören sie eher zu den Bibliotheken als zu den Frameworks.

Mit der Frontend-Umsetzung der Sportwetten von Swisslos haben wir eine grosse Webapplikation mit Angular 6 realisiert – Grund genug, ein paar Gedanken über die Stärken und Schwächen von Angular zu teilen.

Vorteile von Angular

Angular bietet einige Vorzüge, unter anderem

• Struktur: Angular-Bauteile sind nach einem einheitlichen Schema aufgebaut. Dies macht den Code gut lesbar und verständlich. Die verschiedenen Bauteil-Arten (Komponenten, Direktiven, Dienste, etc.) für bestimmte Anwendungszwecke fördern eine einheitliche Verwendung. Damit legt Angular gewisse Strukturen der Software-Architektur nahe, so dass Entwickler’innen diesen folgen können statt diese immer wieder neu entwerfen zu müssen.
• Sauberer Code: TypeScript ist eine Erweiterung von JavaScript und erlaubt die Verwendung von Datentypen (z.B. Parameter muss vom Typ «number» sein). Das ist insbesondere bei komplexen Daten von grossem Vorteil, wenn die Entwickler’innen mittels Daten-Modellen spezifizieren können, welche Werte sie in welcher Form benötigen. Diese Typisierung kostet zwar am Anfang Zeit, zahlt sich auf lange Sicht aus: Diese Standardisierung vermeidet Fehler, macht die Struktur nachvollziehbar und sorgt für einfache Wartung.
• Wiederverwendbarkeit & Modularität: Entwickler’innen können Komponenten und andere Bauteile in Modulen gruppieren. Diese Module können sie an anderen Stellen importieren und sie so einfach wiederverwerten.
• Mächtige Kernfunktionen: Die Handhabung von Sprachen, Formularen, Navigationslogik, Progressive-Web-App-Funktionalitäten und einigem mehr wird von Angular zur Verfügung gestellt. Da Google alle diese Funktionen zur Verfügung stellt, muss man sich nicht sorgen, dass ein Angular-Versionsupgrade wegen fremder Bausteine zu Problemen führt.
• Einfache Wartung: Aufgrund des einheitlichen Aufbaus der Komponenten und der Verwendung von TypeScript sind die Voraussetzungen für eine einfache Wartung hervorragend.
• Betriebstests: Angular beinhaltet die Möglichkeit, Tests für einzelne Komponenten sowie auch Tests für die gesamte Applikation zu schreiben.
• Performanz: Die Geschwindigkeit bei React und Vue.js ist generell etwas höher, dennoch kann Angular in Zuverlässigkeit und Tempo durchaus mithalten.
• Zukunftssicherheit: Da Google hinter Angular steht und seit fast einem Jahrzehnt vorantreibt, dürfte es noch einige Jahre weiterentwickelt werden.

Nachteile von Angular

Gerade im Vergleich mit den Komponenten-Bibliotheken von React und Vue.js finden sich ein paar Schwächen von Angular.

• Geringere Flexibilität: Da es sich bei Angular um ein kohärentes Framework handelt, ist die Flexibilität in der Wahl der Mittel (z.B. der Auswahl eines Formular-Tools) geringer als bei React und Vue.js, die mit einem umfangreichen Ökosystem aufwarten.
• Längere Entwicklungszeit: Es dauert häufig länger, dasselbe Resultat mit Angular zu erreichen, verglichen mit React und Vue.js. Angular verlangt mehr Code. Ist die Webapp eher klein, kommen die Skaleneffekte von wieder verwendetem Code nicht richtig zum Zug.

• Komplexität & Lernkurve: Angular hat gewisse Eigenheiten, die den Einstieg schwierig machen. Entwickler müssen zunächst mit verschiedenen Angular-Konzepten vertraut sein, um produktiv arbeiten zu können. Die Lernkurve verläuft jedoch i.d.R. relativ steil: Entwicker’innen, die schon mit der Logik objektorientierter Programmierung vertraut sind (z.B. mit Java oder C# gearbeitet haben), dürften mit Angular gut arbeiten können.
• Wenig Support: Bei Angular kann es gut und gerne vorkommen, dass Fehlermeldungen sehr kryptisch ausfallen oder Hilfestellungen knapp ausfallen. Das liegt auch daran, dass die Entwickler-Community kleiner und die Popularität von Angular geringer als bei React und Co ist.