ReactJS und React Native sind die neuen Technologien für die Web- und Mobilentwicklung, die von Facebook eingeführt wurden. Das Projekt wurde 2011 von Jordan Walke, einem Softwareentwickler bei Facebook, gestartet. Um den Entwicklungsprozess zu vereinfachen und ein angenehmeres Benutzererlebnis zu ermöglichen, beschloss er, eine Bibliothek zu erstellen, mit der sich eine Weboberfläche mit JavaScript erstellen lässt.
In diesem Artikel gehen wir darauf ein, warum React erstellt wurde und welche Vor- und Nachteile die Verwendung von React-Technologien mit sich bringt.
Was ist React?
ReactJS ist eine JavaScript-Bibliothek, die die Geschwindigkeit von JavaScript mit einer neuen Art der Darstellung von Webseiten kombiniert, wodurch diese hochdynamisch werden und auf Benutzereingaben reagieren. Das Produkt hat den Entwicklungsansatz von Facebook erheblich verändert. Nach der Veröffentlichung der Bibliothek wurde sie aufgrund ihres revolutionären Ansatzes zur Programmierung von Benutzeroberflächen äußerst beliebt und löste damit den langjährigen Wettbewerb zwischen React und Angular aus , einem anderen beliebten Webentwicklungstool.
Wenn Sie direkt mit der Entwicklung mit React beginnen möchten, können Sie die folgenden Links besuchen:
Erste Schritte mit React Laden Sie die versionierte React-Dokumentation
herunter und lesen Sie sie Besuchen Sie das React-Repository auf Github, um zur Entwicklung beizutragen oder tiefer in technische Details einzutauchen Schauen Sie in einer Stack Overflow React-Community vorbei , um Antworten auf die häufigsten oder sehr spezifischsten Fragen zu finden Probieren Sie praktische React-Tutorials aus Erstellen Sie eine React-App Probieren Sie Vorlagen auf CodePen , CodeSandbox , Glitch oder Stackblitz für den Online-Code-Spielplatz aus. Machen Sie sich mit den neuesten React-Versionen vertraut Werfen Sie einen Blick auf React Hooks , ein Tool zur Komponentenstatusverwaltung
Eine kurze Geschichte hinter der Bibliothek
Vor der Entwicklung von ReactJS oder einfach React, wie es heutzutage meist genannt wird, stand Facebook vor einer großen Aufgabe im Bereich der Benutzererfahrung – der Entwicklung einer dynamischen Benutzeroberfläche mit hoher Leistung. Die Ingenieure wollten beispielsweise dafür sorgen, dass Newsfeed-Updates gleichzeitig mit den Chat-Nutzungen der Benutzer erfolgen.
Um das zu erreichen, musste Facebook den Entwicklungsprozess selbst optimieren und Jordan Walke entschied sich, dies mit JavaScript zu tun. Er schlug vor, XHP, die Facebook-Markup-Syntax, in das JS-Koordinatensystem einzufügen. Die Idee schien unmöglich, aber 2011 veröffentlichte sein Team die ReactJS-Bibliothek auf Basis einer Symbiose aus JavaScript und XHP. Dann erkannte Facebook, dass ReactJS schneller arbeitete als jede andere Implementierung dieser Art. 2013 veröffentlichte Facebook React als Open-Source- JavaScript-Tool .
Zwei Jahre später veröffentlichte dieselbe Gruppe von Ingenieuren React Native, ein hybrides Entwicklungsframework für mobile Apps für iOS und Android. Das Tool basierte auf denselben Prinzipien wie ReactJS und wurde bald von der Engineering-Community und Unternehmen, die die Mobile-First-Strategie verfolgen, akzeptiert .
Wie funktioniert React Native? React Native kombiniert native Anwendungsentwicklung mit JavaScript-UI-Entwicklung. Während rechenintensive Funktionen mit nativen Modulen für iOS und Android implementiert werden können, kann der restliche Code mit JavaScript geschrieben und plattformübergreifend genutzt werden. Im Gegensatz zu den plattformübergreifenden Tools PhoneGap und Cordova verwendet React Native nicht WebView, eine mobile Engine, die Code umschließt. Stattdessen bietet es Zugriff auf native mobile Controller, die ein natives Erscheinungsbild für Apps ermöglichen.
Schauen wir uns also die Vor- und Nachteile von React als Hauptprodukt genauer an. Dann untersuchen wir, wie sich React Native von React unterscheidet und welche Vor- und Nachteile es von ReactJS erbt.
Vorteile von ReactJS
Virtueller DOM in React verbessert das Benutzererlebnis und beschleunigt die Arbeit des Entwicklers
DOM (Document Object Model) ist eine logische Struktur von Dokumenten in den Formaten HTML, XHTML oder XML. Einfach ausgedrückt handelt es sich um eine Ansichtsvereinbarung für Dateneingaben und -ausgaben in Baumform. Webbrowser verwenden Layout-Engines, um die Darstellung der HTML-Syntax in ein Dokumentobjektmodell umzuwandeln oder zu analysieren, das wir in Browsern sehen können.
Das Hauptproblem bei herkömmlichen DOM-Konstrukten ist die Art und Weise, wie Änderungen verarbeitet werden, d. h. Benutzereingaben, Abfragen usw. Ein Server prüft ständig die durch diese Änderungen verursachten Unterschiede, um die erforderliche Antwort zu geben. Um richtig zu reagieren, muss er auch die DOM-Bäume des gesamten Dokuments aktualisieren, was ergonomisch nicht sinnvoll ist, da DOM-Bäume heutzutage ziemlich groß sind und Tausende von Elementen enthalten.
Dem Team hinter React gelang es, die Aktualisierungsgeschwindigkeit durch die Verwendung von virtuellem DOM zu erhöhen. Im Gegensatz zu anderen Frameworks, die mit dem realen DOM arbeiten, verwendet ReactJS dessen abstrakte Kopie – das virtuelle DOM. Es aktualisiert sogar minimale Änderungen, die vom Benutzer vorgenommen werden, wirkt sich jedoch nicht auf andere Teile der Benutzeroberfläche aus. Dies ist auch dank der Isolierung der React-Komponenten, auf die wir gleich eingehen werden, und einer speziellen Datenstruktur in der Bibliothek möglich.
Dadurch werden Aktualisierungen sehr schnell durchgeführt, was den Aufbau einer hochdynamischen Benutzeroberfläche ermöglicht. Wir können dies beim Schreiben im Facebook-Chat und beim Anzeigen eines gleichzeitig aktualisierten Newsfeeds bemerken. Darüber hinaus müssen Entwickler in React DOM nicht an Funktionen im Frontend binden, da React-Elemente bereits damit verbunden sind.
Erfahren Sie, wie Sie React in Ihrem Produkt verwenden
AltexSoft baut Analysesysteme für Drive-Thru-Management-Plattform neu auf
Dieser Ansatz ermöglichte es Entwicklern, schneller mit UI-Objekten zu arbeiten und Hot Reloading (Anwenden von Änderungen in Echtzeit) zu verwenden. Dies steigerte nicht nur die Leistung, sondern beschleunigte auch das Programmieren.
Die Erlaubnis zur Wiederverwendung von React-Komponenten spart erheblich Zeit
Ein weiterer Vorteil, den Facebook mit React eingeführt hat, ist die Möglichkeit, Codekomponenten einer anderen Ebene jederzeit wiederzuverwenden, ein weiterer bedeutender zeitsparender Effekt.
Denken Sie an Designer. Sie verwenden ständig dieselben Assets wieder. Wenn sie das nicht täten, müssten sie beispielsweise Firmenlogos immer wieder zeichnen. Es ist ziemlich offensichtlich: Wiederverwendung ist eine Designeffizienz. Beim Programmieren ist dieser Prozess etwas schwieriger. Systemupgrades werden oft zu einem Albtraum, da jede Änderung die Arbeit anderer Komponenten im System beeinträchtigen kann. Die
Verwaltung von Updates ist für Entwickler einfach, da alle React-Komponenten isoliert sind und Änderungen an einer Komponente keine Auswirkungen auf andere haben. Dies ermöglicht die Wiederverwendung von Komponenten, die an und für sich keine Änderungen hervorrufen, um das Programmieren für Entwickler präziser, ergonomischer und komfortabler zu gestalten. Lesen Sie diese Anleitung von Alex Grigoryan von WalmartLabs, um zu erfahren, wie Sie mit ReactJS eine effiziente Code-Wiederverwendbarkeit erreichen.
Der eindirektionale Datenfluss in ReactJS sorgt für einen stabilen Code
React ermöglicht die direkte Arbeit mit Komponenten und verwendet eine abwärts gerichtete Datenbindung, um sicherzustellen, dass Änderungen in untergeordneten Strukturen ihre übergeordneten Elemente nicht beeinflussen. Das macht den Code stabil.
Die meisten komplexen View-Model-Systeme der JS-Darstellung haben einen erheblichen, aber verständlichen Nachteil – die Struktur des Datenflusses. Im View-Model-System können untergeordnete Elemente bei Änderungen das übergeordnete Element beeinflussen. Facebook hat diese Probleme in React beseitigt und es zu einem einzigen View-System gemacht.
Anstatt eine explizite Datenbindung zu verwenden, verwendet ReactJS einen einseitigen – abwärts gerichteten – Datenfluss. In einer solchen Struktur können untergeordnete Elemente die übergeordneten Daten nicht beeinflussen. Um ein Objekt zu ändern, muss ein Entwickler lediglich seinen Status ändern und Aktualisierungen anwenden. Dementsprechend werden nur zulässige Komponenten aktualisiert.
Eine Open-Source-Facebook-Bibliothek: ständig weiterentwickelt und offen für die Community
React war eines der ersten JavaScript-bezogenen Projekte, das von Facebook als Open Source veröffentlicht wurde. Das bedeutet, dass ReactJS alle Vorteile des kostenlosen Zugriffs nutzt – viele nützliche Anwendungen und zusätzliche Tools von externen Entwicklern. Pete Hunt von Facebook sagt, dass mindestens zwei Hauptfunktionen – Batching und Pruning – von Entwicklern erstellt wurden, die das Projekt auf GitHub entdeckt haben. Jetzt ist ReactJS mit über 152.000 Sternen auf Platz 5 der Trends auf GitHub. Und es gibt mehr als 1400 Open-Source- Mitwirkende, die mit der Bibliothek arbeiten.
Redux: praktischer Statuscontainer
Bevor Sie einen wütenden Kommentar schreiben, dass Redux framework-agnostisch ist und Sie es problemlos mit Angular oder Vue verwenden können und dass es keineswegs exklusiv für React ist, beachten Sie bitte, dass wir das wissen. Es lohnt sich jedoch, Redux hier zu erwähnen, einfach weil das Tool als das Instrument gilt, das jeder React-Ingenieur erlernen muss und das in 50 bis 60 Prozent der React-Apps angewendet wird. Ja, Sie können Redux mit Angular verwenden, aber die Wahrscheinlichkeit, dass ein React-Entwickler Redux kennt, ist viel höher als die, dass er Angular kennt. Und Sie werden mehr Community-Unterstützung bei der Bewältigung der React-Redux-Lernkurve finden. Also, warum ist es gut?
Redux vereinfacht das Speichern und Verwalten von Komponentenzuständen in großen Anwendungen mit vielen dynamischen Elementen, wo es zunehmend schwieriger wird. Redux speichert den Anwendungszustand in einem einzigen Objekt und ermöglicht jeder Komponente den Zugriff auf den Anwendungszustand, ohne sich mit untergeordneten Komponenten befassen oder Rückrufe verwenden zu müssen. Wenn Sie beispielsweise zwei Komponenten haben, die denselben Status aufweisen (wie die Detail- und die allgemeine Ansicht im Bild unten) und in der Baumstruktur getrennt voneinander stehen, müssen die Daten ohne Redux durch mehrere Zwischenkomponenten mit allen damit verbundenen Problemen geleitet werden.
Redux bietet ein zentralisiertes Datenspeicherobjekt, auf das diese Komponenten direkt zugreifen können.
Da die Zustände besser verwaltbar werden, ist es außerdem einfacher, die Anwendung zu testen und Datenänderungen zu protokollieren. Außerdem ermöglicht das Tool das oben erwähnte Hot Reloading und viele andere nützliche Aktionen. Weitere Informationen zu Redux finden Sie im Buch „Understanding Redux“ von Ohans Emmanuel.
React Hooks: eine verbesserte Zustandsverwaltung
Vor Anfang Februar 2019 hatten React-Entwickler nur zwei Möglichkeiten, den Status anzugeben: Definieren Sie einen lokalen Status in der Komponente oder verwenden Sie ein Statusverwaltungsframework wie MobX oder Redux, um ihn als globalen Status festzulegen.
React führte seine Hooks-API in seiner Version 16.8 ein. Der größte Vorteil von Hooks besteht darin, dass es das Teilen der Statuslogik zwischen Komponenten ermöglicht, ohne den gesamten Codeblock neu zu strukturieren. Darüber hinaus ermöglicht Hooks die Wiederverwendung von Logik zwischen Komponenten, ohne deren Struktur zu ändern. Es ermöglicht auch die Aufteilung einer bestimmten Einzelkomponente in mehrere kleinere Funktionen, basierend auf den Rollen, auf die sich diese Teile beziehen, anstatt sie entsprechend ihrer Lebenszyklusmethoden aufzuteilen. Was für Entwickler ebenso wichtig ist: Hooks erspart ihnen das Schreiben von Klassen für jede Komponente und das tiefe Einarbeiten in die JavaScript-Theorie, während sie dennoch alle Vorteile von React nutzen können.
Umfangreiches React- und Redux-Toolset
Sowohl React als auch Redux verfügen über eine Reihe von Tools, die Entwicklern das Leben erleichtern. So ermöglichen beispielsweise die Erweiterung „React Developer Tools“ für Chrome und eine ähnliche für Firefox das Untersuchen von Komponentenhierarchien im virtuellen DOM sowie das Bearbeiten von Zuständen und Eigenschaften. Darüber hinaus können Sie sich React Sight ansehen , das Zustands- und Eigenschaftenbäume visualisiert; Reselect DevTools hilft beim Debuggen und Visualisieren von Reselect , einer Selektorbibliothek für Redux. Redux DevTools Profiler Monitor ermöglicht das Profilieren von Aktionen in, nun ja, Chrome DevTools. Und es gibt noch viele weitere zum Ausprobieren .
Nachteile von React
Das Tempo der Entwicklung
Dieser Nachteil wird von den Entwicklern Michael Jackson und Ryan Florence auf Modern Web treffend beschrieben: „Falls Sie es nicht bemerkt haben, wir fahren hier ein Auto mit zwei platten Reifen, die Motorhaube ist gerade vor die Windschutzscheibe geflogen und wir haben keine Ahnung mehr, was los ist!“ Die Umgebung ändert sich ständig und Entwickler müssen regelmäßig neue Vorgehensweisen erlernen. Alles entwickelt sich weiter und einige Entwickler fühlen sich nicht wohl dabei, mit einem solchen Tempo Schritt zu halten. Gleichzeitig müssen wir zugeben, dass die Kern-API von React stabiler geworden ist und selten geändert werden kann. Änderungen beziehen sich jetzt hauptsächlich auf Bibliotheksaktualisierungen und das Hinzufügen neuer Verbesserungsfunktionen.
Schlechte Dokumentation
Das Problem mit der Dokumentation geht auf die ständigen Veröffentlichungen neuer Tools zurück. Verschiedene und neue Bibliotheken wie Redux und Reflux versprechen, die Arbeit einer Bibliothek zu beschleunigen oder das gesamte React-Ökosystem zu verbessern. Letztendlich haben Entwickler Schwierigkeiten, diese Tools in ReactJS zu integrieren. Einige Mitglieder der Community sind der Meinung, dass sich React-Technologien so schnell aktualisieren und beschleunigen, dass keine Zeit bleibt, richtige Anweisungen zu schreiben. Um dieses Problem zu lösen, schreiben Entwickler ihre eigene Dokumentation für bestimmte Tools, die sie in aktuellen Projekten verwenden.
„HTML in meinem JavaScript!“ – JSX als Barriere
ReactJS verwendet JSX . Dabei handelt es sich um eine Syntaxerweiterung, die das Mischen von HTML mit JavaScript ermöglicht. JSX hat seine eigenen Vorteile (beispielsweise schützt es Code vor Injections), aber einige Mitglieder der Entwickler-Community betrachten JSX als ernsthaften Nachteil, da es wie alter Spaghetti-Code aussieht. Entwickler und Designer beschweren sich über die Komplexität von JSX und den daraus resultierenden hohen Lernaufwand.
Zusätzlicher SEO-Aufwand
Es gab Bedenken, dass Google und andere Suchmaschinen dynamische Webseiten mit clientseitigem Rendering nicht oder nur schlecht indizieren können. Diese Bedenken wurden nicht vollständig bewiesen und es gibt Materialien, die sie widerlegen . Google selbst hat bereits 2014 bestätigt , dass seine Crawler dynamische Inhalte lesen können. Wir werden also nicht sagen, dass Ihre ReactJS-App nicht von Google indiziert wird. Wir schreiben schließlich das Jahr 2020. Sie
müssen jedoch dennoch einige Tests durchführen, um sicherzustellen, dass Ihre App bei Google gut ankommt, da einige Benutzer von Problemen berichtet haben . SEO-Spezialisten empfehlen, Ihre React-Apps über eines der Google Search Console- Tools laufen zu lassen, um besser zu erfahren, wie die Crawler sie wahrnehmen.
Obwohl dies kein großes Problem darstellt, kann SEO Ihren Entwicklungsaufwand erhöhen. Natürlich ist die Einrichtung eines serverseitigen Renderings möglich. Der Punkt ist, dass es viel Fachwissen von Entwicklern erfordert. Wenn es falsch gemacht wird, wird es nicht einfach funktionieren. Weitere Informationen zum SEO-Testen von React-Apps finden Sie hier .
Was ist React Native?
Zwei Jahre nach der Veröffentlichung von ReactJS im Jahr 2015 hat Facebook React Native entwickelt. Während die ReactJS-Bibliothek für die Erstellung von Weboberflächen entwickelt wurde, ist React Native ein hybrides App-Entwicklungsframework für iOS und Android, mit dem Sie bis zu 95 Prozent des Codes wiederverwenden können, sodass der Rest für die Entwicklung plattformspezifischer Oberflächen verwendet werden kann .
React und React Native: Was ist der Unterschied? Alle technischen Unterschiede zwischen ihnen werden durch Plattformziele verursacht.
- Während ReactJS Virtual DOM zum Rendern von Browsercode verwendet, verwendet React Native native APIs als Brücke zum Rendern von Komponenten auf Mobilgeräten. Für Android-Komponenten werden beispielsweise Java-APIs verwendet und zum Rendern auf iOS die Objective-C-API aufgerufen.
- React Native verwendet kein HTML. Wenn Sie also schon einmal mit ReactJS gearbeitet haben, müssen Sie sich mit der Syntax von React Native vertraut machen. Beispielsweise wird <Text> anstelle von <p> und <View> anstelle von <div> verwendet.
- Da React Native kein CSS verwendet, werden Standard-CSS-Funktionen wie Animationen mit speziellen APIs von React Native ausgeführt.
Falls Sie direkt zur React Native-Entwicklung springen möchten, sehen Sie sich diese nützlichen Links an.
Erste Schritte mit React Native
Einrichten der Entwicklungsumgebung
Neueste Version von React Native 0.62
Besuchen Sie das React Native Github-Repository
Vorteile von React Native
Derzeit ist das React Native-Framework eine der schnellsten und effizientesten Umgebungen für die Entwicklung mobiler Apps . Es ist analog zu ReactJS. Folgendes sollten Sie in Bezug auf Mobilgeräte wissen:
React Native verwendet JavaScript – eine schnelle und beliebte Programmiersprache
Noch einmal: JavaScript bleibt eine der schnellsten und am weitesten verbreiteten Programmiersprachen. Wie wir in unserem Artikel über die Vor- und Nachteile der Full-Stack-JavaScript-Entwicklung erörtert haben , verwenden laut der jährlichen Stack Overflow-Umfrage 67,7 Prozent der Entwickler JavaScript . Die Reife der JS-Community ermöglicht es Spezialisten, die Sprache schnell zu erlernen und sich bei der Arbeit damit ständig weiterzuentwickeln. Sie sollten also in der Regel schnell einen React Native-Entwickler für Ihr Projekt finden können.
Außerdem nutzt und kombiniert React Native die wichtigsten Vorteile von JavaScript und ReactJS. Aufgrund der Verbreitung von JS-Code können Ingenieure schneller und effizienter arbeiten, da sie eine entwickelte App nicht nach jedem Update neu starten müssen, um Änderungen zu sehen; sie können einfach die Anzeigeseite aktualisieren.
In einigen Fällen können Updates nach dem Start schneller durchgeführt werden. Beispielsweise erlaubt Apple JavaScript-basierte Änderungen des Anwendungsverhaltens im Echtzeitmodus, ohne dass ein Überprüfungszyklus erforderlich ist.
Native Steuerelemente und native Module in React Native verbessern die Leistung
React Native rendert einige Codekomponenten mit nativen APIs, im Gegensatz zu anderen plattformübergreifenden Frameworks wie PhoneGap, die Code über WebView, eine mobile Engine, rendern. Während der WebView-Ansatz die Leistung stark reduziert, kommuniziert React Native mit Zielkomponenten für iOS oder Android und rendert Code direkt und unabhängig an native APIs. Dabei verwendet React einen separaten Thread von der Benutzeroberfläche, was auch den Leistungswert erhöht.
Native Module spielen eine weitere wichtige Rolle. Derzeit bietet React eine Reihe nativer Module, die sofort einsatzbereit in Objective-C und Java geschrieben sind. Diese Module können nicht auf zwei Plattformen wiederverwendet werden, zielen jedoch auf eine höhere Leistung bei rechenintensiven Vorgängen wie Bildbearbeitung oder Videowiedergabe ab. Grundsätzlich kann Ihr Team die vorhandenen Module anwenden oder, wenn es über Java- und Objective-C-Erfahrung verfügt, selbst benutzerdefinierte Module schreiben. Da die React-Community wächst, sind einige Dinge bereits verfügbar. Der Rest der Codebasis kann wiederverwendet werden. Beispielsweise teilt Facebook Ads Manager 87 Prozent des Codes zwischen Android und iOS. Darüber
hinaus bietet React Native einfache Tools zum Debuggen und zur Fehlermeldung. Ähnlich wie bei der Webprogrammierung können Spezialisten beispielsweise Chrome- oder Safari-Entwicklertools verwenden, mit denen sie normalerweise vertraut sind.
Integriertes Debugging
React Native wird jetzt offiziell standardmäßig debuggt. In der neuesten Version 0.62, die Ende März 2020 veröffentlicht wurde , hat React Native integrierte Unterstützung für Flipper hinzugefügt , ein Debugging-Tool für mobile Apps für Entwickler, das sowohl in der Android- als auch in der iOS-Community beliebt ist. Ab der neuesten Version bietet React Native ab sofort standardmäßige Flipper-Unterstützung für React Native-Apps.
Das Flipper-Tool bietet eine Reihe von Optionen zum Arbeiten. Das Toolset ermöglicht Optionen wie das Anzeigen von Absturzberichten von Android- und iOS-Geräten, das Anzeigen aller Netzwerkanforderungen von Geräteanwendungen, das Anzeigen und Bearbeiten der Gerätedatenbanken und -einstellungen, die Verwendung der neuesten Version von React DevTools zusammen mit anderen Tools und vieles mehr. Aufgrund seiner erweiterbaren Natur bietet Flipper auch einen Marktplatz, der Plugins von NPM abruft, wodurch Entwickler benutzerdefinierte Plugins gemäß bestimmten Arbeitsabläufen veröffentlichen und installieren können.
React Native enthält alle ReactJS-Funktionen zur Verbesserung der Benutzeroberfläche
React Native verwendet ReactJS als JavaScript-Bibliothek und hat daher alle seine Vorteile. Um eine plattformübergreifende React Native-App zu erstellen, müssen Entwickler die Sprache der nativen Plattform nicht kennen. Sie müssen lediglich JavaScript beherrschen und mit der React-Syntax vertraut sein. Aber wie erwähnt können sie auch problemlos native Komponenten zum Code hinzufügen. Der
Datenfluss nach unten bleibt ebenfalls erhalten, sodass Kernkomponenten bearbeitet werden können, ohne dass dies Auswirkungen auf untergeordnete Komponenten hat. Dies macht die UI-Entwicklung reibungslos und wirkt sich positiv auf die Benutzererfahrung aus. Die Apps sehen nativ aus und fühlen sich auch so an.
Nachteile von React Native
Dokumentation
Leider erbt React Native den Hauptnachteil von ReactJS. Die Community ist jung, daher ist die verfügbare Dokumentation dürftig, insbesondere für die Integration mit zusätzlichen Tools.
Expertise für native Module
Wir haben die nativen Module im Abschnitt „Vorteile“ besprochen. Sie bringen definitiv Flexibilität in das Framework, indem sie die fehlenden Leistungslücken schließen. Wenn Sie rechenintensive Operationen ausführen müssen, können Sie native Module einfügen und Ihrer App ein wirklich natives Gefühl verleihen.
Bis zu einem gewissen Grad könnte dies jedoch den Sinn der plattformübergreifenden Entwicklung zunichte machen, da Sie immer noch einige native Entwickler (Objective-C, Java oder beides) in Reserve benötigen. Vielleicht brauchen Sie also React Native nicht, um das nächste mobile Photoshop zu erstellen. Aber wenn Sie keine anspruchsvollen Aufgaben mit roher Gewalt anstreben, reicht JS-Expertise aus.
Komponenten von Drittanbietern
Allerdings verfügt React Native über eine Reihe von nativen Modulen für iOS und Android, die Anzahl der Komponenten von Drittanbietern ist jedoch noch begrenzt. Und wir können nicht sicher sein, dass von der Community erstellte Module von den nächsten Versionen des Frameworks unterstützt werden. Dies bleibt ein Nachteil, da React Native kein breites Spektrum an möglichen Funktionen bietet, die Entwickler möglicherweise in ihre Apps implementieren möchten.
Verzögerte SDK-Updates
React Native schleppt sich oft, wenn iOS oder Android ihre SDKs aktualisieren. Das Team von React Native sollte eine Codebibliothek mit neuer Software integrieren. Und obwohl sie ziemlich schnell arbeiten, können sie nicht alle Teile der APIs auf einmal aktualisieren. Deshalb dauert die vollständige Synchronisierung zwischen React Native und neuen SDKs oft zu lange.
Um mehr darüber zu erfahren, wie das Framework im Vergleich zu anderen plattformübergreifenden Tools abschneidet, lesen Sie unseren speziellen Artikel: Xamarin vs. React Native vs. Ionic .
Instabilität, Kompatibilitätsprobleme und Fehler
In diesem Abschnitt lohnt es sich, eine große Anzahl von Problemen hervorzuheben, die Entwickler nach der Arbeit mit React Native melden und manchmal schlicht fragen : „Kann mir jemand sagen, ob ernsthafte App-Entwicklung mit React Native möglich ist?“ So weit würden wir nicht gehen (sehen Sie sich unten einige bemerkenswerte RN-Apps an). Aber hier ist nur eine kurze Liste von Problemen, über die Ingenieure bei der Arbeit mit React Native stolpern:
- Fehler beim erneuten Laden im laufenden Betrieb
- Inkompatibilitäten zwischen Community-Bibliotheken und verschiedenen Versionen von React Native
- Emulatorprobleme
- Probleme mit der React-Navigation
- Die Notwendigkeit, Pakete häufig neu zu installieren
- Verschiedene andere Fehler
Außerdem sollte beachtet werden, dass das Erstellen benutzerdefinierter Module mit React Native schwierig sein kann, da Entwickler oft feststellen, dass sie für eine Komponente drei Codebasen (React Native, Android und iOS) anstelle einer einzigen haben.
Bedenken Sie, dass sich das Tool noch in der Entwicklung befindet und der Weg zu einer reibungslosen Engineering-Erfahrung nicht einfach sein wird.
ReactJS und React Native Apps
Unternehmen, die ReactJS oder React Native bereits eingeführt haben, taten dies aus unterschiedlichen Gründen. Hier sind die bemerkenswertesten Anwender neben Facebook selbst:
Instagram. Das Instagram-Team wollte eine Website erstellen, eine One-Page-App, damit auch Webbesucher auf die soziale Plattform zugreifen können. Und ReactJS schien für diesen Zweck am besten geeignet. Die Web-App war optimiert und erwies sich für Benutzer als schnell und komfortabel. Jetzt werden sowohl mobile als auch Web-Apps von Instagram mit React erstellt.
Netflix . Netflix, das ReactJS 2015 eingeführt hat, verwendet es jetzt zusammen mit Gibbon, einer Rendering-Schicht. Damals entschied sich Netflix für React aufgrund seines One-Way-Ticket-Modells des Datenflusses und seines deklarativen Programmieransatzes.
Airbnb . Das Unternehmen entschied sich für ReactJS aufgrund seiner Wiederverwendbarkeit von Komponenten und der sehr einfachen Code-Refaktorierung und -Iteration. Jetzt wird es in internen Strukturen der mobilen App und der Webseite des Unternehmens verwendet.
Uber Eats . Die Hauptidee hinter der Erstellung der Plattform war, drei Arten von Teilnehmern zusammenzubringen: Restaurants, Fahrer und Kunden. Der schwierigste Teil für die Entwickler war die Umsetzung des eigentlichen Restaurant-Dashboards vom Web auf Mobilgeräte, sowohl Android als auch iOS. React Native war die einzige Möglichkeit. Obwohl nur ein Teil der mobilen App von Uber Eats auf React Native basiert, haben die Entwickler die erwarteten Ergebnisse erzielt. Die Kapazität des Frameworks half ihnen, den Service zu skalieren und auszubauen cordell broadus.
SoundCloud Pulse. Als das SoundCloud-Team auf die Idee kam, eine mobile App für Künstler zu erstellen, mit der sie ihre Konten und Urheberrechte verwalten können, existierte der Service zum Teilen von Musik bereits seit 10 Jahren. Und die größte Herausforderung bestand darin, die begrenzten Ressourcen und das dreiköpfige Entwicklerteam unterzubringen. React Native funktionierte hier aus zwei Gründen hervorragend. Erstens hat die gemeinsame Nutzung der Codebasis den Entwicklungsprozess erheblich beschleunigt. Zweitens war die Benutzerfreundlichkeit von RN zusammen mit dem automatischen Live-Neuladen des Codes gleichzeitig praktisch für die Entwickler.
Khan Academy. Eine der größten Online-Bildungsplattformen basiert größtenteils auf ReactJS. Khan Academy entschied sich, sein eLearning-Portal mit dem Framework zu erstellen, da dies unnötige Seitenumformungen verhindern und gleichzeitig seine Elemente reibungslos und effizient ersetzen würde.
Bloomberg . Das Online-Magazin hat sich bei der Entwicklung seiner mobilen App für React Native entschieden. In ihrem Beitrag im Tech at Bloomberg -Blog heißt es, es sei „das erste Tool, das das Versprechen einer plattformübergreifenden nativen App-Entwicklung wirklich einhält“.
In Bezug auf die Leistung ist die React-Plattform wirklich fortschrittlich, wenn man bedenkt, wie viele Unternehmen sie übernommen haben. Während andere Frameworks die Benutzeroberfläche verbessernIn Bezug auf die Softwareleistung zielt das junge und manchmal chaotische React Native darauf ab, die Art und Weise zu ändern, wie Apps mit Software und Hardware kommunizieren. ReactJS hingegen wurde von einer einfachen Idee zur Fehlerbehebung in eine Lösung verwandelt, die den Aufwand für die Webentwicklung erheblich optimieren und ihre Effizienz steigern kann.
Und React wird immer besser. Beispielsweise verspricht das Team große Umstrukturierungen, darunter Änderungen am vorhandenen Threading-Modell, asynchrones Rendering und eine Reihe anderer Reformen, die darauf abzielen, die Bibliothek flexibel und leichtgewichtig zu machen. Diese große Veröffentlichung war vorläufig für 2020 geplant.