How to create mobile apps like cup noodles

Transcript

1. ʮX-Platform FWΛ࠾༻ͯ͠ɺΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ໰୊ͱɺ React NativeͰͷઓུ/ઓज़ʹ͍ͭͯ @mrtry DroidKaigi 2 0 2 4 おつかれさまパーティ 2 0 2 4 / 1 0 / 1 1
2. © JMDC Inc. ࣗݾ঺հ • @mrtry • JMDC, Inc / Ventus, Inc • Engineer (Mobile) • Engineering Manager • Android / React Native • dex.fmを聞いて育ちました • [過去の栄光] DroidKaigi 2 0 1 9 で登壇しました
3. © JMDC Inc. ࣗݾ঺հ 3
4. © JMDC Inc. ࣗݾ঺հ 4
5. © JMDC Inc. ࣗݾ঺հ 5
6. © JMDC Inc. ΞδΣϯμ • 「X-Platform FWを採 用 して、カップ麺のようにアプリをつくりたい」問題 • カップ麺化が難しいポイント • React Nativeでの「丸投げ」実現戦略について 6
7. © JMDC Inc. ʮX-Platform FWΛ࠾༻ͯ͠ɺΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ໰୊ • X-Platform FWを採 用 するだいたいの動機の8割これだと思っている • 「少 人 数でAndroid/iOSアプリを爆速で作ってリリースしたい」 • 言 い換えると • アプリケーションの実装だけで終わりたい • 「それ以外」は、丸投げしたい 7
8. © JMDC Inc. ʮX-Platform FWΛ࠾༻ͯ͠ɺΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ໰୊ • ͓౬஫͍ͩΒɺ͍͍ͩͨOK • ͓౬ͷ४උ͸க͠ํͳ͍ • ༰ثͷ४උ΋͍Βͳ͍ • ͓౬Λڇೕʹͨ͠ΓͰɺϕʔε࢒ͭͭ͠ຯมͰ͖Δ • ۩ࡐ΋޷͖ͳͷೖΕΕ͹ɺ࠷ߴʹͳΕΔ 8
9. © JMDC Inc. ʮΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ͕ … • X-Platform FWをそのまま採 用 しても、カップ麺化は難しい • 体感、スープと麺までぐらい • マジで最低限で、これは客には出せない • 具材は、 自 分で準備する必要がある • 容器もないので、準備が必要 9
10. © JMDC Inc. Χοϓ໙Խ͕೉͍͠ϙΠϯτ • ϥΠϒϥϦͷબఆ • Native Layer͕full-managedͰ͸ͳ͍ • CI/CD͕full-managedͰ͸ͳ͍ 1 0
11. © JMDC Inc. ϥΠϒϥϦͷબఆ • X-Platform FWͰ͸ϥΠϒϥϦΛଟ༻͕ͪ͠ • ϑϨʔϜϫʔΫ͕ఏڙͯ͘͠ΕΔͷ͸ɺUI·ΘΓ͕ϝΠϯ • ͦΕҎ֎͸ʮNative Layer΁ΞΫηε͢Δख๏ʯΛఏڙ͍ͯ͠Δ͙Β͍ • Native Layer͕བྷΉϢʔεέʔεΛຬͨ͢ϥΠϒϥϦΛଟ༻͕ͪ͠ʹͳΔ 1 1
12. © JMDC Inc. ྫ: ը૾ಡΈࠐΈ - Native • インストールしたら、そのまま使える 1 2
13. © JMDC Inc. ྫ: ը૾ಡΈࠐΈ - X-Platform FW • Bridge以下がライブラリとして提供 1 3 ライブラリの範囲
14. © JMDC Inc. ྫ: ը૾ಡΈࠐΈ - X-Platform FW 精査にコストがかかりがち • OSそれぞれ動くのか？ • 一方 で動作しないこともある • メンテされているのか • 流れ早すぎて、archiveされがち • ライブラリや実装 大 丈夫か • XxxCompat使ってない • 依存ライブラリが化 石 1 4 ライブラリの範囲
15. © JMDC Inc. Native Layer͕full-managedͰ͸ͳ͍ それぞれのNative Layerのコードが存在している • Target SDK Versionなどの保守運 用 • X-Platform FWのupdateでdiffがあったとき、壊れてしまいがち 1 5
16. © JMDC Inc. CI/CD͕full-managedͰ͸ͳ͍ CI/CDのVMもX-Platformでは？ 😇 • Android: Debian • iOS: macOS 1 6
17. © JMDC Inc. CI/CD͕full-managedͰ͸ͳ͍ CI/CDのVMもX-Platformでは？ 😇 • それぞれに環境構築しないといけない • shell scriptは腕 力 がいる 1 7
18. © JMDC Inc. ര଎ఏڙɺ೉͍͠ • 「具材」をつくるところから始まる • 提供 用 の「器」も買ってくるところから始まる 1 8
19. © JMDC Inc. React Native͸ʮΧοϓ໙Խʯ͞ΕͯΔ
20. © JMDC Inc. 「麺」「具材」「容器」がセットになっていて、合体させれば提供可能 React Native͸ʮΧοϓ໙Խʯ͞ΕͯΔ 2 0
21. © JMDC Inc. React NativeͰͷղܾํ๏ Expoを使う前提になってきている • React Native Framework / Platform • Usecase-baseなSDK提供 • full-managedなNative Layer • full-managedなCI/CD 2 1
22. © JMDC Inc. Usecase-baseͳSDKఏڙ 精査不要なレベルのUsecase-baseなSDKを提供してくれている 2 2
23. © JMDC Inc. Usecase-baseͳSDKఏڙ 6割程度の機能実装案件は提供SDKだけで満たせる勢い • AuthSession • Navigation • Notification • DocumentPicker • BarcodeReader • StoreReview 2 3
24. © JMDC Inc. Native Layerʹ͸config΍pluginͰoverrideͰ͖Δ Android/iOSのディレクトリが無 • build-timeでnative layerのtemplateがコピペされる • Target SDK Versionなどの保守運 用 はExpoでやってくれる • React NativeのupgrateでNative Layerに変更があっても壊れにくい 2 4
25. © JMDC Inc. Native Layerʹ͸config΍pluginͰoverrideͰ͖Δ Native Layerの設定は、設定ファイルでoverrideする • PermissionやIntent Filterぐらいなら、jsonでいける • 細かい上書きをしたい場合は、TypeScriptでXMLをparseして上書きする 2 5
26. © JMDC Inc. full-managedͳCI/CD • ExpoΛ࢖͍ͬͯΔΞϓϦέʔγϣϯ༻ͷCI/CDΛఏڙ • workflowΛఆٛ͢Ε͹ɺSlack௨஌΍E 2 E΋࣮ߦͰ͖Δ • build͢Δ͚ͩͳΒworkflowఆٛͳ͠Ͱ࣮ߦ͢Δ͚ͩ • VMͷఏڙ / ূ໌ॻ؅ཧ / Ϗϧυ / artifactsͷ഑෍ 2 6
27. © JMDC Inc. React Native͸ɺʮΧοϓ໙ԽʯͰ͖͍ͯΔͱࢥ͏ •「麺」「具材」「容器」がセットになっていて、合体させればリリース可能！！！！！ 2 7
28. © JMDC Inc. ฐࣾͰ͸ExpoΛ࢖ͬͯΞϓϦΛग़͍ͯ͠·͢ 副業でReact Nativeやってみたいって 人 も来てくれ！！！！！ 2 8