Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
DMMオンラインサロンアプリのReactNative→Swift化への道のり
Kaoru Tsutsumishita
December 15, 2021
Programming
0
160
DMMオンラインサロンアプリのReactNative→Swift化への道のり
https://dmm.connpass.com/event/232977/
発表資料
Kaoru Tsutsumishita
December 15, 2021
Tweet
Share
More Decks by Kaoru Tsutsumishita
See All by Kaoru Tsutsumishita
20180918_エンジニア学生 x リブセンス Drinkup #2
roana0229
0
250
Other Decks in Programming
See All in Programming
2023年にクル(かもしれない)通信ミドルウェア技術(仮)
s_hosoai
0
220
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Functional Fun in Kotlin
nomisrev
1
130
AWSとCPUのムフフな関係
cmdemura
0
480
Cloudflare Workersと状態管理
chimame
3
510
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
250
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
250
SwiftPMのPlugin入門 / introduction_to_swiftpm_plugin
uhooi
2
110
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
360
Writing Greener Java Applications
hollycummins
0
370
フロントエンドで 良いコードを書くために
t_keshi
3
1.7k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
117
7.7k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Mobile First: as difficult as doing things right
swwweet
213
7.8k
Teambox: Starting and Learning
jrom
124
7.9k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Code Review Best Practice
trishagee
50
11k
Visualization
eitanlees
129
12k
Product Roadmaps are Hard
iamctodd
38
7.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Optimizing for Happiness
mojombo
365
64k
Become a Pro
speakerdeck
PRO
6
3.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
8k
Transcript
© DMM.com DMM iOS meetup #2 (2021/12/15) DMMオンラインサロンアプリの ReactNative →
Swift化への道のり 合同会社DMM.com 堤下薫
© DMM.com 堤下薫(つつみん) 合同会社DMM.com CTO室 iOS, ReactNative あたりを主に触っています。 最近触れていないAndroidも ガッツリ触る機会も作っていきたい。
自己紹介
© DMM.com 目次 ・ReactNative を採用した理由 🙆 ・なぜSwift移行する? 🤔 ・フルSwiftへの移行計画とアプリ設計 ✍
・実際に移行を実行してみてどうか 💪
© DMM.com ReactNativeを採用した理由 1
© DMM.com ReactNativeを採用した理由 🙆 DMMオンラインサロンのコミュニティツールを作った当初は フロントエンドエンジニアが主軸に開発、Web,iOSで同じ技術を利用 2
© DMM.com なぜSwiftへ移行する? 3
© DMM.com 現在はiOSネイティブエンジニアが2人で開発を進めていて リッチなことを求めるほどフロント/ iOS 両方のスキルが必要 → 当初は良かったが現在では、デメリットの方が大きくなってきた → さらにReactNativeができる人の採用が難しい
😢 なぜSwift移行する? 🤔 4
© DMM.com なぜSwift移行する? 🤔 もし、ReactNativeで続けるとしても ReactNativeのアップデート + iOSネイティブ周りのアップデート(Xcode, Swift) +
アップデートに追いつかないnpmライブラリの対応 が必要で、iOSエンジニアが本領発揮するのが難しい 😢 5
© DMM.com フルSwiftへの 移行計画とアプリ設計 6
© DMM.com 目的 ・ iOSエンジニアが本領発揮できる状態にする 💪 進め方 ・段階的にSwiftに移行する ・できるだけReactNativeの改修は少なくし、Swiftに置き換える フルSwiftへの移行計画とアプリ設計
✍ 7
© DMM.com まずReactNativeをメインターゲットと別け 1つのモジュールとして動くようにする フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature
(Module) 8
© DMM.com ReactNativeFeatureから Swiftに機能毎に置き換えていく フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature
(Module) ReactNativeBridge (Module) AFeature (Module) BFeature (Module) ・ ・ ・ 9
© DMM.com ReactNativeFeatureで 持つ機能がどんどん小さくなり フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature
(Module) ReactNativeBridge (Module) AFeature (Module) BFeature (Module) ・ ・ ・ 10
© DMM.com ReactNativeFeatureが消え フルSwiftなアプリになる フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) AFeature
(Module) BFeature (Module) ・ ・ ・ CFeature (Module) 11
© DMM.com フルSwiftへの移行計画とアプリ設計 ✍ 12
© DMM.com 実際に移行を 実行してみてどうか 13
© DMM.com ReactNativeのバージョンは0.62.3までアップデートすることで Xcode13.xでも動く状態になっている Xcodeのアップデートが行われると ReactNative + iOSネイティブな機能を持ったnpmライブラリ のアップデートが必要になることが多く、都度対応するしかない 🥺
ライブラリの改修は npm の patch-package を利用して解決 ReactNativeのバージョン 14
© DMM.com リファクタリングならリグレッションテストなどで担保できるが Swift移行はリアーキテクチャのようなもの ReactNativeで書いたテストをSwiftで動作させることはできない🤔 既存のReduxのStoreに流れてくるイベントなどの処理を追い 処理全体を一度シーケンス図に起こす + 主要な機能要件の洗い出し テストがない状態の移行について
15
© DMM.com アプリケーションのステート ReactNative (シングルステート):Swift (各画面でのステート) 画面毎の状態をテストしやすくなったのは良かった 😊 今まではアプリケーション内部で参照できていた値が、 APIを経由して再取得する必要が出てくる箇所があった
😇 変更の少ないと想定されるAPIはレスポンスを 期限付きでキャッシュすることで対応 🕐 16
© DMM.com ReactNativeとSwiftのやりとり この画面はReactNative ドロワーはSwift メニューをタップ RN to Swift トピックをタップ
Swift to RN 17
© DMM.com ReactNativeとSwiftの連携 ReactNativeとSwiftの橋渡しはBridgeModuleが行う ReactNativeから自動的に init() が呼び出される 18
© DMM.com ReactNative → Swift ReactNativeからBridgeにイベントを送信 19
© DMM.com ReactNative → Swift ReactNativeからBridgeのイベント購読で受け取る 20
© DMM.com Swift → ReactNative SwiftからReactNativeへのイベント送信 21
© DMM.com Swift → ReactNative SwiftからBridgeのイベント購読で受け取る 22
© DMM.com ReactNative → Swiftの遷移 先程と同じようなイベントの流れで Swift移行されたFeatureのUIViewControllerをpresentで表示 ReactNativeとSwiftの画面遷移 23
© DMM.com ReactNativeとSwiftの画面遷移 Swift → ReactNativeの遷移 UIViewController.dismiss後にReactNative側でpush遷移するような見慣 れない画面遷移が起こってしまうため、アプリの末端機能から移行 また、1アプリの中でReactNativeを複数インスタンスを起動させると意図し ない動作を起こす可能性がある🙅
24
© DMM.com ReactNativeとSwiftの画面遷移 (再掲) 25
© DMM.com さいごに 26
© DMM.com さいごに Swiftへの移行はまだまだ途中! ReactNativeでうまく実現できなかったところを Swiftネイティブで使いやすく作れてる実感あり👏 (ユーザーからも良くなった声💬も届いてました) ReactNative自体は良いもの ⭕ チームメンバー構成によっては移行は1つの手段として良い選択肢
👌 27
© DMM.com Thank you for listening ! 😁