Eine häufige Frage bei Entwicklern ist derzeit die Wahl des passenden Frameworks für das nächste Projekt. Die beiden „Marktführer“ — soweit man davon überhaupt bei Open Source sprechen kann — sind ohne Zweifel React und Angular (ich beziehe mich hier auf Angular ab Version 2).

Eine erste Idee, sich zu entscheiden, könnte die Beliebtheit sein. Was andere gut finden, kann per se nicht schlecht sein. Eine Frage an Google Trends zeigt Suchbegriffe auf:

Legende: Blau + Gelb = Angular, Rot = React

Hier muss man fairerweise bei Angular die Suche auf AngularJS ausdehnen, da die Namensgebung zwischenzeitlich angepasst wurde und viele Beiträge dies nicht berücksichtigen. Gedanklich lässt sich der blaue und der gelbe Balken zusammenfassen. Auf den ersten Blick ist Angular also der klare Gewinner. Schaut man genauer hin, hat React in letzter Zeit aber etwas mehr Dynamik.

Bibliothek oder Framework?

Hier gibt es die ersten klaren Unterschiede. React ist eine Bibliothek, Angular ein Framework. Der Claim der Opponenten zeigt dies:

React

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

Angular

One framework. Mobile & desktop.

Insofern ist der direkte Vergleich kaum sinnvoll — es ist wie Äpfel und Birnen vergleichen.

Generell bleibt die Aussage, dass React explizit für die Oberfläche zuständig ist und für alle anderen Applikationsbausteine Erweiterungen oder andere Bibliotheken herangezogen werden müssen. Angular ist ein vollständiges Framework, dass durch Plug-Ins erweitert werden kann, für die normale Anwendungsentwicklung aber alles mitbringt, was gebraucht wird.

Im Ergebnis ist React schlanker, einfacher und schneller zu erlernen. Angular hat definitiv eine sehr steile Lernkurve. Punkt für React? Nicht unbedingt, denn wer alles neu lernt, muss hier ggf. auch andere Bibliotheken ausweichen, die andere Konzepte und Programmierprinzipien haben und deshalb möglicherweise mehr Lernaufwand verursachen.

Sprache

Bei React steht JavaScript oder TypeScript zur Auswahl. Es ist definitiv möglich, ein reines JavaScript-Projekt umzusetzen, entsprechende Kenntnisse vorausgesetzt. Bei Angular ist die Benutzung von TypeScript praktisch alternativlos. Der Aufwand mit JavaScript ist derart hoch, dass das Projekt darunter wirklich leidet.

TypeScript bietet aber unbeschadet der Lernkurve deutliche Vorteile. Je größer und komplexer das Projekt, je mehr wird TypeScript unersetzlich.

Die Konzepte

Beide Lösungen bieten einen virtuellen DOM. Damit wird verhindert, dass Änderungen immer sofort zum Rendern (Neuaufbau) der Seite im Browser führen. Das steigert die Effizienz und erleichtert die Programmierung. Direkte DOM-Zugriffe à la jQuery sind in beiden Fällen tabu.

Bei Angular überwachen Wächter die Daten und aktualisieren den DOM bei Bedarf in einem Schritt. Dies kann man gut steuern, auch wenn dies bis ins letzte Detail betrachtet einigen Aufwand erfordert. Die Abstraktion erlaubt die Nutzung anderer Ausgabeformen, sodass mit Angular auch native App-Programmierung erfolgen kann. Ein Beispiel dafür ist die Zusammenarbeit mit Ionic.

React vergleicht DOM und virtuellen DOM und entscheidet dann, ob eine Aktualisierung erforderlich ist. Dazu wird das HTML vollständig in Objekten abgebildet. Das ermöglicht eine vollständige Abstraktion und damit eine Programmierung unabhängig vom Browser. React Native zeigt wie das bei mobilen Geräten aussieht.

Konzeptionell sind dies geringe Unterschiede, hier ist eher ein unentschieden als Ergebnis zu werten.

Setup und Deployment

Hier ist die Sache ziemlich klar. React wie üblich als .js-Datei einbinden, Code schreiben, fertig. Angular macht es deutlich komplexer. Zum einen muss TypeScript benutzt werden, was eine Übersetzung erfordert. Dann sind da ziemlich viele Dateien, Polyfills und Loader erforderlich. Ohne *npm und NodeJS geht gar nichts und in der Praxis ist ein Build-Werkzeug wie Gulp unersetzlich. Beim Deployment wird dann noch SystemJS oder WebPack benötigt. Ein langer Weg zu Ziel.

Beim Setup geht der Punkt klar an React. Allerdings ist vieles bei Angular ein einmaliger Aufwand am Anfang. Wer langfristig denkt, wird hier wenig Wert auf dies Aspekte legen, zumal komplexe React-Projekte später auch vergleichbare Werkzeuge erfordern.

Bei Deployment täuscht der erste Eindruck der Einfachheit bei React. Früher oder später sind hier auch viele Dateien zu verarbeiten. Dann ist man schnell auch bei WebPack und dann herrscht wieder Gleichstand.

Lernkurve

Wie bereits am Anfang erwähnt macht React den Einstieg einfacher. Aber da kommt schnell noch Redux ins Spiel, um Datenzustände außerhalb der Komponenten zu halten. Bei Angular ist RxJS Teil der Umgebung — beides mitnichten trivial.

Der schnelle Einstieg gelingt also eher mit React.

Anwendungskonzepte

Angular gibt viel für die Architektur vor. Die Beziehungen der Komponenten sind via Dienste und Dependency Injection klar geregelt und bequem nutzbar. Es ist eine ausgereifte, klassische und vielen Entwicklern vertraute Architektur. Wer Pattern kennt und Hochsprachen wie Java oder C# professionell nutzt, der wird Angular schnell verstehen.

React hat hier wenig zu bieten und mutet einfacher und konzeptloser an. Es gehört viele Erfahrung und Disziplin dazu, nicht ins Chaos abzugleiten.

Programmierung

Angular nutzt klassische Templates mit eigenen Attributen. Diese sind nicht HTML-konform, z.B. <li *ngFor="let item in items">{{item}}</li>. Ist ziemlich effektiv, muss man aber erst lernen.

React setzt auf JSX bzw. TSX auf, eine Sprache, bei der HTML direkt in JavaScript bzw. TypeScript eingesetzt wird. Das sieht so aus: var t = <li>Text im Element</li>. Anführungszeichen oder so braucht es nicht. Praktisch werden nicht wie sonst die aktiven Teile (JavaScript) ins HTML eingebettet, sondern das HTML wird ins JavaScript eingebettet. Ziemlich cool.

Etwas anders sieht es aus, wenn die Ausdrücke komplexer werden. Eine Schleife in Angular ist simpel:

<ul>
     <li *ngFor="let item of items; let i = index">
       {{i}} {{item}}
     </li>
</ul>

React hat keine eigenen Funktionen und man muss JavaScript schreiben:

let List = function({ items }) {
   return (
    <ul>
            {items.map(item => 
                <li key={item.id}>{item.name}</li>
            )}
        </ul>
    );
}

Da die Gestaltung oft als HTML vorliegt, ist die Integration in Angular einfacher, wenn es komplexer wird. JSX ist cool aber der Punkt geht — knapp — an Angular. Und es ist nicht ausgeschlossen, dass Angular JSX noch lernt. Umgekehrt sieht es eher schlecht aus. Das kann aber jeder anders empfinden, hier ist viel persönliche Erfahrung enthalten.

Bleibt noch da Thema Debugging. Hier wird schnell deutlich, dass Angular durch seinen Umfang und Komplexität das Leben etwas schwerer macht. Redux als Datenverteiler ist unidirektional und schnell zu debuggen. Angular tendiert zu komplexeren Gebilden mit Abhängigkeiten, deren Kontrolle Angular unterliegt. Das erhöht den Aufwand deutlich. Der Punkt geht an React diesmal.

Performance

Hier verweise ich auf einen Artikel mit Benchmarks verschiedener Lösungen. React ist etwas besser, aber Angular 2 robbt sich langsam an dieses ran. Kommt es auf die letzte Millisekunde an, geht der Punkt an React.

Community

Hilfe und Support gibt’s bei der Community. Die Größe ist hier entscheidend. Zuerst ein Blick auf React bei Github:

So ähnlich sieht es bei Angular aus:

Wie schon bei Google Trends hat React mehr Dynamik, bezieht man Angular die längere Historie und die Splittung in Angular 1 und 2+ mit ein, ist die Community bei Angular größer. Statistische Unsicherheit grob überschlagen, herrscht hier Gleichstand.

Stackoverflow als größter Entwickler-Community zeigt hier ein deutlicheres Bild aus der Praxis zugunsten Angular:

Fazit

Bei großen Projekten im Intranet punktet Angular. Der Anfangsaufwand ist schnell ausgeglichen und die Vorteile der Vollständigkeit und der Pattern kommen zu Tragen. Je komplexer die Software, je ähnlicher sie einer klassischen Desktop-Anwendung wird, desto mehr profitiert man von Angulars ganzheitlichem Anspruch.

Bei kleineren Projekten und Homepage-Projekten ist Zeit ein wichtiger Faktor. Schlank und schnell ist wichtig, ein wenig quick and dirty akzeptabel. Hier läuft React zur Höchstform auf. Das gilt auch für Projekte, die eine große Benutzeranzahl adressieren. Hier hängt der Erfolg oft an wenigen Millisekunden. Allerdings sollte hier React mit TypeScript benutzt werden.

Links

React oder Angular?