Vue NativeとReact Nativeでキメラ アプリをつくっている話@iwsksky

自己紹介 岩崎拓海@iwsksky - 株式会社ジラフで質問箱をReact Nativeで書いています、 React Native歴は3ヶ月くらい - スローガン株式会社でニュースアプリ、株式会社ディー・エヌ ・エーで配車アプリのAndroid開発をしていました - RxJavaのようなリアクティブな技術が好きです

今日のお話 - 概要 - Vue NativeというReact NativeのラッパーをReact Nativeと共存させつつリプレイスしている話です - ベストプラクティス的な話ではないので、1つのおもしろ事例として聞いてください

Vue Nativeについて - React NativeライクにVue.js でアプリをクロスプラット フォーム開発できる技術 - ラップしてるだけのライブラリ も結構多い - アーキテクチャは何も考えな いとflux(vuex)になります 入社して1ヶ月ほどVue Nativeで開発していましたが、色々と辛い事 情がありリプレースする決断に至りました ex.vue-native-router

辛い事情1 - React Native以上にドキュメントが存在しない - 気づいたらReact Nativeのドキュメントやソースコードを読んでいたみたいなことが多々 - こういうことが頻繁に起こる

辛い事情2 - 依存しているモジュールのバージョンが古い - 新しい技術で進化も早いので最新に追従できる状態にはしておきたい [email protected] 最新 0.59.5 [email protected] 最新 0.53.1 [email protected] 最新 3.9.0

緩やかなリプレース のために - vueとtsx - vuexとredux - ビルド環境 - コンポーネント - アーキテクチャ

ビルド環境 - rn-cli.config.jsにtransformer をかませる - 最新のmetroはtypescript対 応

vue,tsxの共存 - propsの定義さえ一致していれば tsxからvueを呼べる home.tsx home-contents.vue

vuex,reduxの共存 アーキテクチャの概要は以下のような感じ vue components actions mutations state react components actions(actio n creator) reducers store Vuex Redux

vuex,reduxの共存 vue on tsx dispatch redux action from vuex store

vuex,reduxの共存

結論: ReactとVueは一応共存できます。

ご清聴ありがとうございました。