ReactNative のアプリを Swift に置き換えてます

Transcript

1. DMM MEETUP #26 React Native Swift ⼤⾨弘明 で書かれたアプリを で書き直しています

2. ⾃⼰紹介 About me ⼤⾨弘明 合同会社DMM.COM エンターテインメント本部 オンラインサロン事業部 2014年： 新卒⼊社 いくつかのiOSアプリの保守や新規開発をするなど

   2020年： オンラインサロン事業部にジョイン 主にiOSアプリを担当している

3. ⽇ すこと A brief outline 僕にとって React Native はつらい React

   Native to Swift は つらいが 理ではない ↑のような気持ちと の

4. 僕にとってReact
   Nativeはつらい

5. ライブ オーナーから 知 タイムライン Product 専⽤コミュニティアプリ 「DMM オンラインサロン専⽤コミュニティ」 を⽤いたサロンの 員専⽤のiOS

   アプリ。

6. つらいこと React Native が負債に アップデートがしんどい

7. アップデートがしんどい そもそもしんどい Apple に従う ( OS, ATS, UIWebView...) これはどのみちつきまとう ReactNative

   のアップデートがしんどい Xcode, RN, ライブラリ すべて動作するように 性のなくなるライブラリがある 式じゃないからRN ⾃体が いで、ライブラリはさらに そもそも僕は React Native がわからない Web フロントの技 は専⾨ アロー , スプレッド構 を ⽤した の羅列つらい

8. React Native が負債に iOS / Swift / JS / React

   Native すべての い理 が必 当 はフロントエンドエンジニア主 で開発 iOS エンジニアがいなかった当時としてはベストな 択 iOS エンジニアを れてスピード/ 品 Up るが・・・ 度は JS, React Native が⾜かせに 得 野を⽣かせずつらい React Native を利⽤している 味はあまりない iOS のみ このまま使い けていくとデメリットの に苦しめられる

9. つらいこと React Native のアップデート もするからしんどい iOS エンジニアがJOIN したが スピードを し切れない

   →
   Swift化して負債脱却しよう！ React Native が負債に アップデートがしんどい

10. React Native → Swift は つらいが 理ではない React Native →

    Swift

11. Swift の流れ Xcode, React Native を に Swift 基 を作る

    的に Swift する

12. Swift の流れ Xcode, React Native を に Swift 基 を作る

    的に Swift する

13. Xcode, React Native を に まずはビルドできるように Xcode と React Native

    を にしてビルドが るまでエラーを り いていく → ひたすらトライアンドエラー npm のライブラリが していない場 npm の ライブラリがアップデートできない場 がある アップデートすると動作が保 できないやつ のXcode, React Native に していないやつ PR 状 でマージされてないやつ → patch-package を利⽤する

14. patch-package npm でインストールしたライブラリに パッチを当ててくれるツール https://github.com/ds300/patch-package ネイティブ にも利⽤可 Objectice-C(.m) ファイル や

    podspec ファイル等も 正できる

15. patch-package 例: Podspec のReact だけ 正したい場 Xcode12 でビルドするために React を

    React-Core に 更する必 があった。

16. Swift の流れ Xcode, React Native を に ビルドが るまでエラーを り

    いていく npm のライブラリが していない場 patch-package を利⽤して 正 Swift 基 を作る 的に Swift する

17. Swift の流れ Xcode, React Native を に ビルドが るまでエラーを り

    いていく npm のライブラリが していない場 patch-package を利⽤して 正 Swift 基 を作る 的に Swift する

18. 内 奨アーキテクチャ VIPER ライクの 内 奨アーキテクチャを採⽤して 技 の流動 を る

    React Native も1 つのモジュールとして利⽤ マルチモジュール で いずれ消えゆく React Native も1 つのモジュールとして、 ネイティブに ⾏した や ⾯からは しないように で る

19. Presenter⾃体は 状態を持たない Interacterは機能の呼び出しや ドメインの取得を⾏う

20. None

21. 画⾯や機能のまとまりごとにFeatureモジュールを作る 画⾯や機能のまとまりごとにFeatureモジュールを作る ReactNative
    部分は
    1つのFeatureとしてモジュール化する ReactNative
    部分は
    1つのFeatureとしてモジュール化する

22. None

23. RN と Swift 間のやりとり Pub/Sub メッセージングモデル イベントを 知するSubject(Combine) 流れるのはイベントのオブジェクト(enum) Swift

    へのメッセージ ⽤のメソッドはRN 側に 開 RN へのメッセージ ⽤のメソッド イベントオブジェクト(enum) を Dictionary に してRN に 知 処理 にI/F を やしていくのは けたい I/F を やすには ObjC のコーディング ( マクロ 義) も必 メソッド に やしていくのはしんどい
24. None

25. コードの⼀ receivedEvent(受信⽤) notifyToRN(送信⽤)
    Swift側からは、 を意識すればよい
    

26. Swift の流れ Xcode, React Native を に ビルドが るまでエラーを り

    いていく npm のライブラリが していない場 patch-package を利⽤して 正 的に Swift する Swift 基 を作る 内の 奨アーキテクチャで技 の流動 マルチモジュールで を る Pub/Sub で RN <-> SWift を簡 に

27. Swift の流れ Xcode, React Native を に ビルドが るまでエラーを り

    いていく npm のライブラリが していない場 patch-package を利⽤して 正 的に Swift する Swift 基 を作る 内の 奨アーキテクチャで技 の流動 マルチモジュールで を る Pub/Sub で RN <-> SWift を簡 に

28. 的に Swift する 範囲の ない末 の ⾯からSwift 中で中 して の開発とかもあるかもしれない

    Swift が に ⾏せずともアプリはリリースできる状 に Swift → RN → Swift → RN となる はしない 単 にコントロールが しい が になる
29. None

30. 第2弾 第3弾 ... 第1弾

31. Swift の流れ Xcode, React Native を に ビルドが るまでエラーを り

    いていく npm のライブラリが していない場 patch-package を利⽤して 正 Swift 基 を作る 内の 奨アーキテクチャで技 の流動 マルチモジュールで を る Pub/Sub で RN <-> SWift を簡 に 的に Swift する 範囲の ない末 の ⾯からSwift

32. まとめ 僕にとって React Native はつらい アップデートがしんどい ReactNative が負債 React Native

    → Swift はつらいが 理ではない patch-package を利⽤して未 のライブラリ 正 マルチモジュール で を に Pub/Sub メッセージングモデル で RN<-> Swift 間のを簡 に 範囲の ない末 の ⾯からSwift

33. おわり