カンムでの React Native の歴史と現在 / React Native in Kanmu

Slide 1

Slide 1 text

カンムでの React Native の歴史と現在 Kanmu, Inc. 伊藤友気【Kanmu × Nature】React Native Meetup

Slide 2

Slide 2 text

2 伊藤友気 Kanmu, Inc. @mururu @murururu ⾃⼰紹介

Slide 3

Slide 3 text

3 バンドルカードを作ってます

Slide 4

Slide 4 text

4 歴史現在の構成これから 1 2 3 アジェンダ

Slide 5

Slide 5 text

歴史 1

Slide 6

Slide 6 text

6 バンドルカードのはじまり • バンドルカードの前にやっていたプロダクトの反省から⾃分たちでカードを発⾏するべきだと判断 • 当時の開発チーム • 開発者3⼈（内⼀⼈は兼デザイナー） • 3⼈とも Web の開発経験はあったがネイティブ開発経験はない

Slide 7

Slide 7 text

7 バンドルカードのはじまり • 2015年12⽉開発開始 • 2016年9⽉ iOS版リリース • 2016年12⽉ Android版リリース

Slide 8

Slide 8 text

8 なぜ React Native だったのか • ネイティブ開発経験のない少数の開発者で、素早くアプリをそれなりのクオリティでリリースしたかった

Slide 9

Slide 9 text

9 課題① Android 版リリース開発初期は iOS のみでとりあえず実装してリリースし、Android 版もそこまで⼤きな変更は必要ないと⾒込んでいた実際にはアニメーション系などいくつかクラッシュする部分の発⽣や、iOS しか対応していないライブラリなども導⼊してしまっていたプラットフォームによる分岐、機能の変更などにより、なんとかリリースにこぎつける後にアプリケーションレベルでのプラットフォームごとの分岐は解消 →

Slide 10

Slide 10 text

10 課題② Android 4.4 系対応もともと Android 4.4 系で原因特定が難しいクラッシュが発⽣しがちであった Android の 64bit 対応のため React Native 0.60 へのアップデートを試みた所、Android 4.4 系でのクラッシュが爆増し断念 4.4 系のサポート終了を決定終了までの間 Multiple APK にして 64bit対応版/⾮対応版を別ブランチで管理 →

Slide 11

Slide 11 text

現在の構成 2

Slide 12

Slide 12 text

12 現在の構成 • React Native, JavaScript, Flow, Redux, Storybook, Firebase など • ⽇常のほとんどの開発が React の世界のエコシステムの範囲ですんでいる • Expo は使っていない • リリースサイクルはおよそ週1

Slide 13

Slide 13 text

13 ビルド/リリース周り • 基本的にビルド/リリースはfastlaneで完結させ、CI はBitriseにのせている • lint や Jest でのテストなどは社内の別のプロジェクトと共通で CircleCI 利⽤ • 開発版の社内への配布は DeployGate を利⽤

Slide 14

Slide 14 text

14 ビルド/リリース周り

Slide 15

Slide 15 text

15 API 連携 • JSON Hyper-Schema からAPIクライアントの実装を⾃動⽣成している • バックエンドのAPIサーバーも同じスキーマからリクエスト/レスポンスの構造体やバリデーション実装を⾃動⽣成している

Slide 16

Slide 16 text

16 デバッグ • react-native-debugger • react-devtools や redux-devtools 相当の機能 • ネットワークのデバッグ • ネイティブのエレメントの検証など • Flipper に移⾏予定

Slide 17

Slide 17 text

17 Storybook • いわゆるUIコンポーネントカタログ的にはなっておらず、コンポーネント開発時にコンポーネントのみを確認するような⽤途で利⽤している • ほぼ全てのコンポーネント/ページをStorybook化している • Storyshots で Snapshot testing を⾏っている

Slide 18

Slide 18 text

18 • Sentry • 当初よりエラートラッキングに利⽤ • Firebase Crashlytics • クラッシュレポート • Firebase で記録しているイベント紐付けられるので便利エラートラッカー/クラッシュレポート

Slide 19

Slide 19 text

19 • Analytics • ⾏動ログは Firebase Analytics で収集 • react-navigation の遷移イベントをフックにページ遷移のトラッキングなども • Remote Conﬁg • 任意のタイミングで表⽰を切り替えたい場合 (ex. アドホックな⽂⾔の変更 • A/B テスト Firebase の他の機能

Slide 20

Slide 20 text

これから 3

Slide 21

Slide 21 text

21 TypeScript 移⾏ • 現状は Flow + JavaScript • そろそろ Flow をサポートしないライブラリも出てきているので、⾝動きが取れなくなる前に TypeScript に移⾏したい • 変換ツールもあるが⼀筋縄では⾏かない感じがしているので、泥臭い作業になりそう

Slide 22

Slide 22 text

22 デザイン連携の効率化 • 現状、実装とデザインの⼀致してない部分がある • ⼀貫したUIを素早く効率的に提供できるようにしたい • Atomic Design ベースでコンポーネントをデザイナーと共に認識を合わせながら整理している

Slide 23

Slide 23 text

まとめ 4

Slide 24

Slide 24 text

24 まとめ • Web の開発者ならば基本的に開発にはすぐ⼊れる • ただしハマったときはネイティブの知識がないとやはりしんどい • バンドルカードは都度ハマりながら進んできました