Tweet
Tweet

Slide 1

Slide 1 text

ʮX-Platform FWΛ࠾༻ͯ͠ɺΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ໰୊ͱɺ React NativeͰͷઓུ/ઓज़ʹ͍ͭͯ @mrtry DroidKaigi 2 0 2 4 おつかれさまパーティ 2 0 2 4 / 1 0 / 1 1

Slide 2

Slide 2 text

© JMDC Inc. ࣗݾ঺հ • @mrtry • JMDC, Inc / Ventus, Inc • Engineer (Mobile) • Engineering Manager • Android / React Native • dex.fmを聞いて育ちました • [過去の栄光] DroidKaigi 2 0 1 9 で登壇しました

Slide 3

Slide 3 text

© JMDC Inc. ࣗݾ঺հ 3

Slide 4

Slide 4 text

© JMDC Inc. ࣗݾ঺հ 4

Slide 5

Slide 5 text

© JMDC Inc. ࣗݾ঺հ 5

Slide 6

Slide 6 text

© JMDC Inc. ΞδΣϯμ • 「X-Platform FWを採 用 して、カップ麺のようにアプリをつくりたい」問題 • カップ麺化が難しいポイント • React Nativeでの「丸投げ」実現戦略について 6

Slide 7

Slide 7 text

© JMDC Inc. ʮX-Platform FWΛ࠾༻ͯ͠ɺΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ໰୊ • X-Platform FWを採 用 するだいたいの動機の8割これだと思っている • 「少 人 数でAndroid/iOSアプリを爆速で作ってリリースしたい」 • 言 い換えると • アプリケーションの実装だけで終わりたい • 「それ以外」は、丸投げしたい 7

Slide 8

Slide 8 text

© JMDC Inc. ʮX-Platform FWΛ࠾༻ͯ͠ɺΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ໰୊ • ͓౬஫͍ͩΒɺ͍͍ͩͨOK • ͓౬ͷ४උ͸க͠ํͳ͍ • ༰ثͷ४උ΋͍Βͳ͍ • ͓౬Λڇೕʹͨ͠ΓͰɺϕʔε࢒ͭͭ͠ຯมͰ͖Δ • ۩ࡐ΋޷͖ͳͷೖΕΕ͹ɺ࠷ߴʹͳΕΔ 8

Slide 9

Slide 9 text

© JMDC Inc. ʮΧοϓ໙ͷΑ͏ʹΞϓϦΛͭ͘Γ͍ͨʯ͕ … • X-Platform FWをそのまま採 用 しても、カップ麺化は難しい • 体感、スープと麺までぐらい • マジで最低限で、これは客には出せない • 具材は、 自 分で準備する必要がある • 容器もないので、準備が必要 9

Slide 10

Slide 10 text

© JMDC Inc. Χοϓ໙Խ͕೉͍͠ϙΠϯτ • ϥΠϒϥϦͷબఆ • Native Layer͕full-managedͰ͸ͳ͍ • CI/CD͕full-managedͰ͸ͳ͍ 1 0

Slide 11

Slide 11 text

© JMDC Inc. ϥΠϒϥϦͷબఆ • X-Platform FWͰ͸ϥΠϒϥϦΛଟ༻͕ͪ͠ • ϑϨʔϜϫʔΫ͕ఏڙͯ͘͠ΕΔͷ͸ɺUI·ΘΓ͕ϝΠϯ • ͦΕҎ֎͸ʮNative Layer΁ΞΫηε͢Δख๏ʯΛఏڙ͍ͯ͠Δ͙Β͍ • Native Layer͕བྷΉϢʔεέʔεΛຬͨ͢ϥΠϒϥϦΛଟ༻͕ͪ͠ʹͳΔ 1 1

Slide 12

Slide 12 text

© JMDC Inc. ྫ: ը૾ಡΈࠐΈ - Native • インストールしたら、そのまま使える 1 2

Slide 13

Slide 13 text

© JMDC Inc. ྫ: ը૾ಡΈࠐΈ - X-Platform FW • Bridge以下がライブラリとして提供 1 3 ライブラリの範囲

Slide 14

Slide 14 text

© JMDC Inc. ྫ: ը૾ಡΈࠐΈ - X-Platform FW 精査にコストがかかりがち • OSそれぞれ動くのか？ • 一方 で動作しないこともある • メンテされているのか • 流れ早すぎて、archiveされがち • ライブラリや実装 大 丈夫か • XxxCompat使ってない • 依存ライブラリが化 石 1 4 ライブラリの範囲

Slide 15

Slide 15 text

© JMDC Inc. Native Layer͕full-managedͰ͸ͳ͍ それぞれのNative Layerのコードが存在している • Target SDK Versionなどの保守運 用 • X-Platform FWのupdateでdiffがあったとき、壊れてしまいがち 1 5

Slide 16

Slide 16 text

© JMDC Inc. CI/CD͕full-managedͰ͸ͳ͍ CI/CDのVMもX-Platformでは？ 😇 • Android: Debian • iOS: macOS 1 6

Slide 17

Slide 17 text

© JMDC Inc. CI/CD͕full-managedͰ͸ͳ͍ CI/CDのVMもX-Platformでは？ 😇 • それぞれに環境構築しないといけない • shell scriptは腕 力 がいる 1 7

Slide 18

Slide 18 text

© JMDC Inc. ര଎ఏڙɺ೉͍͠ • 「具材」をつくるところから始まる • 提供 用 の「器」も買ってくるところから始まる 1 8

Slide 19

Slide 19 text

© JMDC Inc. React Native͸ʮΧοϓ໙Խʯ͞ΕͯΔ

Slide 20

Slide 20 text

© JMDC Inc. 「麺」「具材」「容器」がセットになっていて、合体させれば提供可能 React Native͸ʮΧοϓ໙Խʯ͞ΕͯΔ 2 0

Slide 21

Slide 21 text

© JMDC Inc. React NativeͰͷղܾํ๏ Expoを使う前提になってきている • React Native Framework / Platform • Usecase-baseなSDK提供 • full-managedなNative Layer • full-managedなCI/CD 2 1

Slide 22

Slide 22 text

© JMDC Inc. Usecase-baseͳSDKఏڙ 精査不要なレベルのUsecase-baseなSDKを提供してくれている 2 2

Slide 23

Slide 23 text

© JMDC Inc. Usecase-baseͳSDKఏڙ 6割程度の機能実装案件は提供SDKだけで満たせる勢い • AuthSession • Navigation • Notification • DocumentPicker • BarcodeReader • StoreReview 2 3

Slide 24

Slide 24 text

© 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

Slide 25

Slide 25 text

© JMDC Inc. Native Layerʹ͸config΍pluginͰoverrideͰ͖Δ Native Layerの設定は、設定ファイルでoverrideする • PermissionやIntent Filterぐらいなら、jsonでいける • 細かい上書きをしたい場合は、TypeScriptでXMLをparseして上書きする 2 5

Slide 26

Slide 26 text

© JMDC Inc. full-managedͳCI/CD • ExpoΛ࢖͍ͬͯΔΞϓϦέʔγϣϯ༻ͷCI/CDΛఏڙ • workflowΛఆٛ͢Ε͹ɺSlack௨஌΍E 2 E΋࣮ߦͰ͖Δ • build͢Δ͚ͩͳΒworkflowఆٛͳ͠Ͱ࣮ߦ͢Δ͚ͩ • VMͷఏڙ / ূ໌ॻ؅ཧ / Ϗϧυ / artifactsͷ഑෍ 2 6

Slide 27

Slide 27 text

© JMDC Inc. React Native͸ɺʮΧοϓ໙ԽʯͰ͖͍ͯΔͱࢥ͏ •「麺」「具材」「容器」がセットになっていて、合体させればリリース可能！！！！！ 2 7

Slide 28

Slide 28 text

© JMDC Inc. ฐࣾͰ͸ExpoΛ࢖ͬͯΞϓϦΛग़͍ͯ͠·͢ 副業でReact Nativeやってみたいって 人 も来てくれ！！！！！ 2 8