Ein Vergleich zwischen Angular und React und ihren Kernsprachen

In diesem Artikel werden wir zwei der beliebtesten Webtechnologien im Jahr 2019 vergleichen und auch deren Verlauf, Hauptunterschiede, empfohlene Kernsprachen (TypeScript und JavaScript) usw. behandeln. Insgesamt haben diese Technologien es Entwicklern erheblich erleichtert, Code wiederzuverwenden, umzugestalten und zu warten, indem sie Dinge in Module / Komponenten aufteilen.

Das Ziel dieses Artikels ist nicht, die beste Technologie zu finden, sondern einige Missverständnisse zu vergleichen, hervorzuheben und zu klären. Wir werden uns auch auf das konzentrieren, was wichtig ist, anstatt auf kleine Details, die auf lange Sicht nicht wirklich wichtig sind.

Sie sollten sich bewusst sein, dass der Vergleich zwischen diesen beiden Technologien nicht vollständig abgedeckt werden kann. Angular wird mit einem vollständigen Framework (MVC) geliefert, während React eine Fronted-Library mit vielen Open-Source-Paketen ist, in die integriert werden kann.

Wenn Sie ein besserer Webentwickler werden, ein eigenes Unternehmen gründen, andere unterrichten oder einfach Ihre Entwicklungsfähigkeiten verbessern möchten, abonnieren Sie meinen Newsletter, um die neuesten Webnachrichten und Updates zu erhalten.

Zu beantwortende Fragen

  • Was sind die Hauptunterschiede zwischen Angular und React?
  • Was macht TypeScript so besonders?
  • Wie beliebt sind diese Technologien?
  • Wie ist der aktuelle Open-Source-Status?
  • Welche Technologie nutzen Unternehmen am häufigsten?
  • Beeinflussen statisch typisierte Sprachen die Codequalität und die Entwicklungszeit?

Zukünftige Abschnitte werden basierend auf der Nachfrage aus den Kommentaren hinzugefügt.

Schlüsselvergleiche

Hier ist ein schneller Vergleich zwischen Angular (links) und React (rechts).

Eine wirklich großartige Sache an React in Bezug auf die Leistung ist das virtuelle DOM, von dem Sie wahrscheinlich schon ein paar Mal gehört haben. Wenn nicht, mach dir keine Sorgen, ich werde es erklären!

Problem

Angenommen, Sie möchten das Geburtsdatum eines Benutzers innerhalb eines Blocks von HTML-Tags aktualisieren.

Virtuelles DOM

Es wird nur der Teil aktualisiert, der erforderlich ist, indem die Unterschiede zwischen der vorherigen und der aktuellen HTML-Version erkannt werden. Es ist ein ähnlicher Ansatz wie GitHub beim Erkennen von Änderungen in der Datei.

Normales DOM

Es wird die gesamte Baumstruktur von HTML-Tags aktualisiert, bis das Geburtsdatum erreicht ist.

Warum spielt es eine Rolle?

Für das oben beschriebene Problem spielt es möglicherweise keine Rolle. Wenn wir jedoch 20 bis 30 asynchrone Datenanforderungen auf derselben Seite bearbeiten (und für jede Seitenanforderung den gesamten HTML-Block ersetzen), wirkt sich dies sowohl auf die Leistung als auch auf die Benutzererfahrung aus.

Benötigen Sie mehr Kontext? Schauen Sie sich Daces Artikel an!

Aber zuerst zurück zum Anfang ...

Geschichte

Wir müssen ein bisschen Geschichte (Kontext) kennen, weil es Einblick gibt, wie sich die Dinge in Zukunft entwickeln könnten.

Ich werde nicht auf die Details eingehen, was genau zwischen Angular und AngularJS passiert ist, und ich bin sicher, dass es viele Ressourcen gibt, die dies abdecken. Kurz gesagt, Google hat AngularJS durch Angular und JavaScript durch TypeScript ersetzt.

Okay, also in den Tagen mit ES4 / ES5 war die Lernkurve für JavaScript wirklich hoch. Wenn Sie aus der Welt von Java, C # oder C ++, einer Welt der objektorientierten Programmierung (OOP), gekommen sind, war das Erlernen von JavaScript einfach nicht so intuitiv. Mit anderen Worten, es war ein Schmerz im Arsch.

Das liegt nicht daran, dass die Sprache schlecht geschrieben wurde, sondern daran, dass sie einen anderen Zweck hat. Es wurde entwickelt, um die asynchrone Natur des Webs wie Benutzerinteraktion, Ereignisbindung, Übergänge / Animationen usw. zu bewältigen. Es ist ein anderes Tier mit unterschiedlichen Instinkten.

Popularität

Wie Google Trends zeigt, sind Angular und React 2019 zwei der beliebtesten Webtechnologien.

Angular hat mehr Suchtreffer als React, bedeutet jedoch nicht unbedingt, dass einer besser ist als der andere. Dies zeigt jedoch, was die Leute interessant finden, was auch immer der Grund sein mag. Es ist wichtig zu wissen, dass Personen zwischen Schlüsselwörtern wie AngularJS oder Angular mischen können und daher zu höheren Suchtreffern führen.

Eines ist sicher - beide Technologien wachsen und die Zukunft sieht rosig aus. Das heißt, Sie müssen sich keine Sorgen machen, wenn eine Technologie ausfällt, und Sie zurücklassen.

Es ist wichtig, dass wir die Geschichte in Bezug auf das, was zwischen AngularJS und Angular passiert ist, nicht vernachlässigen, da die Geschichte eine Art Hinweis darauf ist, was in Zukunft passieren könnte. Wenn Sie jedoch Erfahrung mit Angular und AngularJS haben, werden Sie höchstwahrscheinlich sehen, warum die Entscheidungen zum Besseren getroffen wurden. Um nur zu erwähnen, dass solche Dinge mit allen Frameworks da draußen passieren können, einschließlich React.

Open Source

React hat über 100.000 Sterne, 1200 Mitwirkende und fast 300 Probleme, die darauf warten, gelöst zu werden.

React hat einen Time-to-Market-Vorteil, da es 3 Jahre vor Angular veröffentlicht wurde. Und das bedeutet, dass es mit vielen realen Problemen konfrontiert war, kritische Tests durchlaufen hat und sich insgesamt zu einer anpassungsfähigen und flexiblen Fronted-Bibliothek entwickelt hat, die viele lieben.

Wenn es um Angular geht, können wir auf den ersten Blick deutlich sehen, dass Angular sechsmal mehr Probleme hat als React (nicht gut). Wir dürfen jedoch nicht vergessen, dass Angular ein viel größeres Framework ist und von weniger Entwicklern (derzeit) verwendet wird, da es 2016 veröffentlicht wurde.

Statistiken von der Angular and Reacts GitHub-Seite.

Welche Unternehmen verwenden

React wurde ursprünglich bei Facebook für Facebook entwickelt, um die Entwicklung von Komponenten zu optimieren und zu vereinfachen. Ein Artikel von Chris Cordle weist darauf hin, dass React bei Facebook eine höhere Nutzung hat als Angular bei Google.

Wer nutzt welche Technologie?

# Reagieren

  • Facebook
  • AirBnb
  • Uber
  • Netflix
  • Instagram
  • WhatsApp
  • Dropbox

# Winkelig

  • Eat24
  • CVS-Shop
  • Onefootball
  • Google Express
  • NBA
  • Delta
  • wix.com
Wenn Sie große (bekannte) Unternehmen kennen, die Angular verwenden, teilen Sie diese bitte mit einem Link.

TypeScript und JavaScript (ES6 +)

Wie ich bereits erwähnt habe, kann es irreführend sein, nur Angular und React zu vergleichen, ohne sich auf die Kernsprache zu konzentrieren, die jeder hervorhebt (gemäß seinen Dokumenten).

Hinweis! In diesem Abschnitt wird nicht entschieden, ob wir Angular oder React wählen. Klären Sie jedoch einige Missverständnisse zwischen statisch und dynamisch typisierten Sprachen, die seit einiger Zeit mit Recherchen unterstützt werden.

In Bezug auf die Benutzerbasis ist JavaScript überlegen. Aber TypeScript nimmt rasant zu. Wer weiß also, was 10 bis 15 Jahre bringen werden?

TypeScript Popularität in den letzten 5 Jahren

JavaScript-Popularität in den letzten 5 Jahren

JavaScript vs TypeScript Popularität in den letzten 5 Jahren

TypeScript wurde ursprünglich von Microsoft entwickelt, um JavaScript zu vereinfachen (mit anderen Worten, um ES5 zu vereinfachen). Es wurde im Oktober 2012 veröffentlicht. Und es ist einfach ein Transpiler, der TypeScript in JavaScript-Code kompiliert, was auch bedeutet, dass Sie ES5-Code in eine TypeScript-Datei schreiben können. TypeScript wird als Obermenge von JavaScript bezeichnet.

Im Allgemeinen bietet TypeScript einen reibungslosen Übergang für Programmierer mit einem objektorientierten Programmierhintergrund (OOP). Es ist wichtig zu beachten, dass TypeScript im Zeitraum von ES5 veröffentlicht wurde und während dieser Zeit ES5 keine klassenbasierte OOP-Sprache war.

Kurz gesagt, das, was man damals Klassen und Objekten am nächsten kommen konnte, war die Vererbung von Prototypen. Und wie wir wissen, war dies für die meisten Entwickler mit OOP-Hintergrund ein schwieriger Übergang. Die ideale Entscheidung war also natürlich, etwas zu wählen, mit dem Sie sich wohl und vertraut fühlten, wahrscheinlich TypeScript.

In den letzten Jahren hat JavaScript jedoch viele wichtige Änderungen wie Module, Klassen, Spread-Operatoren, Pfeilfunktionen, Vorlagenliterale usw. entwickelt und implementiert. Insgesamt können Entwickler deklarativen Code schreiben und dabei die Merkmale einer echten OOP-Sprache (einschließlich einer klassenbasierten Struktur) unterstützen.

Statisch und dynamisch typisierte Sprachen

Eine statisch typisierte Sprache bedeutet im Grunde, dass Sie den Variablentyp (Zeichenfolge, Nummer oder Array usw.) definieren können. Sie fragen sich vielleicht, warum dies wichtig ist. Hier ist eine reale Analogie, die ich eingerichtet habe (Kreativität von ihrer besten Seite).

Angenommen, Sie möchten Ihr Auto mit Benzin tanken. Wichtig ist, mit dem richtigen Benzin zu tanken - Benzin oder Diesel. Und wenn Sie es nicht wissen, müssen Sie möglicherweise ein neues Auto kaufen.

Natürlich ist der Schweregrad bei der Codierung nicht so, in einigen Fällen kann dies jedoch der Fall sein. Denk darüber nach. Wenn Sie mit einer großen Anwendung arbeiten, möchten Sie das übergebene Argument und den Eigenschaftstyp kennen, andernfalls können Sie den Code beschädigen.

Okay, wenn Sie immer noch verwirrt sind, was statisch typisiert bedeutet, überprüfen Sie Folgendes:

Statisch typisierte Eigenschaft

Statisch typisiertes Argument

Ich habe gelernt, dass viele Leute glauben, dass eine statisch typisierte Sprache zuverlässigen Code bedeutet und am häufigsten als gewinnbringendes Argument für dynamisch typisierte Sprachen verwendet wird. Und ehrlich gesagt ist es ziemlich schwierig, diese Aussage zu widerlegen, da sie im Wesentlichen von der Entwicklungsumgebung, der Erfahrung der Programmierer und natürlich den Projektanforderungen abhängt.

Glücklicherweise hat die Forschung (tl; dr video) dies ernst genommen und diesen Mythos mit 49 Probanden auf die Probe gestellt.

Die Beobachtungen aus der Forschung sind:

  • Statisch typisierte Sprache benötigt aufgrund der Behebung von Tippfehlern mehr Zeit
  • Dynamisch typisierte Sprache ist lesbar und einfacher zu schreiben (deklarativer Code)

Abbildung 5 zeigt, dass Entwickler ihre Entwicklungszeit beim Schreiben einer dynamisch typisierten Sprache im Durchschnitt um den Faktor zwei reduzieren.

Wenn Sie sich eingehender mit diesem Thema befassen möchten, empfehle ich Ihnen, diesen Artikel von Eric Elliott zu lesen, in dem angegeben wird, dass Sie möglicherweise kein TypeScript (oder statisch typisierte Sprachen) benötigen.

Was zu wählen

Die Frage ist also nicht nur, was Angular oder React bietet, sondern auch, in welche Kernsprache Sie Zeit investieren sollten. Und es spielt keine Rolle, solange Sie etwas auswählen, das Ihren Anforderungen und Ihrer Komplexität entspricht.

Wenn Sie kein Fan von Typen sind, steht dem Schreiben von ES6-Code in TypeScript nichts mehr im Wege. Es ist nur so, dass es da ist, wenn Sie es brauchen.

Wenn Sie jedoch eine ziemlich große Front-End-Anwendung mit Angular erstellen, die sich mit vielen HTTP-Anforderungen befasst, hilft das Vorhandensein von Typen bei Fragen wie "Welcher Objekttyp ist das, welche Felder kann ich verwenden und welcher Typ ist dieses Feld usw.". . Es eignet sich hervorragend für die Zusammenarbeit und die Klärung kleiner Dinge.

Hier ist ein einfacher Klassenobjektvergleich zwischen TS und JS (ES6).

IMO

Statisch typisiert fühlt sich strukturiert, sicher, lesbar und einfach an, mit anderen zusammenzuarbeiten (verhindert, dass Personen unerwartete Werte weitergeben). Wenn ich jedoch mit dynamisch getippten Texten arbeite, habe ich die Flexibilität und Kreativität, mich mehr auf das Erstellen zu konzentrieren, als zu viel über Typen, Schnittstellen und Generika usw. nachzudenken.

Und von den früheren Web-Apps, die ich erstellt habe, hatte ich keine großen Probleme damit, keine statische Eingabe zu haben. Es bedeutet nicht, dass ich es nicht mag - ich nur, dass ich es nicht brauche, aber vielleicht mache ich es in der Zukunft.

Hier ist ein Update - derzeit arbeite ich mit einigen Microsoft-Entwicklern zusammen, um eine Anwendung mit dem Angular-Framework zu erstellen. Der Grund, warum wir Angular ausgewählt haben, ist, dass die meisten Pakete bereits definiert sind und sich die Dokumentation für alles an einem Ort befindet. Der Schwerpunkt liegt auch auf TypeScript, was eine perfekte Wahl ist, da die meisten Entwickler bereits viel Erfahrung mit objektorientierter Programmierung haben.

Andererseits habe ich ähnliche Apps gesehen, mit denen wir arbeiten und die mit React erstellt wurden. Im Allgemeinen sind beide leistungsstarke Tools und hängen hauptsächlich davon ab, wie Sie die Architektur einrichten.

Notizen zum Mitnehmen

  • TypeScript ist einfach ein Transpiler und kann mit React oder anderen JS-Frameworks verwendet werden
  • React verwaltet die Speicherverwaltung effizient (virtuelles DOM)
  • React verwendet JavaScript (ES6), eine seit 1995 anerkannte Web-Sprache
  • Angular verwendet TypeScript, das 2012 veröffentlicht wurde
  • Statisch typisierte Sprache ist großartig, aber kein Muss
  • Dynamisch typisierte Sprachen benötigen weniger Zeit zum Schreiben und mehr Flexibilität beim Einsatz von Kreativität
  • Das Erlernen einer statisch typisierten Sprache kann eine Herausforderung sein, insbesondere wenn Sie nur mit dynamisch typisierten Sprachen gearbeitet haben
  • ES6 hat viele großartige Funktionen wie Module, Klassen, Spread-Operatoren, Pfeilfunktionen und Vorlagenliterale implementiert, mit denen Sie weniger, saubereren und strukturierteren Code schreiben können (syntaktischer Zucker).
  • TS ist einfach ES6 + mit Typen und vielem mehr

Fazit

Das von Ihnen ausgewählte Framework / die Komponentenbibliothek kann Einfluss darauf haben, wie viel Zeit Sie mit dem Programmieren verbringen und wie hoch Ihr Budget ist. Wenn Sie ein Team mit C # -, Java- oder C ++ - Entwicklern haben, würde ich mich wahrscheinlich für Angular entscheiden, da TypeScript viele Ähnlichkeiten mit diesen Sprachen aufweist.

Die beste Empfehlung, die ich anbieten kann, ist, eine Basisanwendung sowohl in Angular als auch in React einzurichten und dann die Sprache und den Arbeitsablauf zu bewerten, bevor Sie eine Entscheidung treffen.

Wie bereits erwähnt, haben beide Technologien ihre eigenen Vorteile und Ähnlichkeiten, und es kommt wirklich darauf an, welche Art von Anforderungen die Anwendung bietet, wie komplex und wie erfahren die Entwickler sind.

Hier sind einige Artikel, die ich über das Web-Ökosystem geschrieben habe, sowie persönliche Programmiertipps und -tricks.

  • Ein chaotischer Geist führt zu chaotischem Code
  • Entwickler, die ständig neue Dinge lernen wollen
  • Eine praktische Anleitung zu ES6-Modulen
  • Lernen Sie diese zentralen Webkonzepte kennen
  • Verbessern Sie Ihre Fähigkeiten mit diesen wichtigen JavaScript-Methoden
  • Programmieren Sie schneller, indem Sie benutzerdefinierte Bash-Befehle erstellen

Sie finden mich auf Medium, wo ich wöchentlich veröffentliche. Oder Sie können mir auf Twitter folgen, wo ich relevante Tipps und Tricks zur Webentwicklung sowie persönliche Geschichten veröffentliche.

PS Wenn dir dieser Artikel gefallen hat und du mehr willst, klatsche bitte ❤ und teile ihn mit Freunden, die ihn vielleicht brauchen. Es ist gutes Karma.