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
How to create mobile apps like cup noodles
Search
Shinnosuke Yamamoto
October 11, 2024
0
190
How to create mobile apps like cup noodles
Shinnosuke Yamamoto
October 11, 2024
Tweet
Share
More Decks by Shinnosuke Yamamoto
See All by Shinnosuke Yamamoto
(Deep|Web) Link support with expo-router
mrtry
1
330
Notify Slack with EAS Custom Build
mrtry
0
91
How to implement Deployment environment in Expo EAS Build
mrtry
0
4k
A story about writing to JD to clarify "what the team values".
mrtry
0
400
What you need to know about signatures by the time of release
mrtry
1
540
What I worked on when migrating from flow-typed to TypeScript in a react-native app.
mrtry
1
930
Enabling team development of a secret React Native app that has been in operation for four years.
mrtry
1
2.8k
Improving the development environment for react-native
mrtry
1
1k
React NativeとExpoを用いたクロスプラットフォーム開発入門
mrtry
4
4.5k
Featured
See All Featured
Speed Design
sergeychernyshev
25
790
The Pragmatic Product Professional
lauravandoore
32
6.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How STYLIGHT went responsive
nonsquared
98
5.3k
Optimizing for Happiness
mojombo
376
70k
Bash Introduction
62gerente
610
210k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
It's Worth the Effort
3n
184
28k
Making Projects Easy
brettharned
116
6k
BBQ
matthewcrist
86
9.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Transcript
ʮX-Platform FWΛ࠾༻ͯ͠ɺΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯͱɺ React NativeͰͷઓུ/ઓज़ʹ͍ͭͯ @mrtry DroidKaigi 2 0 2 4
おつかれさまパーティ 2 0 2 4 / 1 0 / 1 1
© JMDC Inc. ࣗݾհ • @mrtry • JMDC, Inc /
Ventus, Inc • Engineer (Mobile) • Engineering Manager • Android / React Native • dex.fmを聞いて育ちました • [過去の栄光] DroidKaigi 2 0 1 9 で登壇しました
© JMDC Inc. ࣗݾհ 3
© JMDC Inc. ࣗݾհ 4
© JMDC Inc. ࣗݾհ 5
© JMDC Inc. ΞδΣϯμ • 「X-Platform FWを採 用 して、カップ麺のようにアプリをつくりたい」問題 •
カップ麺化が難しいポイント • React Nativeでの「丸投げ」実現戦略について 6
© JMDC Inc. ʮX-Platform FWΛ࠾༻ͯ͠ɺΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ • X-Platform FWを採 用 するだいたいの動機の8割これだと思っている
• 「少 人 数でAndroid/iOSアプリを爆速で作ってリリースしたい」 • 言 い換えると • アプリケーションの実装だけで終わりたい • 「それ以外」は、丸投げしたい 7
© JMDC Inc. ʮX-Platform FWΛ࠾༻ͯ͠ɺΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ • ͓౬͍ͩΒɺ͍͍ͩͨOK • ͓౬ͷ४උக͠ํͳ͍ •
༰ثͷ४උ͍Βͳ͍ • ͓౬Λڇೕʹͨ͠ΓͰɺϕʔεͭͭ͠ຯมͰ͖Δ • ۩ࡐ͖ͳͷೖΕΕɺ࠷ߴʹͳΕΔ 8
© JMDC Inc. ʮΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ͕ … • X-Platform FWをそのまま採 用 しても、カップ麺化は難しい
• 体感、スープと麺までぐらい • マジで最低限で、これは客には出せない • 具材は、 自 分で準備する必要がある • 容器もないので、準備が必要 9
© JMDC Inc. Χοϓ໙Խ͕͍͠ϙΠϯτ • ϥΠϒϥϦͷબఆ • Native Layer͕full-managedͰͳ͍ •
CI/CD͕full-managedͰͳ͍ 1 0
© JMDC Inc. ϥΠϒϥϦͷબఆ • X-Platform FWͰϥΠϒϥϦΛଟ༻͕ͪ͠ • ϑϨʔϜϫʔΫ͕ఏڙͯ͘͠ΕΔͷɺUI·ΘΓ͕ϝΠϯ •
ͦΕҎ֎ʮNative LayerΞΫηε͢Δख๏ʯΛఏڙ͍ͯ͠Δ͙Β͍ • Native Layer͕བྷΉϢʔεέʔεΛຬͨ͢ϥΠϒϥϦΛଟ༻͕ͪ͠ʹͳΔ 1 1
© JMDC Inc. ྫ: ը૾ಡΈࠐΈ - Native • インストールしたら、そのまま使える 1
2
© JMDC Inc. ྫ: ը૾ಡΈࠐΈ - X-Platform FW • Bridge以下がライブラリとして提供
1 3 ライブラリの範囲
© JMDC Inc. ྫ: ը૾ಡΈࠐΈ - X-Platform FW 精査にコストがかかりがち •
OSそれぞれ動くのか? • 一方 で動作しないこともある • メンテされているのか • 流れ早すぎて、archiveされがち • ライブラリや実装 大 丈夫か • XxxCompat使ってない • 依存ライブラリが化 石 1 4 ライブラリの範囲
© JMDC Inc. Native Layer͕full-managedͰͳ͍ それぞれのNative Layerのコードが存在している • Target SDK
Versionなどの保守運 用 • X-Platform FWのupdateでdiffがあったとき、壊れてしまいがち 1 5
© JMDC Inc. CI/CD͕full-managedͰͳ͍ CI/CDのVMもX-Platformでは? 😇 • Android: Debian •
iOS: macOS 1 6
© JMDC Inc. CI/CD͕full-managedͰͳ͍ CI/CDのVMもX-Platformでは? 😇 • それぞれに環境構築しないといけない • shell
scriptは腕 力 がいる 1 7
© JMDC Inc. രఏڙɺ͍͠ • 「具材」をつくるところから始まる • 提供 用 の「器」も買ってくるところから始まる
1 8
© JMDC Inc. React NativeʮΧοϓ໙Խʯ͞ΕͯΔ
© JMDC Inc. 「麺」「具材」「容器」がセットになっていて、合体させれば提供可能 React NativeʮΧοϓ໙Խʯ͞ΕͯΔ 2 0
© JMDC Inc. React NativeͰͷղܾํ๏ Expoを使う前提になってきている • React Native Framework
/ Platform • Usecase-baseなSDK提供 • full-managedなNative Layer • full-managedなCI/CD 2 1
© JMDC Inc. Usecase-baseͳSDKఏڙ 精査不要なレベルのUsecase-baseなSDKを提供してくれている 2 2
© JMDC Inc. Usecase-baseͳSDKఏڙ 6割程度の機能実装案件は提供SDKだけで満たせる勢い • AuthSession • Navigation •
Notification • DocumentPicker • BarcodeReader • StoreReview 2 3
© JMDC Inc. Native LayerʹconfigpluginͰoverrideͰ͖Δ Android/iOSのディレクトリが無 • build-timeでnative layerのtemplateがコピペされる •
Target SDK Versionなどの保守運 用 はExpoでやってくれる • React NativeのupgrateでNative Layerに変更があっても壊れにくい 2 4
© JMDC Inc. Native LayerʹconfigpluginͰoverrideͰ͖Δ Native Layerの設定は、設定ファイルでoverrideする • PermissionやIntent Filterぐらいなら、jsonでいける
• 細かい上書きをしたい場合は、TypeScriptでXMLをparseして上書きする 2 5
© JMDC Inc. full-managedͳCI/CD • ExpoΛ͍ͬͯΔΞϓϦέʔγϣϯ༻ͷCI/CDΛఏڙ • workflowΛఆٛ͢ΕɺSlack௨E 2 E࣮ߦͰ͖Δ
• build͢Δ͚ͩͳΒworkflowఆٛͳ͠Ͱ࣮ߦ͢Δ͚ͩ • VMͷఏڙ / ূ໌ॻཧ / Ϗϧυ / artifactsͷ 2 6
© JMDC Inc. React NativeɺʮΧοϓ໙ԽʯͰ͖͍ͯΔͱࢥ͏ •「麺」「具材」「容器」がセットになっていて、合体させればリリース可能!!!!! 2 7
© JMDC Inc. ฐࣾͰExpoΛͬͯΞϓϦΛग़͍ͯ͠·͢ 副業でReact Nativeやってみたいって 人 も来てくれ!!!!! 2 8