DMMオンラインサロンアプリのReactNative→Swift化への道のり

https://dmm.connpass.com/event/232977/ 発表資料

Transcript

1. © DMM.com DMM iOS meetup #2 (2021/12/15) DMMオンラインサロンアプリの ReactNative → Swift化への道のり 合同会社DMM.com 堤下薫
2. © DMM.com 堤下薫（つつみん） 合同会社DMM.com CTO室 iOS, ReactNative あたりを主に触っています。 最近触れていないAndroidも ガッツリ触る機会も作っていきたい。 自己紹介
3. © DMM.com 目次 ・ReactNative を採用した理由 🙆 ・なぜSwift移行する？ 🤔 ・フルSwiftへの移行計画とアプリ設計 ✍ ・実際に移行を実行してみてどうか 💪
4. © DMM.com ReactNativeを採用した理由 1
5. © DMM.com ReactNativeを採用した理由 🙆 DMMオンラインサロンのコミュニティツールを作った当初は フロントエンドエンジニアが主軸に開発、Web,iOSで同じ技術を利用 2
6. © DMM.com なぜSwiftへ移行する？ 3
7. © DMM.com 現在はiOSネイティブエンジニアが2人で開発を進めていて リッチなことを求めるほどフロント/ iOS 両方のスキルが必要 → 当初は良かったが現在では、デメリットの方が大きくなってきた → さらにReactNativeができる人の採用が難しい 😢 なぜSwift移行する？ 🤔 4
8. © DMM.com なぜSwift移行する？ 🤔 もし、ReactNativeで続けるとしても ReactNativeのアップデート ＋ iOSネイティブ周りのアップデート（Xcode, Swift） ＋ アップデートに追いつかないnpmライブラリの対応 が必要で、iOSエンジニアが本領発揮するのが難しい 😢 5
9. © DMM.com フルSwiftへの 移行計画とアプリ設計 6
10. © DMM.com 目的 ・ iOSエンジニアが本領発揮できる状態にする 💪 進め方 ・段階的にSwiftに移行する ・できるだけReactNativeの改修は少なくし、Swiftに置き換える フルSwiftへの移行計画とアプリ設計 ✍ 7
11. © DMM.com まずReactNativeをメインターゲットと別け 1つのモジュールとして動くようにする フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature (Module) 8
12. © DMM.com ReactNativeFeatureから Swiftに機能毎に置き換えていく フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature (Module) ReactNativeBridge (Module) AFeature (Module) BFeature (Module) ・ ・ ・ 9
13. © DMM.com ReactNativeFeatureで 持つ機能がどんどん小さくなり フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature (Module) ReactNativeBridge (Module) AFeature (Module) BFeature (Module) ・ ・ ・ 10
14. © DMM.com ReactNativeFeatureが消え フルSwiftなアプリになる フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) AFeature (Module) BFeature (Module) ・ ・ ・ CFeature (Module) 11
15. © DMM.com フルSwiftへの移行計画とアプリ設計 ✍ 12
16. © DMM.com 実際に移行を 実行してみてどうか 13
17. © DMM.com ReactNativeのバージョンは0.62.3までアップデートすることで Xcode13.xでも動く状態になっている Xcodeのアップデートが行われると ReactNative + iOSネイティブな機能を持ったnpmライブラリ のアップデートが必要になることが多く、都度対応するしかない 🥺 ライブラリの改修は npm の patch-package を利用して解決 ReactNativeのバージョン 14
18. © DMM.com リファクタリングならリグレッションテストなどで担保できるが Swift移行はリアーキテクチャのようなもの ReactNativeで書いたテストをSwiftで動作させることはできない🤔 既存のReduxのStoreに流れてくるイベントなどの処理を追い 処理全体を一度シーケンス図に起こす + 主要な機能要件の洗い出し テストがない状態の移行について 15
19. © DMM.com アプリケーションのステート ReactNative (シングルステート)：Swift (各画面でのステート) 画面毎の状態をテストしやすくなったのは良かった 😊 今まではアプリケーション内部で参照できていた値が、 APIを経由して再取得する必要が出てくる箇所があった 😇 変更の少ないと想定されるAPIはレスポンスを 期限付きでキャッシュすることで対応 🕐 16
20. © DMM.com ReactNativeとSwiftのやりとり この画面はReactNative ドロワーはSwift メニューをタップ RN to Swift トピックをタップ Swift to RN 17
21. © DMM.com ReactNativeとSwiftの連携 ReactNativeとSwiftの橋渡しはBridgeModuleが行う ReactNativeから自動的に init() が呼び出される 18
22. © DMM.com ReactNative → Swift ReactNativeからBridgeにイベントを送信 19
23. © DMM.com ReactNative → Swift ReactNativeからBridgeのイベント購読で受け取る 20
24. © DMM.com Swift → ReactNative SwiftからReactNativeへのイベント送信 21
25. © DMM.com Swift → ReactNative SwiftからBridgeのイベント購読で受け取る 22
26. © DMM.com ReactNative → Swiftの遷移 先程と同じようなイベントの流れで Swift移行されたFeatureのUIViewControllerをpresentで表示 ReactNativeとSwiftの画面遷移 23
27. © DMM.com ReactNativeとSwiftの画面遷移 Swift → ReactNativeの遷移 UIViewController.dismiss後にReactNative側でpush遷移するような見慣 れない画面遷移が起こってしまうため、アプリの末端機能から移行 また、1アプリの中でReactNativeを複数インスタンスを起動させると意図し ない動作を起こす可能性がある🙅 24
28. © DMM.com ReactNativeとSwiftの画面遷移 （再掲） 25
29. © DMM.com さいごに 26
30. © DMM.com さいごに Swiftへの移行はまだまだ途中！ ReactNativeでうまく実現できなかったところを Swiftネイティブで使いやすく作れてる実感あり👏 （ユーザーからも良くなった声💬も届いてました） ReactNative自体は良いもの ⭕ チームメンバー構成によっては移行は1つの手段として良い選択肢 👌 27
31. © DMM.com Thank you for listening ! 😁