React-native 0.68 mit neuer Architektur

Seit 2018 hat das React Native-Team viel Zeit und Mühe investiert, um die aktuelle Architektur des Frameworks neu zu gestalten. Am 30. März 2022 wurde die Version 0.68 von React Native mit einer völlig neuen Kernimplementierung veröffentlicht , um sich dem Google Flutter-Framework anzunähern. In diesem Artikel werde ich versuchen, die Dinge einfach zu halten und die folgenden Hauptthemen zu erklären:

• Aktuelle Architektur
• Aktuelle Probleme
• Neue Architektur
• Neue Vorteile

 

Hinweis ⚠️ Dies ist die erste React Native-Version, die Unterstützung für die neue Architektur bietet. Sie befindet sich noch im experimentellen Modus, die Implementierung der neuen Architektur ist also noch optional.

  Wahrscheinlich werden Sie auf externe Bibliotheken stoßen, die noch nicht die neue Architektur verwenden und nicht korrekt funktionieren, aber die React-Dokumentation erklärt hier, wie man sie migriert. Ich würde empfehlen, zumindest zu versuchen, Ihre aktuelle Anwendung zu aktualisieren, um die Fehler und Bibliotheken zu erkennen, die Sie ändern müssen, oder sich darauf vorzubereiten, wenn die neue Architektur zum Standard wird. Mal sehen, was sich von nun an ändert:

---

 

Aktuelle Architektur

Die (alte) Architektur von React Native besteht im Wesentlichen aus 3 Schichten: Javascript Hier platzieren wir den JS-Code und führen die Logik unserer Anwendung aus. Brücke Nativ Verantwortlich für das Rendern der nativen Benutzeroberfläche.

---

 

Aktuelle Probleme

React Native ist ein leistungsfähiges Framework, das seit Jahren von großen Unternehmen eingesetzt wird, aber nach ein paar Implementierungen konnte ich die folgenden größten Probleme auflisten meiner Meinung nach im Zusammenhang mit dieser Architektur: Große App gleich langsame App Ich weiß, dass viele Entwickler sagen werden, dass das nicht stimmt und dass es wahrscheinlich an der Art und Weise liegt, wie ich den Code oder die Apps implementiere, dass ich meinen Bildschirm in kleinere Komponenten aufteilen sollte, usw. Aber der Punkt ist, dass neue Frameworks wie Flutter die Leistung verbessern, die im Vergleich zu React Native kein großes Problem mehr darstellt, und das ist auch ein Grund, warum sie den gesamten Kern neu aufbauen. Die App stürzt ab und nicht einmal React kann erklären, warum Wenn Sie noch nie eine App implementiert haben und alles zurücksetzen mussten, weil ein interner Fehler innerhalb der asynchronen Serialisierung auftritt und der Fehler bedeutungslos ist, haben Sie wahrscheinlich nicht alles ausprobiert, was React Native Ihnen bieten kann. Es ist frustrierend, wenn Ihre App plötzlich abstürzt und die Informationen längst in all diesen JSON-Parsen verloren gegangen sind, so dass es unmöglich ist, zu verstehen, was in Ihrer App vor sich geht. Es gibt keine Garantie, dass die Daten auf der anderen Seite (Bridge x JSC) rechtzeitig ankommen. Synchrone native Komponenten sind nicht möglich (ohne Nachteile) Da synchrone native Komponenten von Natur aus asynchron sind, kann auf sie in der aktuellen Architektur nicht direkt zugegriffen werden, ohne dass ein Workaround erforderlich ist, der andere seltsame Fehler und eine Verlangsamung der Kommunikation zwischen den Schichten zur Folge haben kann. Es ist fast ein Albtraum.

---

 

Neue Architektur

Erneuerung der alten Brücke:

• Codegen - Automatisiert die Kompatibilität zwischen Javascript und nativem Code, indem es die von Fabric und TurboModules benötigten Schnittstellen verwaltet und die Ausführung von Laufzeittypen vermeidet.
• JSI - Javascript-Schnittstelle, die die native Schnittstelle verbindet und die Notwendigkeit der JSON-Serialisierung vermeidet. Außerdem enthält sie eine API zur Handhabung synchroner nativer Schnittstellen.

 

Neue Module:

• Stoff - Die Umstrukturierung des UI-Managers.
• TurboModules - Ermöglicht es, die Komponente nur dann zu laden, wenn sie benötigt wird, um die Ladezeit der App zu optimieren.

---

 

Neue Vorteile

• Zugriff auf nativen asynchronen nativen Code mit dem neuen synchronen Rendering
• Über JSI kennt der Javascript-Code nun die Schnittstelle zum nativen Code und führt sie zusammen. Damit entfällt die Magie, die während der JSON-Serialisierung stattfindet, was die Leistung der App verbessert.
• Stabilere Anwendungen aufgrund der Kommunikation zwischen Javascript-Schnittstellen und Fabric/Turbo-Modulen.

---

 

Bonuspunkt

In dieser neuen Version ist auch die neue Open-Source-Javascript-Engine Hermes standardmäßig aktiviert, die viel verspricht: Verbesserte Startzeit Geringere Speichernutzung Kleinere App-Größe