1737654446
2025-01-23 08:20:00
5年前、私たちは 発表された React Native (RN) は Shopify のモバイルの未来であると考えています。本日は、これまでの進歩、学んだ教訓、そして将来について共有できることを嬉しく思います。
要約すると、次の 3 つの主な理由から RN に切り替えることにしました。
- 一度書いてください – 同じ機能を 2 回 (iOS で 1 回、Android で 1 回) 構築するのをやめる
- 人材のポータビリティ – 開発者が iOS、Android、Web 上でスムーズに作業できるようにします
- より多くの価値を出荷する – 機能の同等性を追い求めるのではなく、ユーザーに価値を提供することに多くの時間を費やす
私たちの移行が非常に成功したことを皆さんと共有できることをうれしく思います。
- 同じ機能を 2 回構築する必要がなくなったことで、生産性が大幅に変わりました。
- エンジニアは Web とモバイルをまたいで作業できるため、チームは同じ人数でより多くの作業を行うことができ、新たな成長の機会が得られます。
- iOS と Android の間で機能の同等性を維持することは問題ではなくなり、より多くの価値を提供するために容量が解放されました。
- 当社のアプリは非常に高速です (99.9% クラッシュのないセッション)
- 私たちは、仕事に最適なツールであればどこでもネイティブを活用し続け、両方の長所を提供します。
過去 5 年間にわたり、私たちはすべてのアプリを React Native に移行してきました。各チームは、画一的なアプローチを使用するのではなく、アプリを移行する時期と方法を選択しました。これにより、RN を活用するという当社の戦略に沿った機能を提供し続けることができました。
私たちは何を学んだのでしょうか？
React Native アプリは高速です
私たちは Shopify のパフォーマンスを非常に重視しています。当社 CEO の Tobi Lutke 氏は、「すべての高速ソフトウェアが優れているわけではありませんが、すべての優れたソフトウェアは高速です」と述べています。 RN に切り替えるときに私たちが抱いた最大の疑問、そしてすぐに切り替えなかった主な理由は、RN でパフォーマンス目標を達成できるかどうかでした。
切り替えを決定する前に、広範なプロトタイピングを行い、有望な結果が得られました。また、パフォーマンスのボトルネックを解消するために Meta が行っていた作業をすべて確認し、リストなど、私たちが支援できる分野を特定しました。私たちは、RN がすぐにさらに速くなると予測し、オールインしました。
5 年間早送りすると、RN アプリは高速になります。 Shopify アプリで 500 ミリ秒未満 (P75) の画面読み込みを達成しました。その方法をご覧ください。 ここ、 ここ、 そして ここ。すべてのアプリで同様のパフォーマンスを達成しました。ネイティブと同様に、パフォーマンスのボトルネックを解消するには、適切なパターンとテクニックを適用する必要があります。
ネイティブと React Native の両方を使用してモバイル アプリを大規模に構築することに何年も費やした結果、ネイティブだからといって自動的に速いわけではなく、React Native だからといって自動的に遅いわけでもないことがわかりました。 RN はここ数年で大きく進歩し、これを使用して世界クラスのアプリを構築できるようになりました。
フレームワークが成熟し、チームがより多くの専門知識を開発するにつれて、これはさらに容易になると予想されます。私たちは今後も学んだことをコミュニティと共有していきます。
ホットリロードはすごいですね
RN を使用すると、変更が即座に反映されるのを確認できるため、完全に状況が変わりました。これはネイティブに関する最大の問題点の 1 つでした。コード ベースのサイズを考慮すると、最も些細な変更でもコンパイルしてエミュレータ/物理デバイス上で実行するまでに数分かかりました。これは時間を無駄にし、開発者のフローを中断します。 React Native のホット リロードにより、この問題は完全に解消されます。
Typescript が人材のポータビリティを解放
Typescript はユビキタスになり、開発者が React Web と React Native の間で移行して大きな成功を収めてきました。 Web 開発者は、iOS や Android のネイティブ開発よりも、RN を使用してモバイルでの作業を開始する方がはるかに簡単であると感じています。同様に、RN に慣れているモバイル開発者は、Web での作業が簡単であると感じています。
この柔軟性により、エンジニアにとってより多くの成長の機会が開かれるだけでなく、人員配置の柔軟性も向上し、チームが同じ数の開発者でより多くのことを達成できるようになります。また、Web とモバイル間でコードを共有する新たな機会が生まれ、より多くの活用が可能になります。
複数のプラットフォームで作業できる開発者がいることは非常に貴重です。これにより、より迅速な出荷が可能になり、開発者はあるテクノロジーから優れたアイデアを取り出して、それを斬新な方法で別のテクノロジーに適用することができます。また、テクノロジーをツールベルトのツールとして見る文化も生み出し、チームの視野を広げ、最も使い慣れたツールではなく、仕事に最適なツールを使用することを奨励します。
ネイティブ開発者が重要
優れたモバイル アプリを構築するには、iOS と Android を専門とするモバイル エンジニアが不可欠です。多くのモバイル製品を構築し、慣例や使いやすさを深く理解した経験やセンスは、何にも代えがたいものです。プラットフォーム層へのドロップダウン、バインディングの作成、マスターのビルドとリリース、配布などを行うには、ネイティブの専門知識が必要です。
また、無数のデバイス モデルにわたってアプリのパフォーマンスを最適化し、すべてのユーザーに一貫したユーザー エクスペリエンスを保証する上でも重要な役割を果たします。さらに、React Native のバージョン更新を管理したり、iOS や Android の新しいリリースに伴う新機能、API、ツールの変更を採用したりするには、ネイティブの専門知識が不可欠です。これらの専門家なしでは良い製品を構築することはできません。
私たちは、本番環境に対応したコードを出荷するために知っておく必要があることをすべて網羅したセルフサービス コースを通じて、ネイティブ モバイル開発者を React Native でトレーニングすることに投資しました。さらに、React Native にすでに習熟した開発者とのオフィス アワーを設定し、Q&A セッション、ペア プログラミング、コード レビューを通じてサポートを提供します。
また、JavaScript、Typescript、React の専門知識を備えた Web 開発者をモバイル チームに補充しました。これにより、ネイティブと React Native の両方に関する強力な専門知識が確保され、時間の経過とともにチーム全体のレベルが向上しました。
私たちの経験では、ネイティブ開発者と Web 開発者を適切に組み合わせることが、React Native を使用して優れたモバイル アプリを構築する鍵となります。
ネイティブコードは重要です
100% React Native はアンチゴールであるべきです。機能を一度だけ構築する場合には最適ですが、すべてに適したテクノロジではありません。
2D / 3D スキャンやデバイス上での AI モデルの実行など、デバイス ハードウェアを活用する最先端の機能を構築するには、依然としてネイティブが最適な方法です。また、ホームウィジェットやロック画面ウィジェット、Apple Watch アプリとコンプリケーション、アプリインテント、Siri ショートカットなど、メモリ制限のある機能の構築にも適しています。
ネイティブは、長時間実行されるバックグラウンド ジョブにも適した選択肢です。たとえば、当社の POS アプリは、オフラインでも取引を処理できるように、バックグラウンドで大量のデータをダウンロードして同期します。ネイティブ コードを活用することで、その作業を完全にバックグラウンドにオフロードすることができ、アプリのパフォーマンスに影響を与えないようにすることができました。 RN がすぐに提供する強力な相互運用性のおかげで、これは簡単です。
ネイティブと考えるのではなく または ネイティブに反応し、ネイティブに考える そして ネイティブに反応します。
RN を使用してほとんどの機能を 1 回だけ構築し、その後、最適な用途にネイティブを活用することで、時間を大幅に節約できることがわかりました。これが、チームにネイティブの専門知識を持つことが重要である理由でもあります。
デバッグはもっとひどいです
React Native でのデバッグは不安定であり、VSCode で正しく構成するにはある程度の作業が必要です。一方、iOS と Android には、十分に機能する強力なデバッグ機能があります。メタは最近コンプリートしました リライト React Native のデバッガ スタックの一部を紹介します。これは有望に見えます。私たちはそれを世界クラスにするために彼らと協力しています。
React Native の更新はシームレスではありません
React Native の新しいバージョンごとにアプリを更新するには、かなりの量の作業が必要となり、多くの場合、コード ベースの再構築が必要になります。私たちは、少数のローテーション開発者グループがこの問題を処理し、残りのチームが機能開発に集中することでこの問題を軽減しました。
フレームワークが成熟するにつれて、これはさらに容易になると予想しています。 新しいアーキテクチャ より広く採用されています。
サードパーティライブラリへの依存度が高まる
React Native フレームワークはネイティブに比べて包括的ではないため、最終的にはより多くのサードパーティ ライブラリを使用する必要があります。エコシステムは近年大幅に成熟しており、必要なものがすべて揃った、よく管理されたライブラリを簡単に見つけることができます。
ただし、これにより、継続的に最新の状態に保つためのオーバーヘッドが追加され、サプライ チェーン攻撃の対象領域が増加します。を使用して自動依存関係更新を実装することで、この問題を軽減しました。 場合によります 自動化されたコード スキャンにより、悪意のあるコードを捕捉します。
私たちは、このフレームワークがより独自の意見を持ち、すぐに使える機能をさらに提供できることを楽しみにしています。
共有基盤により大量の活用が可能になります
私たちが最初に React Native を採用し始めたとき、ネイティブの場合のように RN を使用してモバイル アプリを構築する長年の経験はありませんでした。また、何年にもわたって構築してきた共有のネイティブ基盤を活用できなかったため、各チームが独自の方法で構築しました。
当時は、RN でアプリを構築する方法をまだ学んでいたため、これらの共有基盤の作成に投資する価値はありませんでした。私たちは再び初心者であり、まず専門知識を身につけるために時間と努力を費やす必要がありました。
このアプローチは、すぐに軌道に乗ってアプリを移行するのに最適でしたが、チームが同じ問題を何度も解決し、車輪の再発明が必要になることもありました。これは意識的なトレードオフであり、一貫性よりも速度を最適化しました。
2023 年末までに、すべてのアプリが十分に成熟し、アプリの一貫性を確保できるようになりました。それ以来、ID、リアルタイム監視、パフォーマンス測定などの共通コンポーネントを、すべてのアプリが使用する共有ライブラリに抽出し始めました。
これにより、チームは会社の他の部門ですでに解決されている問題を解決することを避けることができます。また、知識と専門知識も広がり、すべてのアプリはこれらの共有コンポーネントに加えられた改善の恩恵を自動的に受けます。
2025 年もこの作業を継続し、アプリ間で共有するコードの量をさらに増やす予定です。これにより、大きな活用力が得られ、ユーザーにより多くの価値を提供するために適用できるエンジニアリング帯域幅が解放されます。
React Native の将来
React Native の将来は明るく、Meta はプロジェクトの優れた管理者であると考えています。リリースごとに定期的に改善が行われており、ロードマップは開発者のフィードバックに大きく影響されています。私たちは、高速アプリの構築が今後もさらに容易になると予想しています。私たちも次のことに興奮しています。 新しいアーキテクチャ そしてそれを私たちのアプリに採用することに尽力しています。
このコミュニティは、React Native を使用する Microsoft、Amazon、Tesla、SpaceX、Coinbase などのいくつかの企業や、高品質のサードパーティ ライブラリとフレームワークを出荷する開発者によっても繁栄しています。
Shopify では、ソフトウェアの構築はチーム スポーツであると信じており、オープン Web、オープンソース、オープン スタンダードに取り組んでいます。これは次のようにして行われます。
- React Native へのコードの貢献
- RN リリースの共同リリース キャプテンを務める
- などの非常に影響力のあるオープンソース プロジェクトを後援します。 React Native Skia そして 蘇生された
- 次のようなオープンソース プロジェクトを公開する フラッシュリスト、 リスタイル、 そして トップハット
さらに、2025 年には React Native Working Group を再開します。これにより、組織内でRNをサポートする上級リーダーが集まり、エコシステム内の主要な課題を特定し、投資に優先順位を付け、コラボレーションを強化し、重複した取り組みを削減します。以前は、Meta、Twitter、Coinbase、Microsoft などの企業がメンバーに含まれていました。この取り組みに参加することに興味がある場合は、 連絡する！
React Native は過去 5 年間で大きな進歩を遂げ、人々が React Native を採用しない原因となっていた多くの制限はもう存在しません。しばらく RN の使用を試していない場合は、今が再検討する良い機会です。私たちは、Meta やコミュニティの他のメンバーと協力して、より良いものにしていくつもりです。
著者について
Mustafa Ali は Shopify のエンジニアリング ディレクターです
#Shopify #における #React #Native #の #年間