Warum ist React JS besser als Angular oder Vue JS?

Es ist allgemein bekannt, dass Webseiten hauptsächlich mit den Programmiersprachen HTML, CSS und JavaScript (den drei grundlegenden Bausteinen des Webs) erstellt werden. Insbesondere erstellt HTML Elemente auf Webseiten, wie Menüs, Texte und Felder. Während CSS verwendet wird, um diese Elemente auf Webseiten zu gestalten, zu gestalten und zu platzieren. Und schließlich JavaScript, das die Interaktion mit und Manipulation dieser Elemente erleichtert. Das Thema unserer Diskussion wird sich um JavaScript drehen; insbesondere React.Js und seine Überlegenheit gegenüber Angular und Vue.Js.

Zusammenfassend lässt sich sagen, dass React JS aufgrund seiner überlegenen Virtual DOM-Fähigkeiten, seiner robusten Community-Unterstützung, seiner umfangreichen Dokumentation, seiner schlanken Attribute, seiner überschaubaren Lernkurve und seiner Flexibilität, mobile Funktionen mit React Natives zu ermöglichen, besser ist als Angular oder Vue JS.

JavaScript: Die Glue-Sprache

Um einen Präzedenzfall für unseren Fall zu schaffen, der die Dominanz von React rechtfertigt, fassen wir einige Grundlagen zusammen. JavaScript wurde oft als Glue-Sprache identifiziert, die zum Zusammenbau anderer Komponenten verwendet wird. Von den drei Web-Bausteinen sind HTML und CSS weniger komplex (obwohl sie hauptsächlich für statische Designzwecke verwendet werden). Für Entwickler, die dynamische Webinhalte erstellen, hat JavaScript jedoch Priorität, was darauf hinweist, warum es viel größer und komplizierter ist als seine Zeitgenossen. Im Wesentlichen wird es zum De-facto-Standard, der auf den meisten Webseiten verwendet wird.

Folglich wurden in den letzten zehn Jahren mehrere Front-End-Frameworks auf der Grundlage von JavaScript entwickelt, um die Entwicklung und Wartung von Websites zu vereinfachen. Infolgedessen waren ab 2020 die beliebtesten dieser Front-End-JavaScript-Frameworks React und Vue, dann Angular.

Da wir kurz festgestellt haben, dass JavaScript und JavaScript-basierte Frameworks und Bibliotheken entscheidende Werkzeuge für die Webentwicklung sind. Um den Kontext für unseren Blog festzulegen, lassen Sie uns also kurz zurückgehen und die Geschichte und Entwicklung von JavaScript skizzieren.

Die Geschichte der Webtechnologien und Browser

Der erste Webbrowser wurde im Dezember 1990 mit Tim Berners-Lee als Hauptentwickler entwickelt und veröffentlicht. Gleichzeitig entwickelte und veröffentlichte er das Hypertext Transfer Protocol (HTTP), das Anwendungsprotokoll für das World Wide Web zur Indizierung und Navigation von Websites.

Später wurde 1993 der erste grafische Webbrowser Mosaic veröffentlicht. In ähnlicher Weise wurde im selben Jahr HTML entwickelt. Das war ein paar Jahre vor der Entwicklung von JavaScript, während CSS 1996 veröffentlicht wurde, ein Jahr nach JavaScript. Diese drei Sprachen bildeten später einen berühmten Technologie-Stack, der als „Triade der Technologien, die Webentwickler lernen müssen“ bezeichnet wurde.

Die Entwicklung von JavaScript

Einer der berühmten Nachfolger des Mosaic-Browsers war der Netscape Navigator-Browser, der 1994 veröffentlicht wurde. 1995 stellten die Entwickler des damals beliebten Netscape den Programmierer Brendan Elch ein, um eine neue dynamische Skriptsprache für Webseiten zu erstellen und clientseitige Manipulation von Daten.

Als Reaktion auf den Markt sah Netscape die Notwendigkeit, dynamische Websites zu erstellen, anstatt sich auf HTML zu beschränken. Leider verwendeten die meisten frühen Websites nur HTML und waren daher rechenineffizient. Daher war Netscape gezwungen, eine einfache Web-Skriptsprache zu entwickeln, die auf die DOM-Manipulation (Document Object Model) abzielt. Das Projekt wurde konsequent von der Funktionalität und Syntax von Java inspiriert – obwohl sie sich trotz einer geringfügigen syntaktischen Ähnlichkeit grundlegend unterscheiden.

JavaScript wurde offiziell im März 1996 veröffentlicht und ermöglichte schließlich neue Funktionen auf Webseiten, die HTML allein nicht leisten konnte. Beispielsweise das Reagieren auf Benutzereingaben, das Anzeigen von Popup-Fenstern und das Ändern der Farben von Elementen. Netscape wurde später von America Online (AOL) übernommen, dem auch Mozilla gehörte, was zum exponentiellen Wachstum von JavaScript als Internetstandard beitrug.

Die Entstehung von XML, AJAX und Single Page Applications

Später in den frühen 2000er Jahren waren Webbenutzer frustriert über langsame Serverantworten und lange Datenübertragungszeiten. Diese wurden durch die langsamen Internetverbindungen, die diese Ära prägten, noch verschlimmert. Das führte zur Entwicklung des AJAX-Technologiestacks (Asynchronous XML and JavaScript)

In dieser Hinsicht ist XML eine HTML-ähnliche Auszeichnungssprache, die jedoch zur Datendarstellung anstelle der Inhaltsanzeige verwendet wird. XML wurde innerhalb von JavaScript mit der Erstellung des AJAX-Stacks relevant.

AJAX wird oft als eine Sammlung mehrerer Technologien beschrieben, die als Ganzes gebündelt sind, und umfasst XHTML, CSS, DOM, XML, XLST, XML HttpRequest und JavaScript. Und innerhalb von AJAX bindet JavaScript alle anderen Tools zusammen . Folglich bot AJAX eine Möglichkeit, Teile einer HTML-Seite zu aktualisieren, ohne den gesamten Inhalt herunterzuladen.

Single-Page-Anwendungen

Im Allgemeinen übernehmen alle JavaScript-Frameworks die Prinzipien der Einzelseitenanwendung. In der Praxis ist eine Single Page Application (SPA) eine Anwendung, die aus einzelnen Komponenten besteht, die beim Besuch der ersten Seite in den Speicher geladen werden und dann unabhängig voneinander ersetzt oder aktualisiert werden können, sodass nicht die gesamte Webseite neu geladen werden muss bei jeder Benutzeraktion.

Darüber hinaus können Komponenten mit SPAs wiederverwendet werden, wodurch die benötigte Codemenge drastisch reduziert wird. Die erste Single-Page-Anwendung wurde 2002 implementiert, wobei JavaScript als eine der Zielsprachen für die Implementierung vorgesehen war. Der Erfolg von Single-Page-Applikationen war vor allem der Vorgängertechnologie AJAX und deren Vorrang in der Serverkommunikation zu verdanken.

Die JavaScript-HTML-Beziehung

HTML kann entweder als Ergänzung zu JavaScript funktionieren, wie bei jQuery; oder als integrierte, HTML-ähnliche Syntax, die in HTML-Elemente kompiliert wird. Eine Instanz davon ist die JSX-Syntax, die für die Verwendung bei der Entwicklung mit React empfohlen wird. Es ist weder reines JavaScript noch HTML, sondern eine Verschmelzung von beidem. Also im Grunde die Integration der grundlegenden Elementerstellung und der strukturellen Funktionalität von HTML mit den dynamischen Fähigkeiten von JavaScript.

CSS-HTML-Beziehung

CSS wird häufig in Kombination mit JavaScript verwendet. Ein traditionelles Beispielformat ist die Implementierung von CSS-Eigenschaften in separaten .css-Dateien. Das andere Format besteht darin, CSS über spezialisierte Bibliotheken wie CSS-in-JS und Styled-Components in die JavaScript-Frameworks selbst zu integrieren. Solche Bibliotheken ermöglichen es Entwicklern, JavaScript-Code zu schreiben, der visuelle Elemente mit CSS-ähnlicher Syntax gestaltet, die dann normalerweise im Browser in reines CSS kompiliert werden.

Die Entstehung einer serverseitigen Implementierung von JavaScript

Schließlich kam 2009 mit der Veröffentlichung von Node.js, einer serverseitigen Implementierung von JavaScript. Node.js erweiterte die JavaScript-Domäne auf das Back-End, wodurch JavaScript zu einer Full-Stack-Sprache wurde.

Node.js ist derzeit die am häufigsten verwendete JavaScript-Laufzeitumgebung, die zum Ausführen von JavaScript-Code außerhalb der Webbrowserumgebung verwendet wird. Die Entwickler von Node.js, das für serverseitige Funktionen verwendet wird, wollten eine effizientere Alternative zum damals beliebten Apache HTTP Server (oft mit PHP verwendet) entwickeln. Node.js wurde mit der V8-JavaScript-Engine von Google erstellt, die selbst mit C++ erstellt wurde.

Front-End-JavaScript-Frameworks

Da wir das Fundament gelegt haben, können wir jetzt die Steine ​​legen und uns mit den Gründen für unsere Neigung zu React.js befassen.

Frameworks versus Bibliotheken

Ein häufiges Argument ist, was als Bibliothek gilt, wenn man über dieses JavaScript-Trio spricht. Ironischerweise wird React gelegentlich als Bibliothek und manchmal als Framework bezeichnet. Aus Gründen der Klarheit und Konsistenz ist es jedoch oft sinnvoll, Frameworks von Bibliotheken zu trennen.

Insbesondere ist eine Bibliothek eine passive Sammlung nicht flüchtiger Ressourcen, bei der Entwickler die Kontrolle darüber erhalten, wie die Ressourcen verwendet werden. Sie sind in der Regel sehr einfach und erfüllen nur eine bestimmte Aufgabe und können daher als Werkzeuge klassifiziert werden.

Während Frameworks so konzipiert sind, dass sie weniger passiv sind und Entwickler zwingen, Dinge auf eine bestimmte Weise zu tun, indem sie ein Skelett für Entwicklungszwecke nutzen und einen Kontrollfluss erzwingen. Beispielsweise wird einem Entwickler eine definierte Möglichkeit geboten, eine ganze Webanwendung zu entwickeln und einzurichten. Während eine Webanwendungsbibliothek dies nicht tut, bietet sie stattdessen einfachere Subdomain-Operationen wie Netzwerkanfragen oder Styling-Operationen.

Obwohl Vue und Angular technisch gesehen Frameworks sind, gibt es immer noch Meinungsverschiedenheiten darüber, ob React ein Framework oder eine Bibliothek ist. Während die ursprünglichen Entwickler von React es als Bibliothek bezeichnen, wird es immer noch häufiger als Framework verwendet.

Warum React die dominante Alternative ist!

Im Nachhinein wurde React als JavaScript-Port von XHP (einer von Facebook erstellten PHP-Bibliothek) entwickelt. Im Allgemeinen war XHP eine Modifikation von PHP, die die Erstellung benutzerdefinierter Komponenten ermöglichte und darauf abzielte, böswillige Benutzerangriffe zu verhindern. Aus diesem JavaScript-Portierungsprojekt entstand später JSX (JavaScript XML), das zu einer gemeinsamen Standardsprache für React wurde.

Alles in allem hat React einen engeren Anwendungsbereich als seine Kollegen und rendert nur die Benutzeroberfläche der Anwendung. Es behält jedoch den Vorteil einer leichten Struktur bei und ist daher weniger kostspielig zu erlernen und zu verwenden. Davon abgesehen kann es immer noch als Framework betrachtet werden, da es für den gleichen Zweck wie Vue und Angular verwendet wird.

Überragende virtuelle DOM-Fähigkeiten.

React war das erste Framework, das seine Funktionalität gemäß dem DOM optimierte. Dies war ein Faktor, der zu seinem Erfolg beitrug, da die DOM-Manipulation in Bezug auf die verwendeten Rechenressourcen ziemlich kostspielig ist. Insbesondere wurde React entwickelt, um so wenig DOM-Manipulation wie möglich durchzuführen, indem intuitives Zustandsmanagement und das virtuelle DOM verwendet werden, um diese Manipulation zu kontrollieren.

Diese Ausnutzung des virtuellen DOM macht die React-Aktualisierung schneller, auf Kosten der Speicherbelastung. Und um schnelle Aktualisierungen des Browser-DOMs auszuführen, behält React eine Kopie des virtuellen DOM-Baums im Arbeitsspeicher bei, was zusätzlichen Arbeitsspeicher verbraucht. Folglich brachte die Popularität von React zahlreiche Spinoff-Bibliotheken wie React Native für die mobile Entwicklung hervor.

Datenfluss in eine Richtung

In React sollen die Daten nach unten fließen und werden als unidirektionaler Datenfluss bezeichnet. Während die bidirektionale Datenbindung von Angular und Vue den Code schöner und einfacher macht, gleicht React dies durch überlegene Verwaltbarkeit und Leistung aus. Ein bemerkenswerter Vorteil in unserer Argumentation.

Warum reagieren besser ist als eckig

Machen wir einen Fall-zu-Fall-Vergleich für mehr Kontext, oder? Angular ist für die Entwicklung größerer Anwendungen gedacht und ist ein voll ausgestattetes JavaScript-Framework in Bezug auf Programmierfunktionen und Dateigröße.

Im Vergleich zu React weist Angular jedoch negative Aufblähungs-, Komplexitäts- und schwere Entwicklungsmerkmale auf. Es wird für kleinere Entwicklungsprojekte empfohlen und weist eine steile Lernkurve auf. Erschwerend kommt hinzu, dass AngularJS nicht mehr aktiv weiterentwickelt wird.

Angular ist vollständig in TypeScript erstellt und erfordert viel Code, was es etwas kompliziert macht. Im Gegenteil, React ist ziemlich „einfach“ und seine ursprüngliche Ausrichtung konzentriert sich auf die Kontrolle und Manipulation der Ansicht. Im Wesentlichen ermöglicht es dem Entwickler, genau das auszuwählen, was er benötigt, aber es bietet auch die Möglichkeit, eine große Anzahl von Paketen von Drittanbietern zu verwenden. Folglich beinhaltet React im Vergleich zu Angular nicht viel Overhead.

Warum React besser ist als Vue

Vue.js wurde von Google-Mitarbeiter Evan You erstellt. Evan war von AngularJS inspiriert, wollte aber eine schlankere, verbesserte Version davon erstellen. Trotz seiner leichten Eigenschaften, der großartigen Leistung und des netten Programmierstils ist der negative Aspekt von Vue seine Ungeschicklichkeit. Hier zeigt sich die Überlegenheit von React.

Beispielsweise gibt es in Vue.js im Gegensatz zu React keine klare Best Practice, was die Wartung großer Anwendungen erschweren kann. Die Best Practices für React sind jedoch in der Community zu finden. Das Erstellen eines praktikablen Workflows wird beispielsweise durch das offizielle Paket create-react-app ermöglicht. Aufgrund der oben genannten Punkte bietet React die Möglichkeit, viel komplexen Code zu schreiben und zu warten.

ES6-Syntax

Darüber hinaus können Entwickler mit Vue auch die ES6-Syntax nutzen, allerdings ist React in dieser Hinsicht optimaler gestaltet als Vue. Während Vue derzeit TypeScript-Unterstützung bietet, ist seine Unterstützung nicht so gut ausgearbeitet wie React mit CRA (Create React App) mit TS-Unterstützung in einem einzigen Befehl. Darüber hinaus benötigen wir bei Vue noch einige Pakete von Drittanbietern mit benutzerdefinierten Decorators und Funktionen, um eine echte, vollständige TypeScript-Anwendung zu erstellen. Und leider enthält die offizielle Dokumentation nicht alle Informationen, die für den Einstieg erforderlich sind. Ein weiterer React-Vorteil!

Während wir unsere Argumentation untermauern, lassen Sie uns die Diskussion weiter aufschlüsseln, indem wir bestimmte Benchmarks klarer verwenden.

1. Rahmengröße

Obwohl die Größe des minimierten Pakets eines Frameworks in der npm-Registrierung wahrscheinlich keinen Entwickler davon abhalten oder ermutigen wird, das Framework auszuwählen, kann es dennoch unsere Argumentation unterstützen. Angular ist deutlich größer als die anderen (187,6 kB), während React 6,4 kB groß ist und Vue mit 63,5 kB irgendwo dazwischen liegt.

Im Allgemeinen zeigt der Vergleich der Paketgröße, dass Angular eine größere Bandbreite an Funktionen unterstützt und enthält, während React für eine optimierte Entwicklung ausgelegt ist. Die Natur von React gibt dem Entwickler daher weniger Möglichkeiten, die Effizienz zu verbessern, was für kleinere Projekte von Vorteil ist.

Darüber hinaus führt die komplizierte Struktur von Angular zu einem potenziellen Risiko einer schlechten Leistung im Vergleich zu React oder Vue, insbesondere bei der Speicherallokation.

2. Entwicklungserfahrung, Lernkurve und Verfügbarkeit

Im Allgemeinen ist TypeScript an sich nicht viel schwieriger oder einfacher zu lernen als JavaScript. Es ist jedoch nicht so weit verbreitet und enthält weniger Bibliotheken und Gesamtdokumentation als JavaScript. Diese Faktoren, zusammen mit den Unterschieden in der Syntax und der Zeit, die benötigt wird, um sich an die Codierung in einer etwas anderen JavaScript-Variante zu gewöhnen, bieten React einen leichten Vorteil gegenüber Angular.

3. Die sprachliche Situation

Ein weiterer wichtiger Punkt ist, dass React und Vue JavaScript ES6 als Basissprache verwenden. ES6 ist der neueste JavaScript-Industriestandard aus dem Jahr 2015. Andererseits nutzt Angular 1 JavaScript ES5, die Vorgängerversion, während Angular 2 auf TypeScript basiert.

Obwohl TypeScript es Entwicklern ermöglicht, das traditionelle JavaScript-Programmierformat loszuwerden, hat es jedoch nur begrenzte Benutzergemeinschaften. Dies bedeutet, dass ein potenzielles Risiko besteht, dass TypeScript verschwindet, wenn eine weitere neue syntaktisch strikte Obermenge von JavaScript erscheint. Im Gegenteil, JavaScript ES6 wird nicht so schnell verschwinden, da es das aktuelle Branchenkriterium bei der Entwicklung in JavaScript ist.

4. Dokumentation

Ehrlich gesagt ist die Verfügbarkeit der Dokumentation für alle diese Frameworks zufriedenstellend. Trotzdem ist es bemerkenswert, dass die Dokumentation von React in den meisten Sprachen (16) verfügbar ist. Vue fällt mit einer Dokumentation in 8 Sprachen zurück, während die Angular-Dokumentation in 4 Sprachen verfügbar ist. Die React-Dokumentation ist kohärent und hat die Theorie in der Bereitstellung für verschiedene Entwickler vereint.

Leider kann die Framework-Situation von Angular für einen Entwickler einige Schwierigkeiten bereiten, da es zwischen AngularJS und Angular 2 aufgeteilt ist. Außerdem kann der Begriff „Angular“ manchmal so zweideutig klingen, auf welches Framework er sich in Online-Kontexten bezieht. Besonders beim Surfen auf kleineren Websites und kürzeren Antworten.

5. Community-Unterstützung

Zum größten Teil hat React derzeit wohl die größte Community-Unterstützung unter allen JavaScript-Frameworks. Dies wird durch die Breite seiner Diskussionsforen und Chatrooms veranschaulicht. Außerdem können Benutzer die neuesten Nachrichten verfolgen und an der Diskussion auf Facebook und Twitter teilnehmen.

Svelte Framework (Eine lobende Erwähnung)

Wir hielten es für klug, einen relativ neuen Einstieg in die JavaScript-Sphäre zu erwähnen. Svelte wurde von Rich Harris entwickelt und erstmals 2016 veröffentlicht. Svelte erlangte im Laufe des Jahres 2019 enorme Popularität. Es führte mehrere Verbesserungen in JavaScript ein, wie z. B. Änderungen bei der Handhabung lokaler Zustände.

Es ist auch erwähnenswert, dass Svelte kein virtuelles DOM hat und geschriebenen Code zur Build-Zeit und nicht zur Laufzeit in JavaScript konvertiert. Im Wesentlichen umgeht es die Konvertierung deklarativer Elemente in das echte DOM.

Zusammenfassung

Obwohl Vue etwas mehr Github-Sterne hat, ist React immer noch überlegen, ohne erkennbare Schwächen und bessere Leistungsstärken. Im Wesentlichen bedeutet eine bessere Leistung kürzere Ladezeiten und eine höhere Benutzerzufriedenheit. Darüber hinaus führt dies für kommerzielle Websites zu Umsatzsteigerungen, da eine Verkürzung der Ladezeit um einige Millisekunden die Benutzerinteraktion und -bindung erhöhen kann.

Letztendlich ist die Zukunft der JavaScript-Framework-Landschaft schwer vorherzusagen. Obwohl es Hinweise darauf gibt, wird React wahrscheinlich auf absehbare Zeit das dominierende Framework bleiben. Für Entwickler, die Anwendungen entwickeln möchten, die ein ausgereiftes, gut unterstütztes Framework mit hervorragender Leistung und umfangreicher Dokumentation verwenden, ist React jedoch die bessere Wahl!