React Nativeを活用したアプリ開発体制/sapuri meetup

Slide 1

Slide 1 text

Product Meetup #1 React Nativeを活用したアプリ開発体制 @hotchemi

Slide 2

Slide 2 text

01 02 03 04 05 Agenda | 自己紹介なぜReact Nativeなのか Quipperにおけるアプリ開発ハイブリッド開発への挑戦振り返り・まとめ

Slide 3

Slide 3 text

01 自己紹介

Slide 4

Slide 4 text

自己紹介 ● Shintaro Katafuchi | @hotchemi ● Mobile Developer | Engineering Manager ○ Android/iOS/React Nativeの開発や採用、マネジメントを担当 ● 2013年株式会社リクルートテクノロジーズ入社 ○ 旧受験サプリのQuipper移管に伴い2016年Quipperに異動

Slide 5

Slide 5 text

02 なぜReact Nativeなのか

Slide 6

Slide 6 text

React Nativeとは ● Facebookが開発するクロスプラットフォーム用フレームワーク ● 端的に言うとReactでNativeアプリのUIを作れる ○ “Learn Once, Write Anywhere” ● Facebook, Instagram, Pinterest, Skype, Microsoft, Discord等が採用 ○ Quipperでは2017年秋より検証、導入を開始

Slide 7

Slide 7 text

なぜReact Nativeなのか ● 急増するモバイル開発の需要に対応する為の手段 ○ サプリユーザーのアクセスの半数以上はモバイルから ● フロントエンド開発のクロスファンクショナル化 ○ 全社的にReact/TypeScript化を進める中でWeb/Appの垣根を無くす ● 新技術への挑戦、より良い開発環境を求めていく

Slide 8

Slide 8 text

Daily Active User

Slide 9

Slide 9 text

よくある誤解 ● 「React Nativeだからアプリは本気じゃないんでしょ?」 ○ No! Nativeと同等のクオリティでなければ出しません。超本気です ● 「React NativeだからNativeエンジニアは採用しないんでしょ？」 ○ No! React Nativeを真に使い倒すにはNativeの知識が不可欠です ● 「ずっとReact Native使っていくんです？」 ○ チームとプロダクトの状況次第なのでこだわりません！

Slide 10

Slide 10 text

03 Quipperにおけるアプリ開発

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

forCOACHES ● 合格特訓コースのコーチ専用業務アプリ ● DeployGateとApple Developer Enterprise Programを用いて配信 ● 100% React NativeアプリをCode Pushを用いてOTA配信を実現 ※ 参考: QuipperでのCodePushを使ったOTA配信とその自動化

Slide 13

Slide 13 text

開発体制 ● ほぼWebエンジニアのみで開発/運用を回している ○ NativeエンジニアはCIスクリプトやライブラリを書いたりする ○ Nativeアプリのビルドは面倒な事が多いが徹底した自動化で対応 ● 100%TypeScriptなので特別な事はしていない ○ いわゆる普通のReact+Redux構成 ○ Navigationやpushは3rd partyライブラリを利用

Slide 14

Slide 14 text

ライブラリ ● Navigation: react-native-navigation ● Push: react-native-fcm ● Redux: typescript-fsa, redux-persist, redux-thunk, redux-throttle ● UI: native-base ● i18n: react-native-i18n ● Others: react-native-code-push, react-native-sentry, react-native-config

Slide 15

Slide 15 text

Code Pushを用いたRelease ● 開発期間終了後にリリース向けの Pull Requestを自動で作成 ● テスト後、プロダクトマネージャーが Pull Requestをマージすると自動で OTA配信が実行される ● コーチがアプリを起動するといつの間にか更新されている

Slide 16

Slide 16 text

スタディサプリ高校・大学受験 ● 日本中の中学・高校生が日常的に学習に利用 ● iOSはSwift、AndroidはKotlin/Java で開発を進めてきた ● 今年から徐々にReact Nativeを混ぜたハイブリッド開発スタイルに移行中

Slide 17

Slide 17 text

スタディサプリ高校・大学受験 ● メッセージ、プロフィール、宿題機能など幾つかのコンポーネントをReact Nativeでリプレース中 ● Nativeに違和感なく溶け込む実装を実現できるかにこだわっている

Slide 18

Slide 18 text

04 ハイブリッド開発への挑戦

Slide 19

Slide 19 text

ハイブリッド開発への挑戦 -チーム体制- ● iOS: 2名(JP) ● Android: 2名(JP) ● React Native: 2名(PH) ● iOS/Android/RN全部合わせたMonorepoで開発 ○ CircleCI 2.0のworkflow, cacheを利用して効率的なCIを実現 ○ 詳しくは弊社ブログを参照

Slide 20

Slide 20 text

ハイブリッド開発で鍵になるのはデータの同期戦略とUIの一貫性

Slide 21

Slide 21 text

ハイブリッド開発への挑戦 -データの同期戦略- ● Reduxを使ってもNative側にもインフラストラクチャ層があるので実際には Single Storeにならない ● NativeとRNで双方向のデータ同期を考え始めると破綻する(した) ● データの同期が必要な設計を可能な限り避ける。やむを得ない場合は単方向で同期するように設計する事 ○ スタディサプリではUserに関するデータだけNative→RNのフローで同期している

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

ハイブリッド開発への挑戦 -UIの一貫性- ● WebViewではないのでOS標準のコンポーネントを扱う ○ iOSはHuman Interface Guideline、AndroidはMaterial Design Guidelineをしっかり理解する ● 画面遷移は”Native感”を出す為にとても重要。色々なライブラリを試したが結局ViewController/Activityベースの自作モジュールを利用 ○ iPhone X対応やCustom Transition等の要件に対応しやすい ○ JSで書けるCustomViewをアプリに乗せていくイメージ

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

05 振り返り・まとめ

Slide 26

Slide 26 text

振り返り -Good Part- ● (iOSでは) Nativeと見分けがつかないUIを実現できた ○ パフォーマンスについて良く聞かれるがJS専用のthreadで処理を行う為全然良い。初期化時間はまだ問題になっていない ● Webエンジニアを開発に巻き込み開発をスケールできた ● ロジック層やTypeScriptのinterfaceをWebと共有できそう ● React+Reduxの疎な設計のおかげでテストが書きやすい&実行しやすい

Slide 27

Slide 27 text

振り返り -Bad Part- ● Androidで問題が多発... ○ Fragmentを使用しているとAPI設計的に順次導入しづらい ○ WebKitをNDKとしてbundleするのでAPKサイズが増加 ● (そもそも) クロスプラットフォーム開発は難しい ○ 両OSで動作確認しながら開発していくのは専業開発者でも辛い ○ Bridgeを書くとブラックボックス化しがち

Slide 28

Slide 28 text

React Nativeは「アリ」？ ● (個人的には)「アリ」。ただNativeの事を勉強しなくていいという事にはならない。Nativeの知識とWebのプラクティスを組み合わせる事で開発をスケールさせる事ができる技術 ● ハイブリッド開発は知見が殆ど出回っていないので設計は慎重になった方が良い。チームの状況も組み合わせて考える ○ QuipperではiOSでハイブリッド開発を続けていく予定 ■ 良いAndroidエンジニアが入ってきてくれたので(小声)

Slide 29

Slide 29 text

まとめ ● QuipperでのReact Native活用事例についてご紹介させて頂きました ○ 細かい点は懇親会や弊社ブログで！ ● 今回はRNの話でしたがiOS/Android開発もしっかりやっています ● 伝えたかったのはQuipperは新技術への挑戦と知見の公開を恐れない会社だという事 ○ 前例が無くても挑戦するし、逆にしがみつかない

Slide 30

Slide 30 text

知見の公開 ● BlogにてReact Nativeの記事を絶賛公開中 ● 必要なモジュールは自社で作ってどんどんOSS化 ○ quipper/react-native-td…Treasure Data Client ○ quipper/react-native-i18n-ts…型安全にi18nを取り扱うヘルパー ○ quipper/redux-rn-misc-enhancer…NetInfo, AppStateをreduxと繋ぐ ○ navigation…ハイブリッドに適したものを社内で試行錯誤開発中

Slide 31

Slide 31 text

ご清聴ありがとうございました