Reactive MVC and the Virtual DOMのメモ

Reactive MVC and the Virtual DOM — Futurice のメモ。

Model-View-Intent and the Virtual DOM の記事版という感じ

  • React/Fluxは最近話題になってる
  • React/FluxはリアクティブプログラミングであるがAPIが少し違う
    • Reactはリアクティブとインタラクティブなパターンを混ぜた感じ
  • ゼルダのように昼と夜で同じマップだけど違う世界のように2重となるようなケースを考える
  • The dual of Interactive is Reactive
  • 普通のインラクティブの場合は、Xをに影響を与えるものを探す場合、他のモジュールでX.update()を探す必要がある
  • しかし、リアクティブパターンの場合はXの中を探せば良くなる

どうやってリアクティブパターンを実装するか?

  • event emittersの導入
  • Xからあるイベントをsubscribeするだけ
  • FluxもReactiveも別にRxJSやBacon.js等の必要はなく、EventEmitterだけでも事足りる
  • EventEmitter : RxJS == roller blades : cars.
  • RxJSではObservablesがEventEmitter的なもの

Reactive MVC?

  • まずはControllerを取り除くことから
  • Controllerはインタラクティブなコンポーネントだから
  • ModelはデータイベントのObservablesをexportする
  • ViewはModelのObservableに対してSubScribeする
  • MV*と言われるやつはControllerでユーザイベントを監視して、Modelのupdateを呼び出すスタイルを取る
  • Reactiveの場合はModelが”Reactive Controller”を監視する
  • この”Reactive Controller”を”Intent”といったりする

Model-View-Intent

  • Intentはユーザーイベントをモデルが監視しやすいEventに翻訳する(Intent Event)
  • ModelがこのIntent Eventをsubscribeし、モデルのデータを変更する
  • Intent -> Model -> View の一方通行の流れができる

    Model
    Input: user interaction events from the Intent.
    Output: data events.

    View
    Input: data events from the Model.
    Output: a Virtual DOM rendering of the model, and raw user input events (such as clicks, keyboard typing, accelerometer events, etc).

    Intent
    Input: raw user input events from the View.
    Output: model-friendly user intention events.

Virtual DOM to DOM

  • Model-View-Intent ではViewが実際のレンダリングをしないでもいい
  • ViewがVirtual DOMを使うRendererに処理を移譲してあげる

サンプル

How is this different to React/Flux?

  • Pureなリアクティブである
    • React/Fluxはリアクティブとインタラクティブをmixした感じ
  • MVIは中心となるものを持たない
    • FluxはDispatcherなど中心となるやつを推奨してる(シングルトン)
    • Model(Store)間の依存はそれぞれのモデル内で定義出来る
    • MVIはModels observe other Models.
  • RxJSパワー
  • RendererをViewと切り離せる
  • Rendererが副作用がある所なのでそれを分けることでテストしやすくなる
  • No internal state – SteteはViewにはなく、Modelのみに存在する
  • No reusable UI components
    • Reactは再利用可能なComponentsであることを主張してる
    • MVIの場合はそのような再利用可能なComponentsはWeb Componentsのレイヤーで持っておいて
    • それをVirtual DOMで使うとかそういう方向をイメージしてる
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中