【第4回】ReactNativeにゆかりのあるスタートアップが集う会

【第4回】ReactNativeにゆかりのあるスタートアップが集う会

Transcript

1. Vue NativeとReact Nativeでキメラ アプリをつくっている話@iwsksky
2. 自己紹介 岩崎拓海@iwsksky - 株式会社ジラフで質問箱をReact Nativeで書いています、 React Native歴は3ヶ月くらい - スローガン株式会社でニュースアプリ、株式会社ディー・エヌ ・エーで配車アプリのAndroid開発をしていました - RxJavaのようなリアクティブな技術が好きです
3. 今日のお話 - 概要 - Vue NativeというReact NativeのラッパーをReact Nativeと共存させつつリプレイスしている話です - ベストプラクティス的な話ではないので、1つのおもしろ事例として聞いてください
4. Vue Nativeについて - React NativeライクにVue.js でアプリをクロスプラット フォーム開発できる技術 - ラップしてるだけのライブラリ も結構多い - アーキテクチャは何も考えな いとflux(vuex)になります 入社して1ヶ月ほどVue Nativeで開発していましたが、色々と辛い事 情がありリプレースする決断に至りました ex.vue-native-router
5. 辛い事情1 - React Native以上にドキュメントが存在しない - 気づいたらReact Nativeのドキュメントやソースコードを読んでいたみたいなことが多々 - こういうことが頻繁に起こる
6. 辛い事情2 - 依存しているモジュールのバージョンが古い - 新しい技術で進化も早いので最新に追従できる状態にはしておきたい react-native@0.55.4 最新 0.59.5 metro-core@0.30.2 最新 0.53.1 react-navigation@1.5.11 最新 3.9.0
7. 緩やかなリプレース のために - vueとtsx - vuexとredux - ビルド環境 - コンポーネント - アーキテクチャ
8. ビルド環境 - rn-cli.config.jsにtransformer をかませる - 最新のmetroはtypescript対 応
9. vue,tsxの共存 - propsの定義さえ一致していれば tsxからvueを呼べる home.tsx home-contents.vue
10. vuex,reduxの共存 アーキテクチャの概要は以下のような感じ vue components actions mutations state react components actions(actio n creator) reducers store Vuex Redux
11. vuex,reduxの共存 vue on tsx dispatch redux action from vuex store
12. vuex,reduxの共存
13. 結論: ReactとVueは一応共存できます。
14. ご清聴ありがとうございました。