Reagieren vs. Nativ reagieren: Was ist der Unterschied?

12. August 2020
React vs. React Native

React und React Native sind zwei leistungsstarke Technologien, die hinter einigen der beliebtesten Web- und Mobilanwendungen der Welt stehen. Wahrscheinlich sind Sie sich dessen nicht einmal bewusst, aber Sie nutzen mindestens eine der beiden Technologien jeden Tag. Was ist also der Unterschied zwischen React und React Native?

React und React Native sind zwei Technologien, die bei der Entwicklung von Web- und mobilen Anwendungen eingesetzt werden. Beide verwenden JavaScript und sind bekannt für die Erstellung von Web- und mobilen Benutzerschnittstellen (UI).

Während Sie weiterlesen, werden wir die Unterschiede zwischen React vs. React Native aufschlüsseln, ihre Stärken und Schwächen definieren und einige Beispiele von Unternehmen nennen, die die beiden Technologien übernommen haben.

Was ist Reagieren?

React, oder ReactJS, ist eine Open-Source-JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen (UI) speziell für Einzelseitenanwendungen. React wurde zuerst konzipiert von Jordanien Walke, ein Facebook-Software-Ingenieur im Jahr 2012 - wo die Technologie intern entwickelt wurde, bevor sie auf Facebook.com und später auf Instagram.com eingesetzt wurde.

Reagieren musste man extrahiert aus der Code-Basis von Facebook so dass Instagram es benutzen konnte, was in gewisser Weise bedeutet, dass Instagram der erste 'externe' Benutzer von React war. Dies führte dazu, dass die Technologie für den Rest der Welt offengelegt wurde.

React ist so konzipiert, dass es sich leicht in bestehenden Code oder andere Bibliotheken integrieren lässt. Sein primärer Zweck ist es, den Prozess der Entwicklung und Erstellung von Webanwendungen zu vereinfachen, die schnell, skalierbar und einfach sind.

Was ist React Native?

React Native ist das jüngere Geschwisterchen von React. Nach dem glühenden Empfang von React im Jahr 2013 begann Facebook mit der Arbeit an einem plattformübergreifenden mobilen Framework, um mit den wachsenden mobilen Anforderungen des Technologiegiganten Schritt zu halten. Im März 2015 gab Facebook bekannt, dass die Technologie offen und verfügbar auf Github.

Wie React basiert auch React Native auf JavaScript, ist aber entwickelt zur Erstellung nativer mobiler Anwendungen mit wiederverwendbaren Komponenten. Was bedeutet das? Stellen Sie sich vor, ein Bauherr verwendet einen anderen Bohrer, um ein Haus zu bauen und eine Wohnung zu bauen. Das wäre mühsam und unnötig. Vor React Native mussten App-Entwickler verschiedene Werkzeuge für verschiedene Plattformen verwenden, wie z.B. ein Bauherr, der für jede Art von Gebäude, das er baut, einen speziellen Bohrer hat.

Darin liegt die wahre Macht von React Native. React Native ermöglicht die reibungslose und nahtlose Erstellung von Anwendungen über mehrere Plattformen (Windows, Android, iOS) hinweg. Wie alle Geschwister haben auch React und React Native Gemeinsamkeiten, aber auch deutliche Unterschiede, auf die wir später noch näher eingehen werden.

Was ist Reagieren?

Quelle: Entblößt

Nativ reagieren vs. Reagieren: Wie funktionieren sie?

Virtuelles Dokument-Ziel-Modell (DOM) für React

Die Dokument-Objektmodell (DOM) ist eine wichtige Programmierschnittstelle, die eine Darstellung eines Web-Dokuments und all seiner Inhalte ist. Die Fähigkeit von Bibliotheken und Frameworks, mit dem DOM umzugehen, wirkt sich dramatisch darauf aus, wie sie letztendlich verwendet und angezeigt werden.

Das bahnbrechende Merkmal von React ist Virtuelles DOM. Virtual DOM ist eine virtuelle Repräsentation des realen DOM, was bedeutet, dass alle Änderungen der Ansicht im Speicher und nicht auf dem Bildschirm stattfinden. Für unsere nicht-technischen Leser ist es wichtig zu verstehen, dass Virtual DOM schneller ist, eine höhere Leistung und eine bessere Benutzererfahrung im Vergleich zur manuellen Handhabung von DOM-Änderungen bietet.

Native APIs für React Native

Auf der anderen Seite verwendet React Native beim Rendern von UI-Komponenten die native Anwendungsprogrammschnittstelle (API). Hier ist eine Definition aus Webopedia wenn Sie sich über API unsicher sind:

"API" ist eine Reihe von Routinen, Protokollen und Werkzeugen zur Erstellung von Software-Anwendungen. Mit anderen Worten, eine API spezifiziert, wie Softwarekomponenten zusammenwirken sollen.

Im Gegensatz zu anderen plattformübergreifenden Frameworks wie Cordova oder PhoneGap rendert React Native bestimmte Codekomponenten mit nativen APIs. React Native wird mit nativen Modulen und Komponenten geliefert, die die Leistung verbessern.

Unterschiede zwischen React vs. React Native

Unterschiede zwischen React vs. React Native

Die meisten Geschwister haben einige Gemeinsamkeiten, sei es ein gemeinsames Interesse an Sport, Musik oder ähnliche Persönlichkeitsmerkmale. Davon abgesehen würden die meisten Geschwister zustimmen, dass sie ebenso viele Unterschiede wie Gemeinsamkeiten haben. Dasselbe gilt für die Geschwister React und React Native. Obwohl sie Gemeinsamkeiten haben, gibt es einige ziemlich deutliche Unterschiede zwischen den beiden Geschwistern. Es ist am besten, sie aufzugliedern in die folgenden Kategorien:

Funktion:

  • React ist eine Open-Source-JavaScript-Bibliothek, die hauptsächlich für die Erstellung von UI für Webanwendungen verwendet wird.
  • React Native ist ein Open-Source-Framework zur Erstellung plattformübergreifender mobiler Apps für iOS, Android und Windows.
  • React ist in erster Linie für Webanwendungen konzipiert, während React Native für den Zweck der plattformübergreifenden mobilen Entwicklung konzipiert wurde.
  • React Native wurde explizit für die Erstellung von responsiven mobilen UI entwickelt.

Plattform-Abhängigkeit:

  • React hat keine Abhängigkeit von einer bestimmten Plattform, d.h. es kann auf allen möglichen Plattformen ausgeführt werden.
  • React Native ist (bis zu einem gewissen Grad) plattformabhängig. Während ein großer Prozentsatz des Codes über mehrere Plattformen hinweg gemeinsam genutzt werden kann, gibt es auch einen Prozentsatz an plattformspezifischem Code, der an die jeweilige Plattform angepasst ist, z. B. iOS oder Android.

HTML-Tags

  • In React werden HTML-Tags verwendet. Die Technologie besteht aus zwei Teilen - Komponenten und HTML-Dokument
  • Es werden keine HTML-Tags in React Native verwendet.

Navigation

  • Die React-Navigation wird direkt von React bevollmächtigt und ist vollständig in JavaScript integriert, was ideal für das Laden von Webanwendungen ist.
  • React Native ist etwas komplizierter und verwendet eine eigene Navigationsbibliothek, um in mobilen Anwendungen zu navigieren.

Vor- und Nachteile von React

Vorteile von React

Im Folgenden sind einige der allgemein akzeptierten Vorteile von React.

  1. Einfach zu erlernen/einfach zu bedienen

    Obwohl keine Technologie einfach zu erlernen ist, gibt es viele Tutorials und Schulungsressourcen für diejenigen, die React lernen wollen. Es ist auch einfacher zu lernen für diejenigen, die bereits einen Hintergrund in JavaScript haben.

  2. Eine dynamische Webanwendung leicht gemacht

    Früher war es aufgrund der Komplexität des Codes schwierig, mit HTML hochfunktionale Webanwendungen zu erstellen. Mit React wurde dieses Problem gelöst, da weniger Kodierung erforderlich ist und mehr Funktionalität zur Verfügung steht.

  3. Wiederverwendbare Komponenten

    Eine Anwendung, die mit React erstellt wird, verwendet mehrere Komponenten. Diese Komponenten haben jeweils ihre eigene Logik und ihr eigenes Rendering, die bei Bedarf wiederverwendet werden können. Diese Wiederverwendung ermöglicht eine einfache Entwicklung und Wartung der Anwendung.

  4. Optimierte Leistung

    Wie bereits erwähnt, ist das virtuelle DOM eines der bestimmenden Merkmale von React. Der Prozess des Virtual DOM garantiert eine minimale Aktualisierungszeit für das reale DOM, was wiederum für eine höhere Leistung und eine bessere Benutzererfahrung sorgt.

  5. Riesige Gemeinschaft

    Seit React 2013 als Open-Source-Projekt veröffentlicht wurde, können Entwickler aus aller Welt es nutzen und verbessern. Die React-Community stellt wertvolle Bibliotheken zur Verfügung, die den React-Entwicklungsprozess erleichtern.

Nachteile von React

Im Folgenden sind einige der am weitesten verbreiteten aufgeführt Nachteile von React:

  1. Schnelllebige Entwicklung

    Die React-Umgebung ändert sich ständig, was es für Entwickler schwierig macht, mit den ständigen Updates Schritt zu halten. Die meisten modernen Web-Frameworks teilen diese Eigenschaft. Obwohl es also nicht per se ein Nachteil ist, ist es dennoch etwas, mit dem React-Entwickler zu kämpfen haben.

  2. JSX

    React verwendet JavaScript XML(JSX). JSX ist eine Erweiterung, mit der HTML in React geschrieben werden kann. Viele Entwickler mögen die JSX-Dokumentation nicht und glauben, dass sie für Nachwuchsentwickler schwer zu verstehen ist.

Vorteile von React Native

Im Folgenden sind einige weithin akzeptierte Vorteile von React Native aufgeführt:

  1. Schnellere Entwicklung

    React Native verwendet JavaScript, wodurch sich die App-Entwicklung eher wie eine Web-Entwicklung anfühlt, mit mehr Iterationen und Flexibilität. Dies hat auch den zusätzlichen Vorteil, dass Webentwickler ihre Fähigkeiten leicht verbessern und React Native Apps bauen können.

  2. Wiederverwendbarer Code

    Die glänzende Leistung von React Native ist, dass es plattformübergreifende Funktionalität ermöglicht. Dies wird zum Teil durch wiederverwendbaren Code erreicht, der sowohl auf iOS als auch auf Android eingesetzt werden kann.

  3. Weniger Bugs

    Mit React Native ist weniger Debugging und Optimierung erforderlich, da es auf mehreren Plattformen eingesetzt wird. Eine App zu bauen bedeutet, nur ein Backlog zu überwachen, einheitliche Versions-Updates und einen Satz von Fehlern zu beheben.

  4. Gemeinschaftlich getrieben

    React Native wurde ursprünglich durch einen von Facebook durchgeführten Hackathon im Jahr 2013 entwickelt und seitdem wird die Technologie von der Community vorangetrieben. Das ist ein großer Vorteil, denn eine große Community, die bereit ist, ihr Wissen und ihre Expertise, Kataloge und offen verfügbare Komponenten zu teilen, treibt die Entwicklung der Technologie voran.

  5. Niedrigere Kosten

    Die oben genannten Vorteile laufen alle auf einen Gesamtvorteil von React Native hinaus - geringere Kosten. Eine React Native-Anwendung muss nur einmal erstellt werden, mit dem zusätzlichen Vorteil, dass eine einzige Codebasis verwendet wird (die meiste Zeit). Das bedeutet ein Team, was Lohn- und Verwaltungskosten spart. Die andere Kostenersparnis kommt durch die MIT-Lizenz, unter der React Native vertrieben wird. Benutzer müssen die Quelle des Codes nicht veröffentlichen, jeder kann die Software modifizieren und Änderungen am Code müssen nicht gemeldet werden. Das Framework ist komplett lizenzfrei, so dass für alles, was innerhalb des Frameworks gemacht wird, weder bezahlt noch geteilt werden muss.

Nachteile von React Native

Im Folgenden sind die am häufigsten betrachteten Nachteile von React Native aufgeführt:

  1. Ständige Updates

    React Native wird ständig aktualisiert und das bringt Fehlerbehebungen, neue portierte native Komponenten, Leistungsverbesserungen und verbesserte benutzerdefinierte Komponenten mit sich. Updates sind nicht unbedingt ein Nachteil, aber etwas, das React Native-Entwickler im Gegensatz zu einem weiter entwickelten Framework berücksichtigen müssen.

  2. Fehlende benutzerdefinierte Module

    React Native noch bestimmte Komponenten fehlen, während andere noch nicht vollständig entwickelt sind. Die meisten React Native-Entwickler werden nicht auf dieses Problem stoßen; diejenigen, die es dennoch tun, müssen Wege finden, es zu umgehen, indem sie eine Lösung von Grund auf neu erstellen oder eine bestehende hacken. Das Erstellen eines benutzerdefinierten Moduls kann auch dazu führen, dass drei separate Codebases (Android, iOS, RN) anstelle von nur einer entstehen.

Native Beispiele für Reagieren vs. Reagieren

Sie haben es bis hierher geschafft, denn wir haben React und React Native definiert, ihre Unterschiede umrissen und die Vor- und Nachteile der beiden Technologien durchgesprochen.

Jetzt fragen Sie sich wahrscheinlich, wo werden die beiden überhaupt verwendet? Oder besser noch, habe ich bereits eine in React oder React Native geschriebene App verwendet, ohne es zu wissen? Sofern Sie nicht auf einer Insel oder tief in einer Höhle ohne Zugang zu Technologie leben, dann ist die Antwort mit ziemlicher Sicherheit ja.

Hier sind einige Beispiele aus der Praxis für React und React Native:

Reagieren Sie

Facebook Web-Version

React wurde erstmals 2011 bei Facebook konzipiert, als ein Software-Ingenieur namens Jordan Walke die Erstellung der Bibliothek leitete. Zunächst für den Newsfeed verwendet, wird React (zusammen mit anderen Technologien) ausgiebig für die Webversion von Facebook.com genutzt.

React vs. React Native - FacebookInstagram Web-Version

Facebook erwarb Instagram im Jahr 2012 und hatte damals noch keine Web-Version der App. Nach der Übernahme der beliebten Social-Media-Plattform wurde React schnell implementiert, um die Webversion von Instagram auszurollen. Seitdem wurde die Web-Version 100% basierend auf der React-Bibliothek.

Asana

Asana ist ein führendes Projektmanagement-Tool, das von Unternehmen auf der ganzen Welt genutzt wird. Das Tool hat über 30.000 zahlende Kunden, darunter Spotify, Uber, Autodesk und Trivago. Ursprünglich auf Luna basierend, wuchs das Tool schnell, und damit kamen Probleme - meist im Zusammenhang mit der Skalierung. Daraufhin wurde die Entscheidung getroffen, das das Frontend neu schreibenund React wurde dafür ausgewählt.

React vs. React Native - AsanaNetflix

Netflix ist ein weiterer großer Player, der React einsetzt. Der Streaming-Riese nutzt React auf seiner Plattform namens Gibbon, die für leistungsschwache TV-Geräte verwendet wird. Die React-Bibliothek hat auch bei Startgeschwindigkeit, Laufzeit, Leistung, Modularität und verschiedenen anderen Vorteilen geholfen, wie auf der Netflix-Blog.

React vs. React Native - NetflixNativ reagieren

Facebook AppNach dem Erfolg von React versuchte Facebook, alle seine Vorteile - wie schnelle Iterationen und ein einziges Team für die Entwicklung des gesamten Produkts - auf mobile Geräte zu übertragen. Das Endergebnis war React Native, das in der mobilen App-Entwicklung für iOS- und Android-Apps eingesetzt wurde.

Facebook-App

Nach dem Erfolg von React versuchte Facebook, alle seine Vorteile - wie schnelle Iterationen und ein einziges Team für die Entwicklung des gesamten Produkts - auf mobile Geräte zu übertragen. Das Endergebnis war React Native, das in der mobilen App-Entwicklung eingesetzt für iOS- und Android-Apps.

React vs. React Native - Facebook-App

Quelle: Entblößt

Instagram App

Nachdem Facebook Instagram übernommen hatte, wurde React Native in die native App von Instagram integriert, beginnend mit der Push-Benachrichtigungsansicht, die zunächst als WebView implementiert wurde. Auf dem Weg dorthin gab es ein paar Schluckaufs, aber das Instagram-Entwicklerteam konnte die Geschwindigkeit erheblich verbessern. Zwischen 85% und 99% des Codes wurden zwischen Android- und iOS-Apps geteilt, was zu einer wesentlich schnelleren Entwicklung der App führte.

React vs. React Native - Instagram-App

Quelle: Flickr

Skype

Im Jahr 2017 kündigte Skype an, dass es an einer komplett neuen App arbeitet, die in React Native geschrieben werden soll. Das Ergebnis war eine App, die komplett überarbeitet wurde, einschließlich des Layouts, der Symbole und sogar einiger cooler neuer Funktionen. Microsoft entschied sich sogar, React Native nicht nur für die mobilen Plattformen, sondern auch für die Windows-Desktop-App zu verwenden.

React vs. React Native - Skype-AppTesla

Das Elektroauto-Unternehmen hat seine mobile Anwendung mit React Native entwickelt. Die App ist darauf ausgelegt, ein Fahrzeug zu diagnostizieren und zu orten sowie teilweise mit Hilfe eines Smartphones zu steuern.

React vs. React Native - Tesla App

Quelle: Flickr

WIX

Die mobile Anwendung des berühmten Website-Builders ist komplett in React Native geschrieben. Tal Kol, ehemaliger Head of Mobile Engineering bei Wix, sprach auf der ReactNext 2016 darüber, wie React Native eine spielverändernde Technologie für Wix ist.

React vs. React Native - Wix mobile App

Zusammenfassung

React und React Native sind Technologien, die in der Entwicklergemeinde immer beliebter werden. Vielleicht wussten Sie vor dem Lesen dieses Artikels nicht, dass viele Ihrer bevorzugten Mobil- oder Webanwendungen die eine oder die andere verwenden. Hoffentlich haben Sie jetzt ein besseres Verständnis von React vs. React Native, ihren Gemeinsamkeiten, Unterschieden und Nachteilen. Da ihre Popularität weiter zunimmt, können wir erwarten, dass sie von Entwicklern weltweit noch häufiger eingesetzt werden.

Beitrag teilen

Es ist mehr als nur ein Newsletter

Erhalten Sie nützliche Einblicke direkt in Ihren Posteingang und erfahren Sie mehr über die Einstellung von Technikern.

Kodierfähigkeiten nahtlos verifizieren & entwickeln.

Sehen Sie DevSkiller-Produkte in Aktion.

Sicherheitszertifizierungen & Konformität. Wir sorgen dafür, dass Ihre Daten sicher und geschützt sind.