Angular vs React vs Vue.js: Argumente für Angular bei Unternehmensanwendungen

Unkategorisiert • UPDATED ON März 16, 2023

John Adam

Author

In diesem Blogartikel erklärt K&C-Frontend-Superstar Alex Chugaev, warum er sich bei Unternehmensanwendungen immer für Angular vs React oder Vue.js entscheiden würde.

Angular vs React vs Vue.js als Auswahl des Frontend-JavaScript-Frameworks ist eine Frage, die sich Projektverantwortliche und ihre Entwicklungsteams in der Planungsphase der meisten neuen Softwareprodukte mit Benutzeroberfläche immer wieder stellen müssen. Jedes dieser drei großen Technologien in der JavaScript Welt ist für sich genommen ein beliebtes und äußerst effektives Framework.

Doch kann man behaupten, dass eines der drei großen Frameworks das beste „Allroundtalent“ für JS ist? Letztlich wahrscheinlich nicht. Jedes von ihnen hat Qualitäten, die in einem bestimmten Kontext hervorstechen, in einem anderen jedoch als nachteilig angesehen werden könnten. Die Entscheidung für eines der Frameworks ist eine Abwägung, die vom jeweiligen Anwendungsfall abhängt. React ist das flexibelste der drei Frameworks, während Angulars eigenwillige Natur den Vorteil der Konsistenz für große, komplexe Anwendungen mit sich bringt. Vue.js positioniert sich zwischen diesen beiden.

Hier bietet Alex einen detaillierten Überblick über die Stärken und Einschränkungen von Angular als JavaScript-Framework und erklärt, warum es im Kontext von Anwendungen auf Unternehmensebene seine Vorteile voll ausspielt.

Wann und warum Angular das JavaScript-Framework Ihrer Wahl sein sollte

Für Angular ist der K&C Frontend-Maestro Alex Chugaev zuständig. Alex arbeitet seit mehr als 5 Jahren mit Angular und Angular.js und verfügt zudem über mehr als 3 Jahre Erfahrung mit TypeScript sowie über gute Kenntnisse von NestJS.

Er geht der Frage nach, wann und warum es sinnvoll ist, sich für Angular und nicht für React oder Vue.js als optimales JS-Framework zu entscheiden, indem er die Vor- und Nachteile von Angular in einer Vielzahl von Anwendungsfällen erläutert. Weiter zu Alex:

Die Fragen, zur Beurteilung eines JavaScript-Frameworks und ihre Antworten im Kontext von Angular

Sobald ein Projektverantwortlicher oder der Leiter eines Entwicklungsteams vor der Entscheidung steht, für welches JavaScript-Framework dieser sich entscheiden soll, gibt es eine Handvoll Fragen, die immer gestellt werden sollten:

Wer steckt hinter der Technologie? (Ich möchte sicher sein, dass das Framework von erstklassigen Softwareentwicklern nachhaltig gepflegt wird).

Das Framework Angular wird von Google verwaltet, wobei der Tech-Gigant sich aktiv dafür einsetzt, das Framework als führende Webentwicklungstechnologie zu etablieren.

Ist es zuverlässig / stabil / bewährt in realen Projekten / erfolgreich? (Ich möchte sicher sein, dass dieses Framework von anderen Organisationen für Projekte mit ähnlicher Komplexität wie unserem erfolgreich eingesetzt wird).

Ja, Angular ist seit der Veröffentlichung des ursprünglichen AngularJS im Jahr 2010 ein führendes JS-Framework. In den vergangenen 12 Jahren haben zahlreiche Unternehmen ihre Softwareprodukte erfolgreich mit Angular umgesetzt. Einige der führenden Beispiele für Produkte, die auf dem Angular-Framework basieren, finden Sie hier – https://www.madewithangular.com/.

Wird es langfristig unterstützt ? (Ich möchte sicher sein, dass das Framework im Laufe der Jahre weiterentwickelt wird und problemlos eingesetzt werden kann).

Google hat ehrgeizige Zukunftspläne für Angular und verdoppelt derzeit die Support- und Entwicklungsanstrengungen für das Framework. Der Vorgänger AngularJS wird ab Sommer 2021 nicht mehr weiter unterstützt.

Ist das Framework weit verbreitet? Von wie vielen Unternehmen wird es bereits genutzt? Welche Anwendungsmöglichkeiten bietet es? (Ich möchte sicher sein, dass wir auf dem neuesten Stand der Technik sind und in der Lage sein werden, erfahrene Entwickler einzustellen, die damit arbeiten möchten).

Angular ist bei heutigen Entwicklern natürlich ein sehr beliebtes Framework. Die Tatsache, dass es nach wie vor als das Framework der Wahl für einige ernstzunehmende Branchengrößen ausgewählt wird, stimmt mich zuversichtlich, dass sich das in absehbarer Zeit nicht ändern wird.

Wie umfangreich und aktiv ist die Community, die hinter dem Framework steht? (Ich möchte sicherstellen, dass es ein reichhaltiges Angebot an Materialien, Tutorien, Treffen und Konferenzen sowie eine aktive Gemeinschaft gibt, die sich gegenseitig bei der Lösung aktueller Probleme unterstützt).

Angular profitiert von einer großen Online-Community, die aufgrund der Tatsache, dass es sich um ein Open-Source-Framework handelt, über eine Vielzahl offizieller und von der Community betriebener Foren für den Austausch über Angular verfügt. Die bekanntesten Entwickler-Community-Ressourcen wie StackOverflow, GitHub und Gitter chat haben allesamt eine große Angular-Präsenz und werden durch ein starkes Ökosystem von Blogs, Social-Network-Communities und professionellen Gruppen unterstützt, in denen Entwickler ihr Wissen teilen und Hilfe suchen können.

Wie produktiv arbeiten die Entwickler mit dem Framework? (Ich möchte sicherstellen, dass das Framework die schnelle Entwicklung neuer Funktionen unterstützt, damit unsere Markteinführungszeit optimal verläuft).

Die Geschwindigkeit der einzelnen Entwickler und des Teams hängt von vielen Faktoren ab, nicht nur von den Qualitäten des Frameworks selbst oder vom technischen Niveau des Projektteams. Ein gut organisiertes und diszipliniertes Team kann schnell und effektiv arbeiten, auch wenn es nicht von herausragenden Framework-Kenntnissen verfügt.

Andererseits kann ein Team, welches außerordentlich talentierte Angular-Experten in seinen Reihen hat, schwerfällig arbeiten bzw. weniger Wert aus jedem Sprint ziehen, wenn dieses mangelhaft organisiert ist. Wenn jedoch die Planung und das Delivery Management eines Projekts stimmen, eignet sich Angular für einen Workflow, der größere Probleme in kleinere Teile zerlegt, die einen schnellen Release-Zyklus unterstützen, der mindestens so schnell ist wie der von React oder Vue.js.

Stellt das Framework die beste Wahl für den spezifischen Kontext des Projekts dar? (Ich möchte sicher sein, dass es zur effektiven Erstellung unserer Anwendung verwendet werden kann).

Um diese Frage effektiv beantworten zu können, müssen wir zunächst die Anwendungsfälle definieren, für die Angular am besten geeignet ist, nämlich folgende:

• Projekt-Typ
• Projekt-Komplexität
• Projekt-Größe
• Zeitraum der Projekt-Unterstützung

Projekt-Typ

Angular ist ein universelles Framework und kann für die Erstellung von Web-, Desktop- und mobilen Anwendungen verwendet werden.

Projekt-Komplexität

Angular kann für die schnelle Entwicklung von Projekten jeglicher Komplexität verwendet werden, solange die einzelnen Anwendungsfälle darauf abgestimmt sind.

Ich würde jedoch behaupten, dass die Stärke von Angular in größeren und komplexen Projekten liegt. Das Framework bietet eine großartige modulare Architektur für Unternehmen sowie die notwendigen Standards für große Teams, die effizient an einem großen, komplexen Projekt zusammenarbeiten.

Projekt-Größe

Es besteht nach wie vor die Diskussion über die Frage „Wie groß sollte ein Projekt sein, bevor wir uns für Angular entscheiden?“. Ich persönlich denke, dass die Frage an sich schon nicht ganz richtig ist und das Einzige, was man wirklich fragen sollte, ist: „Können wir Angular effektiv für diese Art von Projekt verwenden?“ Aber gerade die Tatsache, dass sich Angular stärker als React und Vue.js positioniert, bedeutet, dass es ein gewisses Maß an Konsistenz beim Templating bietet, von dem große Anwendungen besonders profitieren.

Angular’s Stärken

Also, was zeichnet Angular als JavaScript-Framework aus?

Wiederverwendbarkeit

Ähnliche Komponenten sind autark und können von Entwicklern in verschiedenen Teilen einer Anwendung wiederverwendet werden. Dies ist besonders effizient in Unternehmensanwendungen, in denen verschiedene Systeme zusammenlaufen, aber viele ähnliche Elemente wie Suchfelder, Datumsauswahlen, Filter usw. enthalten können.

Lesbarkeit

Mit Hilfe von Komponenten wird auch der Einarbeitungsprozess für neue Entwickler beschleunigt, da sie den Code einfacher lesen können, was bedeutet, dass sie schneller ihre maximale Produktivität erreichen.

Unit-Test-freundlich

Die unabhängige, gekapselte (autarke) Natur der Komponenten vereinfacht den Prozess der Qualitätssicherung durch Unit-Tests, die die Leistung der verschiedenen Teile einer Anwendung bewerten.

Wartungsfreundlichkeit

Komponenten, die leicht voneinander entkoppelt werden können, bedeuten auch, dass Verbesserungen und Wartung bequem umzusetzen sind. Das ist eine echte Stärke für die Art von iterativem Entwicklungsworkflow, auf den große, komplexe Anwendungen angewiesen sind.

TypeScript

Angular ist in TypeScript geschrieben – einem Superset für JavaScript. TypeScript ist zwar vollständig in JS kompiliert, macht es jedoch viel einfacher, häufige Fehler zu erkennen und zu beseitigen, die beim Eingeben des Codes auftreten. Für kleinere Projekte mag das weniger wichtig sein, aber sauberer Code trägt erheblich zur Leistung von Unternehmensanwendungen bei.

Da anstelle von TypeScript auch reines JavaScript verwendet werden kann, ist es für Angular-Entwickler nicht unbedingt erforderlich, letzteres zu erlernen, allerdings werden ihre Fähigkeiten im Zusammenhang mit der Entwicklung größerer, komplexerer Anwendungen dank der überlegenen Navigation, Autovervollständigung und Refactoring-Dienste von TypeScript deutlich verbessert.

RxJS

Die RxJS-Bibliothek wird in Verbindung mit Angular verwendet, um asynchrone Datenaufrufe zu verwalten. RxJS bedeutet, dass Ereignisse unabhängig und parallel gehandhabt werden können, ähnlich wie bei einem Fließband in einer Fabrik, wo ein Herstellungsprozess in austauschbare Stufen unterteilt ist, die nicht aneinander gebunden sind. Das bedeutet, dass eine Webseite nicht unempfänglich bleibt, während man auf ein Element wartet, das nachfolgende Ereignisse auslöst.

Die asynchrone Programmierung ist nicht erst mit RxJS entstanden, doch macht die Bibliothek sie sehr viel einfacher. Ein Nachteil von RxJS ist, dass es mit einer steilen Lernkurve verbunden ist, doch einmal gemeistert, macht es die Arbeit eines Angular-Entwicklers sehr viel einfacher.

Frontend Web-Entwicklung

Die häufigste Anwendung von Angular ist die Frontend-Webentwicklung. Gerade in diesem Bereich kommen die Stärken des Frameworks am deutlichsten zum Ausdruck. Ich persönlich habe Angular für Webentwicklungsprojekte aller Größenordnungen eingesetzt, von 5-Seiten-Apps bis hin zu einem riesigen Unternehmensportal für ein internationales Großunternehmen (Bosch).

In Kombination mit der professionellen Organisation von Arbeitsprozessen und der Nutzung eines gewissen Grades an Automatisierung (CI/CD) konnten wir in kürzester Zeit einen enormen Mehrwert schaffen.

Die komponentenbasierte Architektur von Angular ist eine deutliche Verbesserung zu AngularJS. Angular-Komponenten sind Teile der Benutzeroberfläche oder Funktionalitäten, die in einer strengen Hierarchie existieren. Die Vorteile der komponentenbasierten Architektur von Angular sind:

Interaktive Anwendungen

It should be highlighted that Angular is best suited to interactive applications. It does not make much sense to use it for web development projects such as simple blogs or news and content-centric, where users do little other than consume content.

While steps such as setting up server-side rendering mean JS websites can now rank in Google without major issues, its dynamic nature means JavaScript is not optimally SEO-friendly. But that goes for JS and JS frameworks in general, rather than Angular specifically.

For most other kinds of user-facing web development, especially so-called “fat/solid client” apps that have a lot of business logic held in the frontend app rather than on the server side, Angular is likely to be a strong option you won’t go far wrong with.

Mobile Entwicklung

Angular kann in Verbindung mit NativeScript (oder ähnlichen Lösungen) verwendet werden, um leistungsstarke mobile Anwendungen zu erstellen. Dies bedeutet, dass die Fähigkeiten eines Angular-Frontend-Entwicklers auf die Erstellung nativer mobiler Apps angewendet werden können, wenn sie durch eine Plattform-API ergänzt werden.

Für KMU kann dies bedeuten, dass die Einstellung von Angular-Entwicklern sehr sinnvoll ist, da dasselbe Team sowohl an Webentwicklungsprojekten als auch an mobilen Apps arbeiten kann.

Desktop Entwicklung

Bei der Desktop-Entwicklung hat Angular mit …NET Core, WPF usw. eine härtere Konkurrenz. Diese Technologien sind überlegen, wenn es darum geht, Anwendungen zu erstellen, die effizienter sind, was die Maschinenressourcen angeht, auf denen sie laufen.

Trotz einiger Unzulänglichkeiten bei der Ressourceneffizienz werden einige Desktop-Anwendungen mit Webtechnologien wie Angular entwickelt, vor allem, wenn diese Ressourcen dem Unternehmen bereits zur Verfügung stehen.

Angular’s Schwächen

Ich bin überzeugter Angular-Anhänger, doch natürlich ist es nur möglich, die Stärken des Frameworks vor dem Hintergrund seiner Schwächen objektiv zu vertreten. Was sind also die Probleme von Angular?

Komplexität

Frontend-Entwickler, die React, Vue.js oder andere JS-Frameworks gegenüber Angular bevorzugen, kritisieren meist dessen relative Komplexität und Ausführlichkeit. Das ist ein Kritikpunkt, der schon seit der ersten Veröffentlichung von AngularJS vor einem Jahrzehnt besteht.

Mein persönlicher Standpunkt ist hier „kein Schmerz, kein Gewinn“, aber es stimmt, dass Angular komplex ist. Die komponentenbasierte Architektur des Frameworks ist einer seiner großen Vorteile, aber die Art und Weise, wie diese hierarchischen Komponenten verwaltet werden, könnte einfacher sein. Es ist mitunter erforderlich, bis zu fünf Dateien für eine einzige Angular-Komponente zu erstellen, Abhängigkeiten zu injizieren und Schnittstellen für den Lebenszyklus von Komponenten zu deklarieren.

Dies kann bedeuten, dass bei der Angular-Entwicklung viel Zeit für sich wiederholende Aufgaben aufgewendet werden muss.

Steiler Lernprozess

Die Komplexität des Angular-Frameworks führt dazu, dass JavaScript-Entwickler in der Regel mehr Zeit benötigen, um sich in das Framework einzuarbeiten, verglichen mit der Einarbeitung in React oder Vue.js.

Neue Angular-Entwickler werden Zeit brauchen, um sich mit Modulen, Dependency Injection, Komponentenmanagement, Services und Templates vertraut zu machen. Erst dann folgt die Beherrschung von RxJS, das für die Arbeit mit Angular nicht mehr und nicht weniger als eine notwendige Basis darstellt.

Es ist zwar möglich, nur mit JavaScript auszukommen, aber um ein wirklich effektiver Angular-Entwickler zu sein, muss man auch TypeScript lernen. Wie ich bereits bei der Beschreibung der Stärken von Angular erwähnt habe, bringt dies große Vorteile mit sich, wenn es darum geht, die Sauberkeit und Wartungsfreundlichkeit des Codes zu verbessern, erhöht aber unbestreitbar die Schwierigkeit des Lernens mit Angular um eine weitere Stufe.

Die Schwächen von Angular liegen hauptsächlich im Lernprozess zum Framework und weniger in den technischen Fähigkeiten, die ein bereits erfahrener Angular-Entwickler implementiert. Für Unternehmen, die nicht immer in der Lage sind, fertige Angular-Entwickler einzustellen oder zu beauftragen, sind die Einarbeitungszeit sowie die Komplexität des Frameworks jedoch definitiv eine Überlegung wert.

Warum Angular das Framework meiner Wahl für Anwendungen auf Unternehmensebene ist

Ich persönlich würde mich fast immer für Angular als Framework für Anwendungen auf Unternehmensebene entscheiden, deren primäre Funktion nicht in der Bereitstellung von Inhalten besteht.

Bei langfristigen Projekten, bei denen erhebliche Investitionen anfallen, werden die Komplexität und die steile Lernkurve von Angular durch die effizientere Wartung von sauberem TypeScript-Code kompensiert. Die Stabilität und der kontinuierliche technische Support sowie die ständigen Verbesserungen des Google-Supports sind ebenfalls ein großes Plus im Zusammenhang mit Anwendungen auf Unternehmensebene.

React und Vue.js sind zwar einfacher und billiger in der Ausbildung und Rekrutierung sowie in der Bereitstellung, aber keines der beiden Frameworks ist so vielseitig, wartungsfreundlich und zukunftssicher wie Angular.