Next Generation Web Application Architecture

しまだこうじSHIMADA Koji

日本Rubyの会Ruby札幌

Next Generation Web Application Architecture.

2012-02-21 Ruby Sapporo Night vol.14アップルストア札幌

リッチクライアント時代のWebアプリケーションアーキテクチャパターンについて考える　

2012年2月23日木曜日

“...はるかな彼方の昔、ある場所で、何もなく無菌状態の空間を漂っていた、でたらめに集まった原子の小さな集合に、それは深刻な外傷を与えた。そして、異常な、とてもありそうもないパターンで原子たちを離れないように結びつけてしまった。このようなパターンは自分自身をコピーするということを早いうちに覚えてしまい(これはパターンが非凡なものであることの一面を示している) 、パターンが漂うすべての惑星で、塊状の災難が引き起こされ続けた。このようにして宇宙に生命が誕生したのである。

『銀河ヒッチハイク・ガイド』


しまだこうじ島田浩二

Photo by tmaeda


http://www.flickr.com/photos/tmaedax/3845208228/

http://www.flickr.com/photos/tmaedax/3845208228/

日本Rubyの会2012年2月23日木曜日

一般社団法人LOCAL








よろしくお願いします








お品書き✓ クライアントMVCって何だろう✓ もういちどMVC✓ MVC系のパターンの系譜について✓ もういちどクライアントMVC



Backbone.js gives structure to web applications by

providing models with key-value binding and

custom events, collections with a rich API of

enumerable functions, views with declarative

event handling, and connects it all to your existing

API over a RESTful JSON interface.


Demohttps://github.com/snoozer05/backbone-tiny-example


https://github.com/snoozer05/backbone-tiny-example

https://github.com/snoozer05/backbone-tiny-example

クライアントMVC


Martin Fowler said

photo by pragdave2012年2月23日木曜日

http://www.flickr.com/photos/pragdave/173641323


“MVCはさまざまな解釈をされてしまっているにも関わらず、それら全てが ‘MVC’という名前で記述されている。もしそれで混乱しないようなら、あなたも伝言ゲームによるMVCの誤解の犠牲者の可能性がある。

http://martinfowler.com/eaaDev/uiArchs.html2012年2月23日木曜日

http://martinfowler.com/eaaDev/uiArchs.html


現在のWebアプリケーション開発でよく耳にするMVC

http://www.flickr.com/photos/indigoskies/6523275513/





MVC Model 2“当時”のWebアプリケーションにMVCアーキテクチャを当てはめたもの




MVCのオリジナルではない


もういちどMVC


http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai

30 Smalltalk

MVC

2011 3 30





MVC• Model-View-Controller• XEROX PARC LRG Trygve Mikkjel Heyerdahl

Reenskaug 1978-1979– MODELS - VIEWS – CONTROLLERS

• http://d.hatena.ne.jp/digitalsoul/20100913/1284330448– DynaBook

•••





Model-View-Controller

•• 1987• (FXIS)

• 3• 1988 OJT




http://www.jac-net.com/~tarzan/smalltalkers/mvc/mvc.html2012年2月23日木曜日

http://www.jac-net.com/~tarzan/smalltalkers/mvc/mvc.html

http://www.jac-net.com/~tarzan/smalltalkers/mvc/mvc.html


Model-View-Controller

• MVC– Smalltalk–

••

•




http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai2012年2月23日木曜日




MVC

• MVC• MVC• MVC





MVC

•

•

••••




MVC••

– changed:

– update:

––

••

http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai2012年2月23日木曜日




MVC• (VC)

• M VC– ( )

( )• on:aspect:menu:•

•




Martin Fowler said




“率直に言って、古典的なMVCは今のリッチクライアントに対してはあまり用をなしません。




対話型システムのMVC系アーキテクチャの系譜


MVC系アーキテクチャパターン

✓ Presentation Model✓ Application Model✓ MVVM✓ MVP





Presentation Model

✓ ドメインロジックとプレゼンテーションロジックをモデルの層で分離

✓ View は Model の手前に置かれた Presentation Model を監視する


Presentation Model

View

Model

Controller

Presentation Model監視


古典的なMVCが持っていた問題を

解決しようとしたもの


古典的なMVCが持っていた問題

✓ システムに存在するロジックはビジネスロジックだけじゃない

✓ プレゼンテーションロジックの置き場が問題

✓ MVC では View か Model におくしか無い


Presentation Model

View

Model

Controller

Presentation Model監視


Presentation Model

✓ Application Model✓ Visual Works でのアプローチ

✓ Model-View ViewModel✓ WPF でのアプローチ





Model View Presenter

✓ 入力制御はOSさんがやってくれるのでコントローラさんが退場

✓ 直接 View 側を操作したいプレゼンテーションロジックもあった

✓ ロジックを持つ側で直接いじれる人が必要


Model View Presenter

View(V/C)

Model

Presenter

監視

操作も可


ポイント


Controller とPresenter は

生い立ちの異なるもの


整理





ドメインロジック以外のロジックをどこに置いて、それと他のコンポーネントをどううまく協調させるかの実践の歴史



最近の JavaScript ライブラリ

✓ Backbone.js✓ Knockout.js✓ JavaScriptMVC✓ Batman.js


Rails の世界でも

✓ Cells✓ Draper✓ ...


Web アプリケーションの世界にも、リッチクライアントと大規模化によってプレゼンテーションロジック問題との戦いが本格化しつつある


Martin Fowler said




“MVCはさまざまな解釈をされてしまっているにも関わらず、それら全てが ‘MVC‘という名前で記述されている。もしそれで混乱しないようなら、あなたも伝言ゲームによるMVCの誤解の犠牲者の可能性がある。




クライアントMVC









ではなく





まだ(僕が)しっくりきていないこと

✓ プレゼンテーションロジックにもドメインロジックにもうまくおけないようなロジックもあるような...

✓ クライアント側に何を置いてサーバ側に何を置いてそれらがどう協調すべきか


Is this answer?

https://gist.github.com/13621102012年2月23日木曜日

https://gist.github.com/1362110

https://gist.github.com/1362110

先人の知恵に学びつつさらなる実践と議論が必要そう


続く


その他の情報へのポインタ

✓ WPF 向けのモデル - ビュー - プレゼンター - ビューモデル設計パターンhttp://msdn.microsoft.com/ja-jp/magazine/hh580734.aspx

✓ 開発者が知っておくべき、6つのUIアーキテクチャ・パターンhttp://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_10/greatblogentry_10_01.html


http://msdn.microsoft.com/ja-jp/magazine/hh580734.aspx

http://msdn.microsoft.com/ja-jp/magazine/hh580734.aspx

http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_10/greatblogentry_10_01.html










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


Ruby Sapporo Nightvol.142012-02-23(Thu) Apple Store, Sapporo


Technology

Next Generation Web Application Architecture