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
93
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
410
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
940
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
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Site-Speed That Sticks
csswizardry
4
400
The Cult of Friendly URLs
andyhume
78
6.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Unsuck your backbone
ammeep
669
57k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Gamification - CAS2011
davidbonilla
80
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
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