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.6k
React Nativeを活用したアプリ開発体制/sapuri meetup
@hotchemi
July 19, 2018
Tweet
Share
More Decks by @hotchemi
See All by @hotchemi
kompile-testing internal
hotchemi
0
230
The things we’ve learned from iOS×React Native hybrid development
hotchemi
2
4.9k
Type-Safe i18n on RN
hotchemi
2
1k
Navigation in a hybrid app
hotchemi
3
1.1k
PermissionsDispatcher × Kotlin
hotchemi
0
2.5k
kotlin compiler plugin
hotchemi
1
640
Rx and Preferences
hotchemi
2
140
Introducing PermissionsDispatcher
hotchemi
1
130
khronos
hotchemi
4
1.8k
Other Decks in Programming
See All in Programming
入門プロパティベーステスト/learning-property-based-testing
kiway
6
1.2k
RubyKaigiでおいしいピクルスになろう! / Become a Delicious Pickle at RubyKaigi!
unikounio
0
5.6k
TypeScriptを活用したi18n対応
minako__ph
6
1.1k
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
130
My favorite script, "dsl.rb"
yui_knk
2
210
App Router に移行して良かったところを語る
andpad
2
310
Jetpack Compose Mechanism
skydoves
1
730
Rubykaigiの振り返り/fbc-meetup-20240530
yswengineer
0
5.6k
EduBlocksでPythonのブロックプログラミング体験!
ueponx
0
250
Datadogのmonitorを Terraform管理に爆速で 移行する
kuro_kurorrr
3
340
Kubernetes Code Contribution入門
bells17
3
750
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
3
840
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
A designer walks into a library…
pauljervisheath
201
23k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
WebSockets: Embracing the real-time Web
robhawkes
59
7.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
213
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
27
2.4k
Optimising Largest Contentful Paint
csswizardry
14
2.5k
Agile that works and the tools we love
rasmusluckow
325
20k
Debugging Ruby Performance
tmm1
70
11k
Product Roadmaps are Hard
iamctodd
46
9.9k
A Philosophy of Restraint
colly
198
16k
The World Runs on Bad Software
bkeepers
PRO
61
6.8k
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…ハイブリッドに適したものを社内で試行錯誤開発中
ご清聴ありがとうございました