Upgrade to Pro — share decks privately, control downloads, hide ads and more …

マルチプラットフォーム時代のReact / React Native / Universal JS

Shin Suzuki
September 05, 2016

マルチプラットフォーム時代のReact / React Native / Universal JS

React Nativeを使えば、Reactの考え方でモバイル開発ができる。
Universal JSの考え方がわかれば、React / React Native両方で動くコードが書ける。
WebとモバイルアプリのUIは別。モデルとその状態管理を共有してみよう。

Shin Suzuki

September 05, 2016
Tweet

More Decks by Shin Suzuki

Other Decks in Programming

Transcript

  1. 語仕様とそうでないものを知る 言 言語仕様 そうでない window Array Date Promise setTimeout() XMLHttpRequest

    localStorage process.exit() EventEmitter Object.freeze() console.log() そうじゃないけど実質Universal
  2. 語仕様とそうでないものを知る 言 JavaScript window Array Date Promise setTimeout() XMLHttpRequest WebAudio

    process.exit() fs Object.freeze() RegExp http Universal console.log() 実質Universal
  3. JavaScript window Array Date Promise setTimeout() XMLHttpRequest WebAudio Object.freeze() RegExp

    Buffer Universal console.log() 実質Universal = 実質どこでも動く fetch() require() process.exit() fs http
  4. UI Layer React ビジネスロジック => プラットフォームに依存しない App Layer Domain Layer

    Infra Layer 質Universal だけで、 アプリケーションの何ができるか。 実 flux(Redux) (インターフェイスを統一すればいい) UI以外は共有可能 実質UNIVERSAL
  5. 医師用管理画面 アプリ 発例 開 CureApp NASH ドメインモデルと、 その状態管理 React Native

    React Universal JS ドメインモデル部を 別ライブラリとして開発 UI Layer App Layer Domain Layer Infra Layer 画面の状態管理 モデルの状態管理 redux REST API層 fetch ファイルなど jsonに変換してimport
  6. メインモデル? ド import { PatientRepository, Patient, LessonProgressService } from 'domain'

    const repo = new PatientRepository() const patient = await repo.login(username, password) assert(patient instanceof Patient) const service = new LessonProgressService() Domain Driven Design Serviceは複雑な手続きを担う。 データ更新の際は差分イベント(後述)を発行。 RepositoryはデータのReadを担う ModelはObject.freeze()がかかっていて、 強制的にimmutableになっている。 クライアントがドメイン知識を利用するためのAPIを提供。 インフラ層へのアクセスはfetch等で抽象化されているので 実質Universal => Nodeで入念にテストできる。
  7. メインモデルの状態管理? ド Event Sourcing storeの状態変更。およびmiddlewareでサーバーと同期 import { DomainState, createMiddleware, actions,

    reducer } from 'domain/redux' const patient = this.props.authPatient const event = service.finishLesson(patient, lessonId) boundActions.applyEvent(event) 状態は変えず、状態変更イベントを返す サーバーとの同期、アクセス認可、オフライン対応などは複雑で Middlewareが膨らむが、 ロジックに閉じているため、Nodeで入念にテストできる。 dispatcherをbindしたaction
  8. omponentの抽象化で、 再利用できる未来 C <p> <div> <View> <Text> <img> <Image> <ul>

    <ListView> React: DOMを意識したComponent => Webにしか使えない React Native: iOS,Android両方を意識したComponent => より抽象化されている ☓ ◯ React React Native
  9. UI Layer App Layer Domain Layer Infra Layer UIも共有可能!? 実質UNIVERSAL

    eact Native Webで クロスプラットフォームは加速する? R React Native的Componentは、 「実質Universal」にできるかも。 react-native-web: 抽象化されたReact NativeのComponentを解釈し、 DOMに落としこむライブラリ。 まだβ。以下のコンセプト
  10. RYと密結合のバランス D UI Layer App Layer Domain Layer Infra Layer

    プラットフォームごとの違いに 柔軟に対応したいレイヤー。 Universalにして再利用、 Nodeでテストして 信頼性を高めたいレイヤー UIを部分的に再利用したいなら、 密結合を防ぐために「コピー」したほうがいい。