Get best of the week

React Native: Neuer Meilenstein in der mobilen Entwicklung von Shopify

Oder warum Shopify zu React Native wechselt.

Nach vielen Jahren nativer mobiler Entwicklung haben wir uns entschlossen, die Entwicklung mobiler Anwendungen auf React Native mit Hochdruck voranzutreiben. Im Folgenden wird klar sein, dass diese Entscheidung für uns nicht einfach war.

Am Ende eines jeden Quartals sehen wir das gleiche Bild: Die meisten unserer Kunden kaufen über mobile Geräte ein (im dritten Quartal des vergangenen Jahres betrug ihr Anteil 71%). Black Friday und Cyber ​​Monday sind die heißeste Zeit für unsere Verkäufer, und die Aktivitäten der Kunden sind heutzutage nicht mehr aktuell. In diesem Jahr verzeichneten Shopify-Partner während des Rabattzeitraums einen Anstieg der Bestellungen von Mobilgeräten um 3 Prozent, und der durchschnittliche Anteil dieser Einkäufe betrug 69% der Gesamtzahl der Transaktionen .

Warum haben wir uns für React Native entschieden? Und warum jetzt? Was wird jetzt mit unserer nativen mobilen Entwicklung passieren? Sie können diese Fragen nicht schnell und kurz beantworten. Beginnen wir mit dem Hintergrund.

Shopify Mobile Development - 2019


Wir haben bei Shopify eine spezielle Praxis entwickelt, um uns auf relativ junge Technologien zu verlassen, die sich in einem frühen Entwicklungsstadium befinden oder gerade erst an Popularität gewinnen. Es hilft uns, schneller zu wachsen.

Normalerweise konzentrieren wir uns auf verschiedene Technologien und verlassen uns bei der Entwicklung hauptsächlich auf diese. Dies gibt mehrere Wachstumspunkte:

  • Wir bilden eine einzigartige Expertise für eine kleine Anzahl von Technologien (und leisten oft einen bedeutenden oder sogar großen Beitrag zu deren Entwicklung).
  • Jede technologische Lösung hat ihre Engpässe, Feinheiten, und wir gehen tief in sie ein.
  • , , ;.
  • .

Gleichzeitig tauchen ständig neue Technologien auf, die uns die Möglichkeit geben, die Effizienz von Ingenieuren oder die Produktivität unserer Produkte schrittweise zu steigern. Wir experimentieren viel, um neue Möglichkeiten zu eröffnen und quantitative Verbesserungen in qualitative umzusetzen, aber letztendlich bringen wir nicht alle unsere Errungenschaften in den technischen Hauptprozess ein.

Wenn wir junge Technologien, Sprachen oder Frameworks einführen, versuchen wir, die Wahrscheinlichkeit von Erfolg oder Misserfolg zu berechnen. Anstatt Risiken zu vermeiden, untersuchen, erforschen und bewerten wir verschiedene Risiken im Detail, basierend auf den individuellen Merkmalen unserer Projekte. Wie so oft finden sich in der Risikozone versteckte Chancen. Und wir denken hauptsächlich darüber nach, wie wir die negativen Aspekte des Risikos neutralisieren können:

  • , ?
  • , , ?
  • , () ?

Ruby on Rails befand sich in der Anfangsphase der Entwicklung und nahm noch keine Form als vollwertiges Framework an, als Toby (unser CEO) 2004 der Hauptteilnehmer am Open-Source-Projekt wurde. Ruby on Rails gilt seit vielen Jahren als frivole, ineffiziente Lösung . Die Auswahl und Untersuchung dieser Technologie in einem so frühen Entwicklungsstadium verschaffte Shopify jedoch einen Wettbewerbsvorteil, obwohl dies eine unpopuläre Wahl war. Mit Ruby on Rails konnte das Team schnell Produkte erstellen und Ressourcen gewinnen. Immerhin war es moderne Technologie mit einem höheren Abstraktionsgrad als herkömmliche Programmiersprachen und Frameworks, die zu dieser Zeit existierten. Ebenso hat Paul Graham einmal erzähltdarüber, wie er beschlossen hat, Lisp zu verwenden, um Viaweb zu erstellen. 6 der 10 teuersten Unternehmen, die Y Combinator heute verwendet, verwenden Ruby on Rails (obwohl das Framework immer noch nicht sehr beliebt ist). Auf der anderen Seite verwendet keines der 10 teuersten Unternehmen Y Combinator Java, das als bewährte und ziemlich zuverlässige Unternehmenslösung gilt.

Ebenso hat Shopify vor 2 Jahren beschlossen, auf Google Cloud umzusteigen .. Auch dies ist ein ziemlich riskantes Unterfangen für den zweitgrößten E-Commerce-Dienst in den USA (Stand 2019) - die Cloud-Migration außerhalb seiner eigenen Rechenzentren durchzuführen, um ein relativ neues Produkt, Google Kubernetes Engine, zu erhalten. Wir haben gesehen, dass die Wertschöpfungskurve uns dazu veranlasst hat, uns auf das zu konzentrieren, was wir wirklich gut können (dies hilft dem Geschäft), sodass andere (in diesem Fall Google Cloud) die harte Arbeit der Wartung von Geräten in der Produktion übernehmen können Bedingung, mit der Gewährleistung von Kapazität, Sicherheit, mit der Aktualisierung des Betriebssystems usw.

Native reagieren - was ist das?


Im Jahr 2015 kündigte Facebook das Open-Source-Framework React Native an und veröffentlichte es . Zuvor wurde es bereits intern für die Entwicklung seiner mobilen Anwendungen verwendet. React Native ist ein Framework für die plattformübergreifende Entwicklung von nativ angezeigten mobilen Anwendungen unter Verwendung der React js-Bibliothek . Somit ist es möglich, die oberste js-Bibliothek zu verwenden, um die Benutzeroberfläche nativer mobiler Anwendungen zu erstellen.

In Shopify war diese Idee (damals gewissermaßen auch heute) skeptisch, aber viele hielten sie für vielversprechend. Also das nächste Shopify Hackdays Eventwar ganz React Native gewidmet. Obwohl das Team dann die Vorteile des Frameworks zu schätzen wusste, entschieden wir, dass wir 2015 die React Native-Anwendung nicht implementieren konnten, auf die wir später stolz sein konnten. Dies war hauptsächlich auf Leistungsprobleme und den Mangel an vollständiger Unterstützung für Android OS zurückzuführen. Wir haben jedoch deutlich gemacht, dass uns das Paradigma der reaktiven Programmierung und GraphQL gefallen haben . Darüber hinaus haben wir nach einem Treffen mit React Native einen Renderer für iOS entwickelt und ausgelegt . Im Jahr 2015 haben wir diese Technologien auf unserem Stack implementiert, React Native jedoch nicht für die Massenentwicklung von Mobilgeräten verwendet. Unsere ersten Experimente werden hier ausführlich beschrieben .

Bis heute hat Shopify die native mobile Entwicklung als Standard. Wir haben zwei Teams gegründet, mobile Tools und Stiftungen , die sich auf iOS und Android konzentrierten, und uns dabei geholfen, den Entwicklungsprozess zu beschleunigen. Trotz der Tatsache, dass sie gute Ergebnisse zeigten, scheint es uns, dass die Entwicklung effektiver wird, wenn wir:

  • Wir nutzen die Leistungsfähigkeit von JavaScript und anderen Webtechnologien in der mobilen Entwicklung.
  • Einführung des reaktiven Programmierparadigmas bei der Entwicklung von Clientanwendungen;
  • Wir werden die Entwicklung für iOS und Android auf React Native in einem technologischen Stack zusammenfassen.

Wie funktioniert React Native?


Mit React Native können Sie plattformübergreifend nativ angezeigte mobile Anwendungen mit JavaScript erstellen. React Native ähnelt React: Wir erstellen auch deklarativ eine Benutzeroberfläche in JS mit einem Baum von UI-Elementen oder mit einem virtuellen DOM (VDOM) in Bezug auf ReactJS. Wenn ReactJS Schnittstellenelemente in einem Browser anzeigt, konvertiert React Native VDOM-Objekte in native plattformspezifische visuelle Elemente zur Anzeige auf Mobilgeräten mithilfe von Ordnern: Native Komponenten werden in React eingeschlossen. Wir sind nur an den Android- und iOS-Plattformen interessiert, aber es gibt Enthusiasten, die an der Entwicklung von React Native für Windows, MacOS und Apple TVOS interessiert sind.


ReactJS interagiert mit dem Browser und React Native interagiert mit mobilen APIs.

Wann verwenden wir React Native nicht?


Es gibt Situationen, in denen das Shopify-Team React Native nicht zur Entwicklung mobiler Anwendungen verwendet. Insbesondere, wenn wir verpflichtet sind:

  • Starten der Anwendung auf der alten Hardware (CPU <1,5 GHz);
  • anspruchsvolle Verarbeitung;
  • ultrahohe Leistung;
  • viele Threads laufen im Hintergrund.

Bitte beachten Sie: Bibliotheken auf niedriger Ebene, einschließlich verschiedener Open Source-SDKs, bleiben vollständig nativ. Wir können unsere eigenen nativen Module erstellen, wenn wir in engerem Kontakt mit der Hardware stehen möchten.

Warum wechseln wir gerade zu React Native?


Wir haben 3 Hauptgründe:

  1. Nach dem Erwerb des Tictail-Marktplatzes (der Dienst wurde auf React Native nach dem Prinzip von Mobile First entwickelt) im Jahr 2018 haben wir gesehen, welche Art von Entwicklung React Native erhalten hat, und im Jahr 2019 haben wir in drei weitere Projekte investiert.
  2. Shopify nutzt React aktiv in der Webentwicklung. Jetzt ist es an der Zeit, unser Know-how in die Entwicklung mobiler Anwendungen einzubringen.
  3. Wir haben festgestellt, dass die Leistungskurve hochgekrochen ist (zum Beispiel, was sie vorher konnte und was Google Text & Tabellen jetzt im Vergleich zu Microsoft Office auf dem Desktop kann) und auf lange Sicht auf React Native gewettet hat - so wie wir einst an Ruby geglaubt haben Rails, Kubernetes und Rich Media.

Mobile Entwicklung bei Shopify im Jahr 2019


In Shopify können Verkäufer und Käufer auf verschiedene Arten interagieren: über Web- und mobile Anwendungen. Alle drei Jahre experimentierten unsere drei Teams mit React Native und entwickelten daher drei mobile Anwendungen: Arrive, Point of Sale und Compass.

Nach unseren Experimenten haben wir folgende Schlussfolgerungen gezogen:

  • Beim Kopieren der Arrive-App nach React Native stellte das Team fest, dass sich die Produktivität im Vergleich zur nativen Entwicklung verdoppelt hat, selbst wenn Sie nur für eine Plattform schreiben.
  • Beim Testen der Android-Version der Point of Sale-App bei geringem Stromverbrauch haben wir festgestellt, dass die Anwendung mit einer niedrigeren CPU-Frequenz ausgeführt wird: 1,5 GHz (geschrieben in React Native) gegenüber 2 GHz (native Entwicklung);
  • Wir haben vorläufig geschätzt, dass der Anteil des plattformunabhängigen Codes ~ 80% betragen würde; und wir waren überrascht, als sich herausstellte, dass es in Wirklichkeit viel höher war: 95% für Arrive und 99% für Compass.

Es lohnt sich jedoch, eine Reservierung vorzunehmen: Obwohl wir beschlossen haben, neue Anwendungen auf React Native zu schreiben, bedeutet dies nicht, dass wir alle unsere alten Anwendungen neu schreiben werden.

Ankommen


Ende 2018 haben wir beschlossen, eine unserer beliebtesten Clientanwendungen in React Native, Arrive , umzuschreiben . Dies ist eine leistungsstarke, hoch bewertete iOS-App mit Millionen von Downloads. Wir haben uns für Arrive entschieden, weil wir keine Android-Version hatten. Also haben wir die Benutzer von Android-Geräten getroffen. Jetzt sind sowohl die iOS- als auch die Android-Version in React Native mit einem Anteil von 95% am gesamten plattformübergreifenden Code geschrieben.

Beim Umschreiben haben wir folgende Ergebnisse erzielt:

  • Beim Ausführen der plattformübergreifenden Version für iOS treten weniger Abstürze auf als in der nativen Version.
  • Wir haben die Version für Android OS gestartet.
  • Sowohl mobile als auch nicht mobile Entwickler konnten an dem Projekt arbeiten.

Darüber hinaus konnte das Team eine hervorragende Methode zur schnellen Ausführung von Pull-Requests „Work-in-Progress“ ausprobieren. Scannen Sie einfach den QR-Code aus dem Github-Kommentar mit Ihrem Telefon, und das JS-Bundle Ihrer Anwendung wird aktualisiert. Somit können Sie die Anwendung jedes Mal sofort aktualisieren und ihre aktuelle Version verwenden. Unsere Tankstelle hat diesen Vorgang kürzlich auf Twitter beschrieben .

Kasse


Anfang 2019 haben wir ein 6-wöchiges Experiment mit unserer Flaggschiff- POS-App (Point of Sale) durchgeführt, um festzustellen , ob sie ein guter Kandidat für das Umschreiben von React Native ist. Wir haben uns intensiv mit dieser Frage befasst, da unsere Einzelhändler erwartet haben, dass wir die Antwortzeit unserer Anwendung halbieren können: Der Prozess des Kundendienstes mit unserer Anwendung sollte im Muskelgedächtnis der Verkäufer festgelegt werden, und sie sollten nicht davon abgelenkt werden.

Um die Anforderungen unserer Einzelhändler zu erfüllen und gleichzeitig die Entwicklung von React Native für POS-Geräte zu verstehen, haben wir beschlossen, eine neue native mobile Anwendung für iOS zu erstellen und eine Version für Android OS auf React Native zu schreiben.

Wir haben zwei separate Teams für diese Aufgaben zugewiesen. Hier ist der Grund:

  1. Wir hatten bereits ein Team mit starker Erfahrung in iOS, einschließlich Entwicklern nativer POS-Anwendungen.
  2. Zusätzlich zur direkten Leistung der Anwendung wollten wir in der Lage sein, unsere Entwicklungsgeschwindigkeit auf React Native zu testen und all dies mit unserem Goldstandard zu vergleichen, dh mit der nativen iOS-Entwicklung.
  3. Um den hohen Leistungsanforderungen der Verkäufer gerecht zu werden, haben wir beschlossen, alle Facebook-Updates auf React Native umzustellen (es stellte sich jedoch heraus, dass dies für die Leistung nicht kritisch ist). Durch die Identifizierung separater Teams für die Arbeit an zwei Projekten haben wir die mit der Störung des Release-Plans verbundenen Risiken verringert.

Wir haben den umgeschriebenen POS auf der Unite 2019 angekündigt . Beide Versionen, iOS und Android auf React Native, werden ab 2020 verfügbar sein.

Kompass


Spotify verfügt über ein Start-Team, das Kunden bei der Gründung ihres eigenen Unternehmens unterstützt. Bevor das Unternehmen eine grundlegende Entscheidung zur Entwicklung mobiler Anwendungen auf React Native traf, untersuchte dieses Team Flutter und React Native im Detail . Die Wahl fiel auf React Native, und jetzt gibt es Beta-Versionen von iOS- und Compass- Android- Anwendungen. Darüber hinaus ~ 99% des Codes, den sie gemeinsam haben.

Die ersten Veröffentlichungen werden innerhalb von drei Monaten veröffentlicht.

Mobile Entwicklung in Shopify 2020 ++


Wir haben viele interessante Dinge für 2020 vorbereitet.
Werden wir unsere nativen mobilen Apps neu schreiben? Nein. Obwohl diese Entscheidung von jedem Team unabhängig getroffen wird.
Werden wir native Entwickler einstellen? Ja, viel !
Wir möchten führende Mitglieder der React Native-Community werden, plattformspezifische Komponenten erstellen und weiterhin die Feinheiten jeder Plattform verstehen. Und das erfordert ein starkes Fachwissen. Hört sich gut an, oder?

Zusammenarbeit und Open Source


Wir glauben, dass Softwareentwicklung ein Teamspiel ist. Wir sind an der Entwicklung von Open Web, Open Source und anderen offenen Standards beteiligt.

Wir leisten einen Beitrag zur Finanzierung der Projekte von Software Mansion und Krzysztof Magera (Mitbegründer von React Native für Android) im Zusammenhang mit React Native.
Wir arbeiten mit William Candillon (Leiter von Can It Be Done in React Native auf dem YouTube-Kanal) bei Architektur- und Leistungsverbesserungen zusammen.

Wir planen, bei der Automatisierung eng mit dem React Native-Team von Facebook zusammenzuarbeiten, Bibliotheken von Drittanbietern zu erstellen und einige der Module im Lean Core-Projekt zu überwachen.

Zusammen mit Discord arbeiten wir aktiv daran, schnell eine Open-Source-Version der FastList for React Native-Bibliothek vorzubereiten (mit der Sie nur die Listenelemente rendern können, die sich im sichtbaren Bereich befinden) und für Android OS zu optimieren.

Unsere Tooling- und Foundation-Befehle für React Native


Wenn Sie sich auf Technologie verlassen und sich damit beschäftigen, möchten Sie die maximale Wirkung erzielen. Um schnell Ziele zu setzen und dieses Ziel zu erreichen, haben wir zwei Arten von Teams erstellt, die anderen Shopify-Mitarbeitern helfen, produktiv zu sein. Der erste Typ ist das Tooling-Team, das bei der Konfiguration, Integration und Bereitstellung hilft. Der zweite Typ ist das Foundation-Team, das sich mit SDK, Code-Wiederverwendung und Open Source befasst. Im Jahr 2020 begannen beide Teams, sich in Richtung React Native zu entwickeln.

Unsere beliebte Shopify Ping-App, mit der Sie mit Hunderttausenden von Kunden chatten können, ist derzeit nur in der iOS-Version verfügbar. Im Jahr 2020 werden wir in unserer Niederlassung in San Francisco, in der wir Mitarbeiter einstellen, an einer Version für Android OS mit React Native arbeiten.

Im Jahr 2019 veröffentlichte Twitter Desktop- und mobile Webanwendungen mit einer Technologie namens React Native Web. Der Name mag etwas verwirrend sein, aber der Hauptunterschied besteht darin, dass Sie mit dieser Technologie denselben React Native-Stack für die Entwicklung von Webanwendungen verwenden können. Infolgedessen verfolgte Facebook sofort Nicholas Gallagher , den Hauptentwickler des Projekts. Im Jahr 2020 werden wir bei Shopify auch einige Experimente mit dem React Native Web durchführen .

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles