Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Nativeを活用したアプリ開発体制/sapuri meetup
Search
@hotchemi
July 19, 2018
Programming
3
7.9k
React Nativeを活用したアプリ開発体制/sapuri meetup
@hotchemi
July 19, 2018
Tweet
Share
More Decks by @hotchemi
See All by @hotchemi
kompile-testing internal
hotchemi
0
240
The things we’ve learned from iOS×React Native hybrid development
hotchemi
2
5.1k
Type-Safe i18n on RN
hotchemi
2
1.1k
Navigation in a hybrid app
hotchemi
3
1.2k
PermissionsDispatcher × Kotlin
hotchemi
0
3k
kotlin compiler plugin
hotchemi
1
720
Rx and Preferences
hotchemi
2
150
Introducing PermissionsDispatcher
hotchemi
1
140
khronos
hotchemi
4
1.9k
Other Decks in Programming
See All in Programming
七輪ライブラリー: Claude AI で作る Next.js アプリ
suneo3476
1
120
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
110
Jakarta EE Meets AI
ivargrimstad
0
300
파급효과: From AI to Android Development
l2hyunwoo
0
130
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
150
監視 やばい
syossan27
11
10k
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
8
2.5k
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1.2k
Optimizing JRuby 10
headius
0
490
AIコーディングの理想と現実
tomohisa
32
35k
REALITY コマンド作成チュートリアル
nishiuriraku
0
110
note の Elasticsearch 更新系を支える技術
tchov
0
150
Featured
See All Featured
Fireside Chat
paigeccino
37
3.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
400
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Statistics for Hackers
jakevdp
798
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLとの向き合い方2022年版
quramy
46
14k
Bash Introduction
62gerente
611
210k
Thoughts on Productivity
jonyablonski
69
4.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Typedesign – Prime Four
hannesfritz
41
2.6k
Transcript
Product Meetup #1 React Nativeを活用したアプリ開発体制 @hotchemi
01 02 03 04 05 Agenda | 自己紹介 なぜReact Nativeなのか
Quipperにおけるアプリ開発 ハイブリッド開発への挑戦 振り返り・まとめ
01 自己紹介
自己紹介 • Shintaro Katafuchi | @hotchemi • Mobile Developer |
Engineering Manager ◦ Android/iOS/React Nativeの開発や採用、マネジメントを担当 • 2013年株式会社リクルートテクノロジーズ入社 ◦ 旧受験サプリのQuipper移管に伴い2016年Quipperに異動
02 なぜReact Nativeなのか
React Nativeとは • Facebookが開発するクロスプラットフォーム用フレームワーク • 端的に言うとReactでNativeアプリのUIを作れる ◦ “Learn Once, Write
Anywhere” • Facebook, Instagram, Pinterest, Skype, Microsoft, Discord等が採用 ◦ Quipperでは2017年秋より検証、導入を開始
なぜReact Nativeなのか • 急増するモバイル開発の需要に対応する為の手段 ◦ サプリユーザーのアクセスの半数以上はモバイルから • フロントエンド開発のクロスファンクショナル化 ◦ 全社的にReact/TypeScript化を進める中でWeb/Appの垣根を無くす
• 新技術への挑戦、より良い開発環境を求めていく
Daily Active User
よくある誤解 • 「React Nativeだからアプリは本気じゃないんでしょ?」 ◦ No! Nativeと同等のクオリティでなければ出しません。超本気です • 「React NativeだからNativeエンジニアは採用しないんでしょ?」
◦ No! React Nativeを真に使い倒すにはNativeの知識が不可欠です • 「ずっとReact Native使っていくんです?」 ◦ チームとプロダクトの状況次第なのでこだわりません!
03 Quipperにおけるアプリ開発
None
forCOACHES • 合格特訓コースのコーチ専用業務ア プリ • DeployGateとApple Developer Enterprise Programを用いて配信 •
100% React NativeアプリをCode Pushを用いてOTA配信を実現 ※ 参考: QuipperでのCodePushを使ったOTA配信とその自動化
開発体制 • ほぼWebエンジニアのみで開発/運用を回している ◦ NativeエンジニアはCIスクリプトやライブラリを書いたりする ◦ Nativeアプリのビルドは面倒な事が多いが徹底した自動化で対応 • 100%TypeScriptなので特別な事はしていない ◦
いわゆる普通のReact+Redux構成 ◦ Navigationやpushは3rd partyライブラリを利用
ライブラリ • 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
Code Pushを用いたRelease • 開発期間終了後にリリース向けの Pull Requestを自動で作成 • テスト後、プロダクトマネージャーが Pull Requestをマージすると自動で
OTA配信が実行される • コーチがアプリを起動するといつの 間にか更新されている
スタディサプリ高校・大学受験 • 日本中の中学・高校生が日常的に 学習に利用 • iOSはSwift、AndroidはKotlin/Java で開発を進めてきた • 今年から徐々にReact Nativeを混ぜ
たハイブリッド開発スタイルに移行中
スタディサプリ高校・大学受験 • メッセージ、プロフィール、宿題機能 など幾つかのコンポーネントをReact Nativeでリプレース中 • Nativeに違和感なく溶け込む実装を 実現できるかにこだわっている
04 ハイブリッド開発への挑戦
ハイブリッド開発への挑戦 -チーム体制- • iOS: 2名(JP) • Android: 2名(JP) • React
Native: 2名(PH) • iOS/Android/RN全部合わせたMonorepoで開発 ◦ CircleCI 2.0のworkflow, cacheを利用して効率的なCIを実現 ◦ 詳しくは弊社ブログを参照
ハイブリッド開発で鍵になるのは データの同期戦略とUIの一貫性
ハイブリッド開発への挑戦 -データの同期戦略- • Reduxを使ってもNative側にもインフラストラクチャ層があるので実際には Single Storeにならない • NativeとRNで双方向のデータ同期を考え始めると破綻する(した) • データの同期が必要な設計を可能な限り避ける。やむを得ない場合は単方
向で同期するように設計する事 ◦ スタディサプリではUserに関するデータだけNative→RNのフローで同 期している
None
ハイブリッド開発への挑戦 -UIの一貫性- • WebViewではないのでOS標準のコンポーネントを扱う ◦ iOSはHuman Interface Guideline、AndroidはMaterial Design Guidelineをしっかり理解する
• 画面遷移は”Native感”を出す為にとても重要。色々なライブラリを試したが 結局ViewController/Activityベースの自作モジュールを利用 ◦ iPhone X対応やCustom Transition等の要件に対応しやすい ◦ JSで書けるCustomViewをアプリに乗せていくイメージ
None
05 振り返り・まとめ
振り返り -Good Part- • (iOSでは) Nativeと見分けがつかないUIを実現できた ◦ パフォーマンスについて良く聞かれるがJS専用のthreadで処理を行う 為全然良い。初期化時間はまだ問題になっていない •
Webエンジニアを開発に巻き込み開発をスケールできた • ロジック層やTypeScriptのinterfaceをWebと共有できそう • React+Reduxの疎な設計のおかげでテストが書きやすい&実行しやすい
振り返り -Bad Part- • Androidで問題が多発... ◦ Fragmentを使用しているとAPI設計的に順次導入しづらい ◦ WebKitをNDKとしてbundleするのでAPKサイズが増加 •
(そもそも) クロスプラットフォーム開発は難しい ◦ 両OSで動作確認しながら開発していくのは専業開発者でも辛い ◦ Bridgeを書くとブラックボックス化しがち
React Nativeは「アリ」? • (個人的には)「アリ」。ただNativeの事を勉強しなくていいという事にはならな い。Nativeの知識とWebのプラクティスを組み合わせる事で開発をスケール させる事ができる技術 • ハイブリッド開発は知見が殆ど出回っていないので設計は慎重になった方が 良い。チームの状況も組み合わせて考える ◦
QuipperではiOSでハイブリッド開発を続けていく予定 ▪ 良いAndroidエンジニアが入ってきてくれたので(小声)
まとめ • QuipperでのReact Native活用事例についてご紹介させて頂きました ◦ 細かい点は懇親会や弊社ブログで! • 今回はRNの話でしたがiOS/Android開発もしっかりやっています • 伝えたかったのはQuipperは新技術への挑戦と知見の公開を恐れない会社
だという事 ◦ 前例が無くても挑戦するし、逆にしがみつかない
知見の公開 • 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…ハイブリッドに適したものを社内で試行錯誤開発中
ご清聴ありがとうございました