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

by hayatan

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

⽇すこと A brief outline 僕にとって React Native はつらい React Native to Swift はつらいが理ではない ↑のような気持ちとの

Slide 4

Slide 4 text

僕にとってReactNativeはつらい

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

アップデートがしんどいそもそもしんどい Apple に従う ( OS, ATS, UIWebView...) これはどのみちつきまとう ReactNative のアップデートがしんどい Xcode, RN, ライブラリすべて動作するように性のなくなるライブラリがある式じゃないからRN ⾃体がいで、ライブラリはさらにそもそも僕は React Native がわからない Web フロントの技は専⾨アロー , スプレッド構を⽤したの羅列つらい

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

つらいこと React Native のアップデートもするからしんどい iOS エンジニアがJOIN したがスピードをし切れない →Swift化して負債脱却しよう！ React Native が負債にアップデートがしんどい

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Swift の流れ Xcode, React Native をに Swift 基を作る的に Swift する

Slide 12

Slide 12 text

Swift の流れ Xcode, React Native をに Swift 基を作る的に Swift する

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

patch-package 例: Podspec のReact だけ正したい場 Xcode12 でビルドするために React を React-Core に更する必があった。

Slide 16

Slide 16 text

Swift の流れ Xcode, React Native をにビルドがるまでエラーをりいていく npm のライブラリがしていない場 patch-package を利⽤して正 Swift 基を作る的に Swift する

Slide 17

Slide 17 text

Slide 18

Slide 18 text

内奨アーキテクチャ VIPER ライクの内奨アーキテクチャを採⽤して技の流動をる React Native も1 つのモジュールとして利⽤マルチモジュールでいずれ消えゆく React Native も1 つのモジュールとして、ネイティブに⾏したや⾯からはしないようにでる

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

RN と Swift 間のやりとり Pub/Sub メッセージングモデルイベントを知するSubject(Combine) 流れるのはイベントのオブジェクト(enum) Swift へのメッセージ⽤のメソッドはRN 側に開 RN へのメッセージ⽤のメソッドイベントオブジェクト(enum) を Dictionary にしてRN に知処理にI/F をやしていくのはけたい I/F をやすには ObjC のコーディング ( マクロ義) も必メソッドにやしていくのはしんどい

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Swift の流れ Xcode, React Native をにビルドがるまでエラーをりいていく npm のライブラリがしていない場 patch-package を利⽤して正的に Swift する Swift 基を作る内の奨アーキテクチャで技の流動マルチモジュールでをる Pub/Sub で RN <-> SWift を簡に

Slide 27

Slide 27 text

Slide 28

Slide 28 text

的に Swift する範囲のない末の⾯からSwift 中で中しての開発とかもあるかもしれない Swift がに⾏せずともアプリはリリースできる状に Swift → RN → Swift → RN となるはしない単にコントロールがしいがになる

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

まとめ僕にとって React Native はつらいアップデートがしんどい ReactNative が負債 React Native → Swift はつらいが理ではない patch-package を利⽤して未のライブラリ正マルチモジュールでをに Pub/Sub メッセージングモデルで RN<-> Swift 間のを簡に範囲のない末の⾯からSwift

Slide 33

Slide 33 text

おわり