React vs Angular: was ist besser?
Die Programmierung von Internetapplikationen hat in den letzten Jahren einen grundlegenden Wandel erfahren. Wo früher ganze Pakete (PHP/JS/Apache Server oder Java/JS/Tomcat) notwendig waren, um komplexe Internetseiten zu entwickeln, ist es dank der Einführung moderner Javascript-Framework nun möglich, beliebige Programmiersprachen und Systeme miteinander zu verschmelzen und mit einem Frontend zu versehen.
Wo früher die klassische serverseitige Entwicklung für das Backend (PHP, Java) und clientseitige Entwicklung für das Frontend standen (natives Javascript), wird heute möglichst viel mit Javascript gemacht. Dabei hat sich Node als Standard für die serverseitige Architektur etabliert und Angular, React und Vue für (aber nicht nur) das Frontend.
Grundsätzliches
Grundsätzlich werden die beiden Bibliotheken für die Softwareentwicklung von sogenannten Single-Page-Anwendungen (SPAs) verwendet, webbasierten Anwendungen, die nur HTML-Dokumente vom Server holen und den Inhalt nachladen. In der klassischen Webprogrammierung werden Inhalte nach Nutzeraktionen (z.B. Klicks) durch einen Page-Refresh neu vom Server geladen. Moderne Frameworks erlauben hingegen das dynamische Nachladen.
Auf diese Weise werden kleinere Anwendungen nicht durch ein schwergewichtiges Framework überlastet.
Vorteile des Einsatzes eines Frameworks sind auch, dass alles in einem bewährten Rahmen abläuft und dass in der Regel Communities dahinter stehen, die es pflegen.
Nachteile liegen sicherlich in der Komplexität und Erlernbarkeit.
Durch klare Formen erleichtern Frameworks auch das Schreiben von sauberem, durch Muster (z.B. MVC) strikt getrennten Code und eliminieren so häufige Fehlerquellen. Sie versuchen so die Wartbarkeit des Codes mit Hilfe verschiedener Entwurfsmuster zu erreichen.
Da die Anforderungen an die Entwickler in SPAs viel höher sind, wird die Verwendung eines Frameworks dringend empfohlen. Dazu kommt, dass die meisten Frameworks frei verfügbar sind und es beispielsweise erlauben, sichere HTML-Fragmente als wiederverwendbare Komponenten zu kapseln, so dass sie in späteren Anwendungen wiederverwendet werden können. Darüber hinaus kann der Traffic-Verbrauch reduziert werden, da Serveranfragen nur die erforderlichen Daten liefern. Als Nachteil kann ein höherer Entwicklungsaufwand angeführt werden.
Gemeinsamkeiten
Beide bieten ein Grundgerüst für die Webentwicklung. Sie sind komponentenbasiert und bieten die Möglichkeit, eine Applikation in kleinere Komponenten zu zerlegen und mit einer konsistenten API zu schreiben. Der große Vorteil der Komponenten besteht darin, dass sie wiederverwendet, wieder zusammengesetzt und einzeln getestet werden können.
Beide Frameworks bieten eine ausgereifte, klassische Architektur für die Entwicklung in Javascript. Mit dieser Architektur können plattformübergreifende Anwendungen für Windows, Mac und Linux entwickelt werden. Im Vergleich zu nativen Anwendungen führt diese Architektur aber auch zu größeren Anwendungen und einem höheren Ressourcenverbrauch. Beide Frameworks unterliegen dabei der MIT-Lizenz und sind damit kostenlos für jeden nutzbar. Gemeinsam ist ihnen ebenfalls, dass beide eine große Community hinter sich haben, die die Frameworks pflegen.
Angular
Das beliebte JavaScript-Framework wurde von Google erstellt und erfreut sich einer großen Community. Es ist keine einfache Bibliothek, sondern ein ganzes Framework und nicht nur auf die speziellen Applikationen zur Anzeige von Webseiten im World Wide Web Browser beschränkt.
Durch die Verwendung von Typescript hat das Framework eine ähnliche Typsicherheit, wie sie die Entwickler von anderen Sprachen wie C# oder Java kennen. TypeScript ist eine von Microsoft entwickelte Programmiersprache, eine Obermenge / Erweiterung von Javascript. Der Code steht unter der Apache-Lizenz und der Quellcode ist auf GitHub verfügbar. In Typescript spielen Typen eine sehr große Rolle. Denn hier ist es Standard, jeder Variablen und auch typisierten Funktionsparametern und Ausgaben im Voraus einen Typ zuzuweisen.
React
Das von Facebook entwickelte JavaScript Framework ist eine Software-Bibliothek, die ein Grundgerüst für die Ausstellung von Komponenten der Benutzeroberfläche von Websites (Web-Framework) bietet: Komponenten sind hierarchisch aufgebaut und können in seiner Satzstruktur auch als definierte HTML-Tags dargestellt werden.
Es ist somit auch ein User-Interface-Framework und primär für die Darstellung (View) und die Interaktion verantwortlich. Das Framework ist normalerweise die Basis für einseitige Webanwendungen, kann aber auch serverseitig mit Hilfe von Node.js (vor)gerendert werden.
Unterschiede
Der entscheidende Unterschied ist sicherlich, dass Angular ein Framework ist und React nur eine Bibliothek. Dabei konzentriert sich letzteres auf die Benutzeroberfläche, während ersteres einen kompletten Ansatz wählt, also Model, Controller und View nach dem MVC-Prinzip gleichzeitig zur Verfügung stellt.
Während Angular einen Full-Service-Ansatz verfolgt, der dem Frontend-Entwickler eine ganze Reihe von Funktionen aus einer einzigen Toolbox zur Verfügung stellt, konzentriert sich React auf die drei Kernkomponenten unidirektionalen Datenfluss (One Way Data Flow), Virtual DOM und JSX (Javascript-XML). Es arbeitet dazu mit einem virtuellen DOM, was den Aufwand für die Änderung des tatsächlichen DOM extrem gering hält.
Syntax
- Da Angular in TypeScript geschrieben ist, wird empfohlen, TypeScript auch für die Entwicklung zu verwenden. Dazu muss es zunächst einmal erlernt werden. Um mit dem Framework arbeiten zu können, bedarf es daher einer gewissen Einarbeitungszeit.
- React benutzt JSX, was nativen Javascript-Entwicklern aber geläufig sein sollte. Im Vergleich ist daher die Einarbeitungszeit einfacher und bedarf keiner so großen Vorbereitung.
Integration
- Angular bietet ein Grundgerüst für die Erstellung von Webanwendungen und erfordert keine zusätzlichen Bibliotheken. Es ist aufgrund des gegebenen Rahmens relativ starr und unflexibel, da es ein komplettes Framework ist.
- React alleine reicht in der Regel nicht aus, um eine Webanwendung zu erstellen, daher wird in den meisten Fällen die Verwendung zusätzlicher Bibliotheken empfohlen. Dadurch ist es aber wiederum flexibel und lässt sich leichter in bereits bestehende Applikationen integrieren.
Fazit
React wird für Projekte empfohlen, deren Ergebnisse Frontend-lastig und interaktiv sind. Da es nicht vorgibt, klare Formen zu haben, ist nur die Zusammenarbeit des Entwicklungsteams notwendig.
Angular hingegen bietet klare Strukturen und viele Funktionen. Dies ermöglicht es Angular-affinen Entwicklungsteams, sich an die Arbeit zu machen, ohne dass sie Formulare definieren oder nach zusätzlichen Bibliotheken suchen müssen.
Was ist nun besser?
Es kommt auf die Anwendung an: Eine Anwendung, die sich stark auf Frontend-Entwicklung konzentriert, viele interaktive Elemente hat oder in bereits bestehende Applikationen integriert werden soll, ist bei React besser aufgehoben.
Wenn eine Applikation, besonders dann, wenn sie auch anspruchsvollere Backend-Elemente besitzt, neu entwickelt werden soll, fährt man sicherlich mit Angular besser. Wer bereits TypeScript kann, wird sicherlich auch eher dazu tendieren als jemand, der es erst erlernen muss.
Interessante Links:
Ein Vergleich der JavaScript Frameworks auf entwickler.de
Ein paar Unterschiede von React.JS und Angular.JS auf t3n
Bilder: Canva
Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.
Schreibe einen Kommentar