Anzeige
Anzeige
Ratgeber
Artikel merken

React vs. Angular – wann ist was besser?

React und Angular sind zwei der beliebtesten Tools zur Erstellung von interaktiven Websites. Aber welches nutzt ihr wann am besten?

Von Janna Tillmann
5 Min. Lesezeit
Anzeige
Anzeige
React oder Angular, was ist besser? (Bild: Whitedragon/Shutterstock)

Auf den ersten Blick wirkt es nicht unbedingt sinnvoll, Angular und React zu vergleichen, ist ersteres doch ein Framework und zweiteres nur eine Bibliothek. Allerdings fallen beide Namen sehr oft, wenn es um die Entwicklung von interaktiven Anwendungen geht. Dafür sind beide geeignet, ihre Ansätze sind aber sehr verschieden. Genau das soll dieser Vergleich deutlich machen.

Was ist React?

Anzeige
Anzeige

React ist eine Bibliothek, die dazu dient, die View-Komponente des Model-View-Controller-Ansatzes abzudecken, also die Seite der Anwendung, die der Nutzer sieht und mit ihr interagiert. Normalerweise liegt dafür ein DOM (Document-Object-Model) als Baumstruktur vor, das in HTML erzeugt wird und nur mit großem Aufwand zu traviersieren und zu verändern ist. Durch den Einsatz eines virtuellen DOMs, das einfacher zu manipulieren ist, ist die Bibliothek in der Lage, Interaktionen sehr schnell umzusetzen. React basiert auf JSX, also Javascript XML, das eine Erweiterung um Elemente aus XML direkt in Javascript ermöglicht. Zusätzlich wird HTML eingebunden.

Was ist Angular?

Angular ist ein Framework zur Erstellung von Nutzeroberflächen nach dem Model-View-Viewmodel-Modell (MVVM). Im Gegensatz zum MVC-Modell fällt hier die Controller-Einheit weg, stattdessen wird durch das Viewmodel eine Verbindung beider Ebenen hergestellt. Das Framework ermöglicht es so, Interaktionen schnell und einfach umzusetzen. Der Ansatz der Macher ist es dabei, HTML so zu erweitern, dass die Skriptsprache selbst mit Interaktivität umgehen kann, entsprechend ist HTML hier die Grundlage des Codes, Javascript wird darauf aufgesetzt.

Anzeige
Anzeige

Was spricht für React?

Für React spricht zu allererst der Einsatz des virtuellen DOMs, mit dem der Aufwand einer Veränderung am tatsächlichen DOM extrem gering gehalten wird. Das sorgt dafür, dass die Anwendung sich immer sehr flüssig verhält, selbst wenn die dahinterliegenden Operationen durchaus komplex oder die Datenbanken sehr groß sind.

Anzeige
Anzeige

Weiterhin ist React ja wie schon erwähnt nur eine Bibliothek und hat damit sehr wenig Zwänge für den Entwickler. Dieser kann nach Belieben zusätzliche Bibliotheken einbinden und vollkommen frei von Vorgaben an die Lösung seines Auftrags gehen, anstatt bestimmten Regeln und Vorgehensweisen folgen zu müssen.

Weiterhin ist für React nur JSX zu erlernen, was für die meisten Entwickler nichts Neues sein dürfte. So ist der erste Einstieg vergleichsweise simpel und erfordert nicht viel Vorarbeit. Natürlich gilt das nicht für alle Komponenten wie beispielsweise React Flux, aber für die grundlegende Arbeit reichen geringe Vorkenntnisse.

Anzeige
Anzeige

Was spricht gegen React?

React alleine reicht kaum aus, um eine Website aufzubauen. Da es sich dabei nur um eine Bibliothek handelt, bietet es kein Grundgerüst, sondern nur einige spezifische Funktionen zum Schreiben von Anwendungen. Das kann in einem Projekt mit engem Zeitplan gegen React sprechen, da hier weitere Recherche nach zusätzlichen Lösungen einzurechnen ist. Und auch dann ist natürlich viel Kommunikation nötig, wie ein spezifisches Problem zu lösen ist, weil es immer mehrere Lösungsansätze geben dürfte.

React glänzt nur, wenn die Website, auf der es eingesetzt wird, stark auf Interaktivität setzt. Wenn das allerdings nicht der Fall ist, bietet React nicht besonders viel oder wird komplizierter als andere Bibliotheken.

Zuletzt gibt es einige Unsicherheiten, was die Lizenzsituation angeht. Facebook behält sich vor, die Lizenz zur Nutzung im Falle eines Patentstreits zurückzuziehen. Aufgrund von Unsicherheiten auf Seiten der Nutzer wurde dieser Teil angepasst, es ist aber noch immer so, dass jeder, der einen Patentstreit gegen Facebook anfängt oder finanzielle Interesse in einem solchen Streit hat, seine Lizenz verliert. Das ist eine Unsicherheit, die nicht zu unterschätzen ist, und es gibt Berichte dahin, dass Unternehmen deswegen auf React verzichten.

Anzeige
Anzeige

Was spricht für Angular?

Angular verbindet sich mit HTML, CSS und Javascript, also für die meisten Entwickler bekannte Konzepte. Innerhalb des HTML-Codes werden dann Angular-Befehle und -Syntax genutzt. Da Angular 2 in Typescript geschrieben ist, ist das auch der sinnvollste Dialekt für das Arbeiten mit Angular. Ob das ein Vorteil ist, hängt natürlich von persönlichen Vorlieben ab, in jedem Fall bietet Typescript mehr Möglichkeiten als Javascript. Insgesamt schreibt sich der Code kompakt, da im Grunde die HTML-Befehle nur erweitert werden, um Interaktivität zu ermöglichen. Vor allem Single-Page-Designs lassen sich so problemlos umsetzen und auch der Code dazu kann auf nur einer Seite konzentriert werden, statt zusätzliche Inhalte einbinden zu müssen.

Durch das Double-Bind-Feature sind Elemente aus View und Model einander zugeordnet und ein Austausch in beide Richtungen ist problemlos möglich. Passiert also auf einer Seite eine Änderung, wird diese direkt auf die andere Seite übertragen, ohne das dafür spezielle Funktionen wie listener nötig sind. Dadurch müssen natürlich weit weniger Inhalte geladen werden und Anwendungen sind auch hier sehr responsiv. Außerdem sind Seiten auch mit Angular extrem schnell.

Angular ist ein Framework, das bedeutet, es liefert direkt ein Grundgerüst zur Erstellung einer Website und kommt ohne zusätzliche Bibliotheken aus. Gerade, wenn nicht viele Komponenten für die Programmierung des Projekts genutzt werden sollen, ist Angular also durchaus eine sinnvolle Lösung.

Anzeige
Anzeige

Was spricht gegen Angular?

Da es ein Framework ist, ist Angular starrer in der Art, wie man damit programmieren kann, und gibt mehr Grenzen vor. Und trotzdem ist es auch hier möglich, ein Problem auf mehrere Weisen zu lösen, was dazu führen kann, dass in einer Gruppe mit mehreren Programmieren Schwierigkeiten auftreten. Hier müssen dann im Vorfeld klare Vorgaben gemacht werden, was natürlich zusätzlicher Planungsaufwand ist.

Ein weiteres Problem sind die unterschiedlichen Versionen von Angular, die untereinander wenig kompatibel sind. Auch hier muss also im Vorfeld Konsens bestehen, mit welcher Version gearbeitet wird, damit das Projekt problemlos laufen kann.

Auch wenn die Syntax erstmal vergleichsweise bekannt ist, muss ebenfalls erwähnt werden, dass die Lernkurve von Angular steiler wird, wenn man wirklich das gesamte Framework erlernen will.

Anzeige
Anzeige

Fazit

Im Endeffekt ist die Antwort wie so oft „Es kommt darauf an …“. Am sinnvollsten ist es vor Beginn des Projekts zu überlegen, wohin man denn genau will. Wie interaktiv ist die Website, wie viele Ressourcen kann man in die Zusammenstellung von Bibliotheken legen, wie viele Entwickler teilen sich den Code und wo liegt deren Expertise?

Kurz zusammengefasst eignet sich React vor allem für sehr interaktive Projekte, in denen ohnehin weitere Bibliotheken zum Einsatz kommen und JSX für niemanden im Team ein Fremdwort ist.

Für Angular spricht hingegen die Tatsache, dass das Framework alles Nötige für den Aufbau einer Website bietet und daher die Orientierung für den Anfang leichter ist, weil keine zusätzlichen Tools nötig sind. Dafür bringt es natürlich als Framework sehr viele Funktionen mit, die bei kleineren Projekten nur unnötiger Ballast sein könnten und ist zuletzt restriktiver.

Anzeige
Anzeige

Hinweis: Der Artikel wurde aufgrund von Kommentaren zum Inhalt überarbeitet.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
15 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Chris

„Zuletzt muss man außerdem anmerken, dass Angular clientseitig arbeitet, was potenziell ein erhöhtes Sicherheitsrisiko nach sich ziehen kann. “

– Sounds like Inkompetenz.

Hier wird doch nur vom Frontend geredet… klar gibt es SSR… aber jede Website ist „client-seitig“…. jede! Egal, welches Framework… Sprache… Server…

Zu dem… dieser Oberflächliche Blick auf die Frameworks/Libs… Leute reißt euch mal zusammen! Wenn ein „Modernes Medien Magazin“ so einen Artikel abliefert… ist mir klar, wieso die meisten Entwickler einfach so hoffnungslos mittelmäßig sind… Die Leute vertrauen euch…

Ihr geht auf solch Oberflächliche dinge ein, wie…. „Das ist ein Framework, das ist eine Bibliothek“ -> „Deshalb ist das eine zuwenig, und das andere zuviel“…. Wieso macht ihr nicht mal Benchmarks… wie Renderzeiten…. client-seitig und server-seitig… oder vergleicht mal die ToDo-Apps (überall auf Github) von Angular und von React und schaut euch mal an, was mehr oder weniger code ist…. für das gleiche Resultat.

Euer Magazin… also dieses t3n, wird ja ganz gut gelesen… Bildet die Leute doch mal weiter… und liefert Fakten, anstatt so kalten Kaffee.

Nicht falsch verstehen… ich lese t3n sehr gerne. Aber so ein Artikel… das macht mich traurig.

Antworten
alem_r

Bin absolut deiner Meinung.
Was ich hier sehr vermisse sind auch direkte Fallbeispiele wann und warum dies und warum nicht das usw.

Es wäre wirklich gut wenn man Entwickler die ein bisschen Redaktion können einstellen würde, anstatt Redaktoren die ein bisschen Web können.

Antworten
JS

Weder React, noch Angular, sondern: VueJS https://vuejs.org

Antworten
Bastien

„Angular arbeitet mit HTML, CSS und Javascript, also verlangt es sehr wahrscheinlich nichts Neues von einem Entwickler. “ Wahrscheinlich muss man wohlmöglich noch selbst angular erlernen ??? *kopfschüttel*

Antworten
Stefan S.

Ich sag nur: https://www.it-madness.com/posts/233/

Nein mal im ernst, als wenn man nichts neues lernen müsste. Das ist Marketing-Bullshit. Sowohl React als auch Angular sind nicht immer sehr einfach und manchmal kommt man auch an Workarounds nicht vorbei, was aber okay ist, denn das hat man bei JEDEM Framework.

Also um zu dem Stand kommen kann, wo man sagen wird „I know my tools“ vergehen selbst bei sehr erfahrenen Entwicklern die neu zu etwas sind, ein paar Jahre und daher finde ich diesen Artikel schon etwas sehr an der Realität vorbei.

Antworten
C

Wow so ein schlechter Artikel.

Eines vorne weg, ich bin Angular-Entwickler. Der Vergleich ist einfach abgrundtief schlecht.

Allein folgender Satz beweist die technische Lücken des Autores:

„Und trotzdem ist es möglich, ein Problem auf mehrere Weisen zu lösen, was dazu führen kann, dass in einer Gruppe mit mehreren Programmieren Schwierigkeiten auftreten. “

Der Satz bezieht sich als Nachteil auf Angular, wenn dies für ein Framework gilt, dann gilt es für eine Bibliothek in jedem Fall noch mehr, dann hat der Satz nichts bei den Nachteilen Angulars zu suchen. Schließlich gibt ein Framework mehr Struktur vor als eine Bibliothek, das angesprochene Risiko ist also in einem Framework geringer.

Ich will aber keineswegs sagen, dass React ein schlechtes Produkt ist. React ist sogar verdammt gut. Dennoch wird hier die Lizenzproblematik gar nicht angesprochen. Und das ist nicht nur ein Problem für die Apache Foundation, auch ein Autobauer aus dem Süden Deutschlands hat React aus seinen Anwendungen verbannt da die rechtliche Situation nicht zufriedenstellend ist.

Der Nachteil von Angular mit TypeScript kam im Artikel auch nicht vor – ich sehe TypeScript als Vorteil – viele aber eben nicht und dieser Kritikpunkt sollte genannt werden.

Setzen 6.

Antworten
Stephan

Wer eine einfache aber dennoch komplette Lösung sucht, sollte sich mithril.js ansehen. Es basiert auch auf virtual DOM hat aber router, reactive streams und ajax-helper mit im Gepäck. Es ist zudem extrem klein (<9kb) und somit schnell zu laden und auch sehr schnell in der Ausführung. Auch braucht es keinen komplizierten Build-step um zu funktionieren. Die Lernkurve ist meiner Meinung nach flach wie bei keinem anderen framework. Man kann an einem tag das komplette Framework beherrschen wenn man firm in JavaScript ist.

Antworten
lulzBoB

„Angular arbeitet mit HTML, CSS und Javascript, also verlangt es sehr wahrscheinlich nichts Neues von einem Entwickler. “ Diese Aussage ist falsch. Da sich hier die Autorin auf Angular und nicht AngularJS bezieht ist die Aussage schlichtweg falsch, da für Angular TypeScript eingesetzt wird. Ein einziger Aufruf des Wikipedia Artikels zu Angular hätte gereicht um an diese Information zu gelangen.

Leider der mit Abstand schlechteste Artikel seit langem.

Antworten
Matthias

Websites, die sehr dynamisch erst im Browser generiert werden sind aus SEO Sicht sehr unvorteilhaft. Der Google Bot für zwar CSS und JS aus, aber wenn man sich so eine Seite mal in der Google Search Console mit dem Tool „Abrufen wie durch Google Bot“ ansieht, ist das nicht selten eine ziemlich leere Seite. Das sollte von Anfang an bei der Entwicklung berücksichtigt werden.

Antworten
C

Das ist aus zweierlei Gründen quatsch. Erstmals kann der Google Bot JavaScript. Mit JS dargestellte Seiten werden also in den Index wandern. ;-) Habe selbst mehrere Seiten im Einsatz.

Und zudem gibt es sowohl für Angular als auch für React Server Side Rendering.

Antworten
Otto

Der Artikel ist leider genauso falsch wie der zuvor über React (https://t3n.de/news/react-einstieg-856725/). Es wäre schön, wenn t3n wieder mehr Wert darauf legen würde, technisch kompetente Autoren zu beschäftigen… so etwas ist einfach nur lächerlich.

Antworten
Daniel

„Angular arbeitet mit HTML, CSS und Javascript, also verlangt es sehr wahrscheinlich nichts Neues von einem Entwickler. “

Das ist doch kompletter Nonsens. Selbst wenn wir von Angular 2/4 reden benötigt ein Entwickler Grundkenntnisse wie die Applikation aufgebaut ist. Ist ja nicht so als könne man einfach ein js file aufmachen und in gewohnter Manier Javascript schreiben. Da gehört ja schon etwas Mehr dazu.

„Für Angular spricht hingegen die Tatsache, dass das Framework alles Nötige für den Aufbau einer Website bietet und durch die Fokussierung auf HTML erst einmal einsteigerfreundlich ist. “

Einsteigerfreundlich? Ist das dein Ernst? Angular ist das komplette Gegenteil von einsteigerfreundlich. Alleine das Bootstrapping der Applikation ist nicht gerade trivial. (Die Angular-CLI vereinfach einiges und macht es Einsteigern zugänglicher, nichtsdestotrotz gehört es für einen Entwickler auch dazu grundlegende Prinzipien und Arbeitsweisen einer Technologie, eines Frameworks oder einer Library zu kennen und das ist bei Angular wohl um einiges komplexer)

Bei React im Gegensatz dazu fällt der Einstieg um einiges leichter. Selbst ohne CLI lässt sich ein Projekt ohne Weiteres fix aufsetzen ausbauen. Beim Hinzufügen von Komponenten und Services das gleiche Spiel -> React ist viel simpler als Angular.

Mit meinem Kommentar möchte ich weder Angular noch React gut oder schlecht darstellen, es geht lediglich um die falsche Darstellung im Artikel.

Antworten
Jens

Da habe ich mich so auf den Artikel gefreut und dann das.

Typescript wird gar nicht angesprochen irgendwie.

Ich finde Angular hat gerade am Anfang eine Steile Lernkurve. Am Anfang is es dann doch sehr holperig weil es einfach anders ist. Alleine das Setup ist ziemlich aufwendig.

Sich er das die der Autor mit beiden Frameworks Erfahrungen hat?

Antworten
Dirk Ecker

Den Artikel hätte man sich auch sparen können. Da gibt es bessere Vergleiche im Netz.

Antworten
Sven Budak

„Ein weiteres Problem sind die unterschiedlichen Versionen von Angular, die untereinander wenig kompatibel sind. Auch hier muss also im Vorfeld Konsens bestehen, mit welcher Version gearbeitet wird, damit das Projekt problemlos laufen kann.“

Das stimmt einfach nicht!… Die Autorin meint vermutlich AngularJS und Angular. Das sind 2 vollkommen unterschiedliche Frameworks. Ist klar das die nicht miteinander Kompatibel sind. Seit Version 2, bis heute sind Upgrades auf neuere Versionen mega easy und es gibt sogar einen Update Guide: https://update.angular.io/

Einfacher geht es kaum… Zumal man wirklich nur minimalste Anpassungen machen muss… Es ist so schade wie viele Artikel auf basis von Halbwissen geschrieben werden die wiederum neugierigen Entwicklern falsche Informationen liefern…

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige