ダブルMVCの意味するところ [GoGaRuCo 2013]

http://www.youtube.com/watch?v=s1dhXamEAKQ

1 comment | 0 points | by Jshiike 約3年前


Jshiike 約3年前 | ▲upvoteする | link

TildYehuda KatzのGolden Gate Ruby Conference 2013での講演。


Ruby on RailsのクリエーターであるDavid Heinemeier Hanssonが、「JavaScript勢はダブルMVCで苦しんでいる。サーバとクライアント両方にMVCが必要で複雑すぎる。」とTwitterで発言したのに対して、Yehudaは、それでは誤解を与えると危惧し、GUIプログラミングが歴史的にどのようにMVCに発展してきたかを紹介することで、ダブルMVCが本当に意味するところを解説しています。


DHHの発言は、盛り上がってきたMeteor / Node.js勢に対する単なる批判っぽいですが、それに対してYehudaはロジカルに話をまとめてます。


スライドを見ながらの方がわかりやすいので、時間があれば是非Video (31分)をご欄ください。



GUIプログラミングの構成は、


1) オブジェクトを起動する


2) 初期UIを描く


3) クリックやタッチなどのユーザのインプットアクションをユーザインテントに翻訳する


4) アプリstateを更新する


5) ドメインオブジェクトを更新する


6) UIの変更を通知する


7) UIを更新する


70年代のプログラミングもしくは2005年のjQueryではマニュアル作業方式と言える。1)2)はDOMが、3)4)5)はEvent Handlerが、6) Event Handlerがやるので必要ない、7) もEvent Handlerがやる。


80年代、もしくは2008年には、view logicとドメインlogicが同じところにあるのはまずいと気づいた。「separated presentation (表現とModelを分離する)」というコンセプトが、SmalltalkやBackboneで採用された。 UI — View — Modelの構成である。ViewはModelにアクセスできるが、ModelはViewにアクセスできない。ModelはViewにオブザーバを介して通知する。


Smalltalk MVCにおいては、UI — View/Controller — Modelの関係になり、ViewとControllerは直接アクセスしていた。オブザーバの仕組みが複雑なものには実用的でないという背景があった。[Videoのスライド参照]


現代のMVCでは、1) は自分の問題でなく他のところで対処される、2) はView、3)4)5)はController、6)はオブザーバだが簡単なものならController、7)はViewとなった。4)5)は特別なオブジェクトが扱うので、システム内部は、どのようになるのかの明確な答えはもってない。


オリジナルのMVCで問題なのは、どこでUIが起動されるのか、UIの階層は重要だが複数のアプローチが可能な場合、MVCは特定のフレームワークが適用されるのにアプリstateはシステムのどこにでも保管されてしまうこと。


RailsはMVCではないという話しもあるが、GUIデザインパターンが当てはまることは間違いない。シンプルなRailモデルにおいてブラウザはブラックボックス。UIが先にレンダリングしてユーザがやるかもしれないアクションに対応できるように準備し、実際のユーザインプットをブラウザに渡す。そしてブラウザはHTTPを介してControllerとやりとりする。これは従前の事例と同じ普通のUIパターンの範疇であるが、違うのは、ユーザイベントの全ての可能性を事前に計算することを強制されること、ブラウザがやることがほとんど見えないこと、HTTPで情報を送り、ページが再読み込みされるということ。[Videoのスライド参照。スライドではViewまわりの矢印が記載漏れになってます。]


Railsにおいては、1)はRouterとController、2)はView、3)はテンプレートとブラウザ(事前に計算される)、4)はController (セッション)、5)もController (ActiveRecord経由で保管)、6)はHTTP、7)はブラウザが担当する。


Railsの問題としては、まず、UIの階層を扱うのは大変。ブラウザで管理している(ユーザのカーソルがどこにフォーカスしてるかなどの)stateを利用するか、もしくはページを再読み込みするかの選択が必要。ブラウザのstateとRailsのstate管理は遠く離れたところにありやりとりしない。遅延。ユーザがインタラクションするパターンがリンクとフォームに制限される。JavaScriptを絡ませたとしても全体の構成は変わらないので、ページ全体を再読み込みすることになる。RailsはSmalltalkやCocoaのベストプラクティスを導入できてない。[Videoのスライド参照]


それに対して、Presentation Model (VisualWorks) は、UI — input —> Controller — update —> Model — notify —> Presentation Model — notify —> View — draw —> UI の構成となる。 [Videoのスライド参照] メリットとしては、Viewの準備と描画を切り離せる、また、イベントハンドリングとその解釈を描画と別に扱える。


また、Coordinating Controller (Cocoa)では、Presentation Modelをまとめた感じで、UI — input —> View — notify —> Mediating Controller — update —> Model — notify —> Mediating Controller — notify —> View — draw —> UI の構成となる。更に、ログイン/ログアウトのようにアプリ全体にかかわるステータス管理は、ViewからCoordinating Controllerのイベントを送ってアプリの別の箇所を更新して対応する。 [Videoのスライド参照


Coordinating Controllerにおいては、1)はCoordinating Controller、2)3) はView、4)はCoordinating Controller、5)はMediating Controller、6)はオブザーバもしくはController、7)はViewが担当する。


CocoaはオリジナルのMVCの問題であるUIの階層に対応している。ユーザが画面の一部をタッチした処理を上位レイヤに投げて、どう処理をすれなよいかわかっているレイヤに到達すれば実行されるので、フレームワークとアプリのstateがうまく連携できている。


Cocoaの課題としては、何が起動されるのかわかりづらく、Coordinating Controllerをうまく管理すること、オブザーバシステムの限界、ブラウザURLがある。[時間切れで詳細説明が割愛された。]


Emberでは、同じような仕組みが採用されている。UI — input —> View — notify —> Controller — update —> Model — notify —> Controller — notify —> View — draw —> UI の構成となる。またMVCよりも上位レイヤの処理については、Viewから該当するRouteまでイベントが送られ、ここはCocoaのようにマニュアルでなく、Ember側で管理してくれる。[Videoのスライド参照]


Emberにおいては、1)はRoute、2)はテンプレート、3) はテンプレートもしくはView、4)はRoute、5)はController、6)はData Binding、7)はテンプレートが担当する。例えば、Application / Navigation/ Albumの3つのテンプレートがあった場合、EmberはCocoaとは違って、そのテンプレートの階層されぞれに、自動的に該当するRouteやControllerを配置してくれる。


EmberはUIの全てを扱ってくれる。このスライドで、RailsはModelに対するUpdateと、Modelデータの管理 (persistent) をする役割。なので、Emberが基本的なMVCを担い、Railsはデータのpersistentをする役割をもっているということ。データのpersistentはAmazonの購入商品ステータス管理でわかるように重要な役割。[Videoのスライド参照


MVCというのはクライアントにおけるEmberやBackboneか、サーバにおけるRailsが基本。(2つのMVCが重なってコンフリクトを起こすというものではない。)ダブルMVCが成り立つのは、「EmberがMVCを担っているが、Railsが商品ステータスの更新のところだけUIのMVCの役割をもっている。」というようなパターンのみ。




Discourse : パフォーマンス向上に注力したRubyアプリづくり [GoGaRuCo 2013]



#rails #開発スタイル #コーディング #アーキテクチャ

Back