Tweet
Tweet

Slide 1

Slide 1 text

© DMM.com DMM iOS meetup #2 (2021/12/15) DMMオンラインサロンアプリの ReactNative → Swift化への道のり 合同会社DMM.com 堤下薫

Slide 2

Slide 2 text

© DMM.com 堤下薫（つつみん） 合同会社DMM.com CTO室 iOS, ReactNative あたりを主に触っています。 最近触れていないAndroidも ガッツリ触る機会も作っていきたい。 自己紹介

Slide 3

Slide 3 text

© DMM.com 目次 ・ReactNative を採用した理由 🙆 ・なぜSwift移行する？ 🤔 ・フルSwiftへの移行計画とアプリ設計 ✍ ・実際に移行を実行してみてどうか 💪

Slide 4

Slide 4 text

© DMM.com ReactNativeを採用した理由 1

Slide 5

Slide 5 text

© DMM.com ReactNativeを採用した理由 🙆 DMMオンラインサロンのコミュニティツールを作った当初は フロントエンドエンジニアが主軸に開発、Web,iOSで同じ技術を利用 2

Slide 6

Slide 6 text

© DMM.com なぜSwiftへ移行する？ 3

Slide 7

Slide 7 text

© DMM.com 現在はiOSネイティブエンジニアが2人で開発を進めていて リッチなことを求めるほどフロント/ iOS 両方のスキルが必要 → 当初は良かったが現在では、デメリットの方が大きくなってきた → さらにReactNativeができる人の採用が難しい 😢 なぜSwift移行する？ 🤔 4

Slide 8

Slide 8 text

© DMM.com なぜSwift移行する？ 🤔 もし、ReactNativeで続けるとしても ReactNativeのアップデート ＋ iOSネイティブ周りのアップデート（Xcode, Swift） ＋ アップデートに追いつかないnpmライブラリの対応 が必要で、iOSエンジニアが本領発揮するのが難しい 😢 5

Slide 9

Slide 9 text

© DMM.com フルSwiftへの 移行計画とアプリ設計 6

Slide 10

Slide 10 text

© DMM.com 目的 ・ iOSエンジニアが本領発揮できる状態にする 💪 進め方 ・段階的にSwiftに移行する ・できるだけReactNativeの改修は少なくし、Swiftに置き換える フルSwiftへの移行計画とアプリ設計 ✍ 7

Slide 11

Slide 11 text

© DMM.com まずReactNativeをメインターゲットと別け 1つのモジュールとして動くようにする フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature (Module) 8

Slide 12

Slide 12 text

© DMM.com ReactNativeFeatureから Swiftに機能毎に置き換えていく フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature (Module) ReactNativeBridge (Module) AFeature (Module) BFeature (Module) ・ ・ ・ 9

Slide 13

Slide 13 text

© DMM.com ReactNativeFeatureで 持つ機能がどんどん小さくなり フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature (Module) ReactNativeBridge (Module) AFeature (Module) BFeature (Module) ・ ・ ・ 10

Slide 14

Slide 14 text

© DMM.com ReactNativeFeatureが消え フルSwiftなアプリになる フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) AFeature (Module) BFeature (Module) ・ ・ ・ CFeature (Module) 11

Slide 15

Slide 15 text

© DMM.com フルSwiftへの移行計画とアプリ設計 ✍ 12

Slide 16

Slide 16 text

© DMM.com 実際に移行を 実行してみてどうか 13

Slide 17

Slide 17 text

© DMM.com ReactNativeのバージョンは0.62.3までアップデートすることで Xcode13.xでも動く状態になっている Xcodeのアップデートが行われると ReactNative + iOSネイティブな機能を持ったnpmライブラリ のアップデートが必要になることが多く、都度対応するしかない 🥺 ライブラリの改修は npm の patch-package を利用して解決 ReactNativeのバージョン 14

Slide 18

Slide 18 text

© DMM.com リファクタリングならリグレッションテストなどで担保できるが Swift移行はリアーキテクチャのようなもの ReactNativeで書いたテストをSwiftで動作させることはできない🤔 既存のReduxのStoreに流れてくるイベントなどの処理を追い 処理全体を一度シーケンス図に起こす + 主要な機能要件の洗い出し テストがない状態の移行について 15

Slide 19

Slide 19 text

© DMM.com アプリケーションのステート ReactNative (シングルステート)：Swift (各画面でのステート) 画面毎の状態をテストしやすくなったのは良かった 😊 今まではアプリケーション内部で参照できていた値が、 APIを経由して再取得する必要が出てくる箇所があった 😇 変更の少ないと想定されるAPIはレスポンスを 期限付きでキャッシュすることで対応 🕐 16

Slide 20

Slide 20 text

© DMM.com ReactNativeとSwiftのやりとり この画面はReactNative ドロワーはSwift メニューをタップ RN to Swift トピックをタップ Swift to RN 17

Slide 21

Slide 21 text

© DMM.com ReactNativeとSwiftの連携 ReactNativeとSwiftの橋渡しはBridgeModuleが行う ReactNativeから自動的に init() が呼び出される 18

Slide 22

Slide 22 text

© DMM.com ReactNative → Swift ReactNativeからBridgeにイベントを送信 19

Slide 23

Slide 23 text

© DMM.com ReactNative → Swift ReactNativeからBridgeのイベント購読で受け取る 20

Slide 24

Slide 24 text

© DMM.com Swift → ReactNative SwiftからReactNativeへのイベント送信 21

Slide 25

Slide 25 text

© DMM.com Swift → ReactNative SwiftからBridgeのイベント購読で受け取る 22

Slide 26

Slide 26 text

© DMM.com ReactNative → Swiftの遷移 先程と同じようなイベントの流れで Swift移行されたFeatureのUIViewControllerをpresentで表示 ReactNativeとSwiftの画面遷移 23

Slide 27

Slide 27 text

© DMM.com ReactNativeとSwiftの画面遷移 Swift → ReactNativeの遷移 UIViewController.dismiss後にReactNative側でpush遷移するような見慣 れない画面遷移が起こってしまうため、アプリの末端機能から移行 また、1アプリの中でReactNativeを複数インスタンスを起動させると意図し ない動作を起こす可能性がある🙅 24

Slide 28

Slide 28 text

© DMM.com ReactNativeとSwiftの画面遷移 （再掲） 25

Slide 29

Slide 29 text

© DMM.com さいごに 26

Slide 30

Slide 30 text

© DMM.com さいごに Swiftへの移行はまだまだ途中！ ReactNativeでうまく実現できなかったところを Swiftネイティブで使いやすく作れてる実感あり👏 （ユーザーからも良くなった声💬も届いてました） ReactNative自体は良いもの ⭕ チームメンバー構成によっては移行は1つの手段として良い選択肢 👌 27

Slide 31

Slide 31 text

© DMM.com Thank you for listening ! 😁