メインコンテンツへスキップ

「ショーケース」というタグが付いた投稿1件

すべてのタグを表示

React Nativeで構築 - Build.comアプリ

·6分で読めます
Garrett McCullough
シニアモバイルエンジニア

Build.comは、カリフォルニア州チコに本社を置き、住宅改修用品のオンライン小売業者としては最大手の1つです。チームは18年間ウェブ中心のビジネスを堅調に展開しており、2015年にモバイルアプリについて検討し始めました。小さなチームと限られたネイティブ経験のため、独自のAndroidおよびiOSアプリを構築することは現実的ではありませんでした。代わりに、非常に新しいReact Nativeフレームワークにリスクを冒すことにしました。最初のコミットは2015年8月12日、React Native v0.8.0を使用して行われました!2016年10月15日には両方のアプリストアで公開されました。過去2年間で、アプリのアップグレードと拡張を続けてきました。現在、React Nativeバージョン0.53.0を使用しています。

アプリはhttps://www.build.com/appでご覧いただけます。

機能

私たちのアプリはフル機能で、ECアプリに期待されるすべての機能が含まれています。商品リスト、検索とソート、複雑な商品の設定機能、お気に入りなどです。標準的なクレジットカード決済方法のほか、PayPal、iOSユーザー向けにはApple Payを受け付けています。

期待されないかもしれない、いくつかの際立った機能は次のとおりです。

  1. 約40製品、90種類の仕上げに対応した3Dモデルが利用可能
  2. 拡張現実(AR)により、ユーザーは照明や蛇口が自宅でどのように見えるかを98%のサイズ精度で確認できます。Build.comのReact Nativeアプリは、Apple App StoreのARショッピングで特集されています!ARは現在、AndroidとiOSの両方で利用可能です!
  3. 共同プロジェクト管理機能により、人々がプロジェクトのさまざまな段階ごとに買い物リストを作成し、選定について協力できます。

私たちは、ARによる没入型ショッピングの次の段階を含め、アプリ体験を向上させ続ける多くの新しくエキサイティングな機能に取り組んでいます。

私たちの開発ワークフロー

Build.comでは、各開発者が自分に最適なツールを選択できます。

  • IDEには、Atom、IntelliJ、VS Code、Sublime、Eclipseなどがあります。
  • 単体テストについては、開発者は新しいコンポーネントに対してJestの単体テストを作成する責任があり、私たちはjest-coverage-ratchetを使用してアプリの古い部分のカバレッジを増やす作業に取り組んでいます。
  • ベータ版とリリース候補のビルドにはJenkinsを使用しています。このプロセスは私たちにとってうまく機能していますが、リリースノートやその他の成果物を作成するには依然としてかなりの作業が必要です。
  • 結合テストには、デスクトップ、モバイル、Webにまたがって作業するテスターの共有プールが含まれています。私たちの自動化エンジニアは、JavaとAppiumを使用して自動化された結合テストスイートを構築しています。
  • ワークフローの他の部分には、詳細なeslint設定、テストに必要なプロパティを強制するカスタムルール、問題のある変更をブロックするpre-pushフックなどがあります。

アプリで使用されているライブラリ

Build.comアプリは、Redux、Moment、Numeral、Enzyme、多数のReact Nativeブリッジモジュールなど、多くの一般的なオープンソースライブラリに依存しています。また、多数のフォークされたオープンソースライブラリも使用しています。これらは、放棄されたか、カスタム機能が必要だったためです。ざっと数えると、約115のJavaScriptとネイティブの依存関係があります。未使用のライブラリを削除するツールを検討したいと考えています。

私たちは現在、TypeScriptによる静的型付けの追加を進めており、オプショナルチェイニングも検討しています。これらの機能は、私たちがまだ目にしているいくつかの種類のバグを解決するのに役立つ可能性があります。

  • データが間違った型である
  • オブジェクトが期待した内容を含んでいないためにデータが未定義である

オープンソースへの貢献

私たちはオープンソースに大きく依存しているため、私たちのチームはコミュニティに貢献することにコミットしています。Build.comは、チームが構築したライブラリをオープンソース化することを許可し、私たちが使用しているライブラリに貢献することを奨励しています。

私たちは、いくつかのReact Nativeライブラリをリリースし、維持してきました。

  • react-native-polyfill
  • react-native-simple-store
  • react-native-contact-picker

私たちは、ReactとReact Native、react-native-schemes-managerreact-native-swipeablereact-native-galleryreact-native-view-transformerreact-native-navigationなど、多数のライブラリに貢献してきました。

私たちの道のり

過去数年間で、React Nativeとそのエコシステムは大きく成長しました。当初は、React Nativeのバージョンが上がるたびにバグが修正される一方で、さらにいくつかのバグが導入されるように見えました。たとえば、リモートJSデバッグはAndroidで数ヶ月間壊れていました。幸いにも、2017年にははるかに安定しました。

大きな課題として繰り返し直面してきたのが、ナビゲーションライブラリです。長い間、Expoのex-navライブラリを使用していました。それはうまく機能していましたが、最終的に非推奨になりました。しかし、当時は機能開発が盛んだったため、ナビゲーションライブラリを変更する時間を取ることはできませんでした。そのため、ライブラリをフォークしてReact 16とiPhone Xをサポートするようにパッチを当てる必要がありました。最終的に、react-native-navigationに移行することができ、今後もサポートが継続されることを願っています。

ブリッジモジュール

もう1つの大きな課題はブリッジモジュールでした。私たちが最初に始めたとき、多くの重要なブリッジが不足していました。私のチームメイトの1人が、アプリでAndroidの連絡先ピッカーにアクセスする必要があったため、react-native-contact-pickerを作成しました。また、React Native内の変更によって壊れたブリッジもたくさん見てきました。たとえば、React Native v40で破壊的な変更があり、アプリをアップグレードしたときに、まだ更新されていなかった3つか4つのライブラリを修正するためにPRを提出しなければなりませんでした。

今後の展望

React Nativeが成長し続ける中で、私たちのコミュニティへのウィッシュリストは次のとおりです。

  • ナビゲーションライブラリを安定させ、改善する
  • React Nativeエコシステム内のライブラリのサポートを維持する
  • プロジェクトにネイティブライブラリとブリッジモジュールを追加する体験を改善する

React Nativeコミュニティの企業や個人は、私たち全員が使用するツールを改善するために、時間と労力を自発的に提供してくれました。もしオープンソースに関わったことがないのなら、ぜひ皆さんが使っているライブラリのコードやドキュメントの改善に取り組んでみることをお勧めします。始めるのに役立つ記事はたくさんありますし、思っているよりもずっと簡単かもしれませんよ!