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

日本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

クライアントMVC

Martin Fowler said

photo by pragdave2012年2月23日木曜日

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

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

現在の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

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日木曜日

Model-View-Controller

• MVC– Smalltalk–

••

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

• 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

Controller

Presentation Model監視

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

解決しようとしたもの

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

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

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

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

Presentation 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)

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日木曜日

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

続く

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

✓ 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

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

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

Next Generation Web Application Architecture

Technology

Next Generation Networks

NEXT Generation Studie (de)

Next Generation IP < IPv6 >

IPv6 The Next Generation

Next-Generation Wireless Mesh Networks · White Paper | Next-Generation Wireless Mesh Networks: Combining a multi-radio architecture with high-performance routing to optimize video

Next Generation Learning & Crayonpedia

IPv6 Next Generation Internet

RANGI (Routing Architecture for Next Generation Internet) Experiment Report

Next Generation Network

Next Generation Data Centers

GYTE - Bilgisayar Mühendisliği Bölümü Bilgisayar Mühendisliği Bölümü GYTE - Bilgisayar Mühendisliği Bölümü AN ARCHITECTURE FOR NEXT GENERATION MIDDLEWARE

NEXT GENERATION FRESH

Next Generation - 01

NGN Next Generation Network - dl.softgozar.comdl.softgozar.com/Files/Ebook/NGN_Booklet_Softgozar.com.pdf · NGN Next Generation Network : ... ( Next Generation Network) ... Call Agent

next generation Application Development and Maintenance ... · next generation ADM | the way we do it next generation Application Development and Maintenance next generation Application

AMD’s Next Generation

NexT GeNerATiON Neem

Consoles & next generation gaming

IMC the Next Generation

Next Generation GDI