Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
プロジェクトにMVVMを適用する
狙い
KnockoutJS勉強会 2014年5月17日
自己紹介
中規模業務系Webシステムのリプレースプロ
ジェクトを、従来型Webシステム+Ajaxで準備
していたが、突然、SPAっぽくやることに。
クライアントサイドフレームワークを検討。
各種勉強会に出まくって情報収集
従来型とのハイブリッドで...
今回の趣旨
プロジェクトの方針説明的な
従来型Webからクライアントサイドにっ
重心を移動した場合の構成について
ターゲット
「SPAっぽいのでやってよ」って突然
振られそうな空気を感じている人
最近突然湧きあがったjQuery批判に戸
惑いを隠せない人
私の今のプロジェクトに参加しそうな
人
アジェンダ
KnockoutJSって何?
MVVM?
Webシステムの構成の変遷
手ごたえ
とは
 JavaScriptのクライアントサイドフレームワーク
 Microsoftの社員の一人がOSSとして開発そうな。
MS製ではないが関連は深いとか。
 MVVMのアーキテクチャパターンを採用
Ajax通信メインの
SingleP...
MVVMとは
アプリケーションをModel-View-ViewModelに分割するアプ
リケーションのアーキテクチャパターンの手法
 Modelとは
定義としては、ドメイン領域のデータを具現化したオブ
ジェクト。
Viewとは
可視化で...
(ボクが考える)MVVM概念図
• ViewはViewModelをデータバインディングで追従。
• ViewModelを監視して、変更を自動的に反映する
• ViewModelはViewを知らない(依存しない)。Modelの情報を監視
可能(O...
データバインディングの例
価格:<input type=“text” data-bind=“value:price” id=“priceText”>
消費税率:<span data-bind=“text:taxRate” id=“taxSpan...
data-binding
MVVMとデータバインディングのうまみ
 Viewからロジックを追い出せる。分離できる。
 data-bindingでViewModelの変数やメソッドを指定するだけ
 Viewのコントロール同士の連携をシンプルにできる。
 Viewの...
jQueryのオンリー構成
 まず初めに対象のデータを選ぶDOMを選んでから処理を実行
 $(“#price”).change(calcTaxInclude);
 レイアウトが変わると、、、
 val =
$(this).closest...
例えば、こんな画面
製品マスタに構成部品を追加する。
「追加」で一覧に登録
できれば「登録」で親子を一括登録し
たい。
従来型:ブラウザRequestで画面書き換え型
製品登録
製品情報退避
serverclient
追加
Session
部品追加
画面
DB
製品登録
追加部品情報退避
製品情報取り出し
永続化処理
追加 登録
一部Ajaxを取り入れた
DOMベースのJavaScript活用型
製品登録
serverclient
追加
部品追加
画面
DB
永続化処理
登録
追加
$(“部品1”).data(“code”,”FRAME1000”)
$(“部品2”).d...
View
ViewModel
ViewMod
el
ViewMod
el
ViewMod
elModel
今回
MVVM活用でのクライアントデータ保持型
製品登録
serverclient
追加 部品追加
画面
DBDataAccess
登録
...
jQueryとの連携
 Ajax通信はKnockout範囲外でDeferred/Promiseを活用。
 DOMを直接指定して操作するScriptは使わない。
 ViewModelはViewのことは知らない。一方的に呼び出されるだけ。
...
手応え
 メリット
 ViewModel/ModelをそのままJSONとして投げられるのは楽
クライアント側のhiddenでデータ持ちまわす泥臭さがなくなった。
画面非表示になった削除対象キーも裏で保持しておける。
 クライアント側で...
ありがとうございました
Nächste SlideShare
Wird geladen in …5
×

KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い

5.300 Aufrufe

Veröffentlicht am

knockoutjsハンズオン勉強会 – 2014/05/17 – Microsoft 品川での発表資料です。

Veröffentlicht in: Technologie
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い

  1. 1. プロジェクトにMVVMを適用する 狙い KnockoutJS勉強会 2014年5月17日
  2. 2. 自己紹介
  3. 3. 中規模業務系Webシステムのリプレースプロ ジェクトを、従来型Webシステム+Ajaxで準備 していたが、突然、SPAっぽくやることに。 クライアントサイドフレームワークを検討。 各種勉強会に出まくって情報収集 従来型とのハイブリッドでも適合しそうな KnockoutJSの採用を決定し準備。 現在、実装メンバーと合流し実装着手。 経緯
  4. 4. 今回の趣旨 プロジェクトの方針説明的な 従来型Webからクライアントサイドにっ 重心を移動した場合の構成について
  5. 5. ターゲット 「SPAっぽいのでやってよ」って突然 振られそうな空気を感じている人 最近突然湧きあがったjQuery批判に戸 惑いを隠せない人 私の今のプロジェクトに参加しそうな 人
  6. 6. アジェンダ KnockoutJSって何? MVVM? Webシステムの構成の変遷 手ごたえ
  7. 7. とは  JavaScriptのクライアントサイドフレームワーク  Microsoftの社員の一人がOSSとして開発そうな。 MS製ではないが関連は深いとか。  MVVMのアーキテクチャパターンを採用 Ajax通信メインの SinglePageApplication/MultiPageApplicationを作りや すい  宣言型バインディングによるリアクティブプログラミングの スタイル Model-Driven-View  Angular.js、Backbone.jsと比較
  8. 8. MVVMとは アプリケーションをModel-View-ViewModelに分割するアプ リケーションのアーキテクチャパターンの手法  Modelとは 定義としては、ドメイン領域のデータを具現化したオブ ジェクト。 Viewとは 可視化できる画面。データの入出力部分。 View-Modelの状態を常に画面に反映し続ける。  View-Modelとは ModelとViewの橋渡し的存在。 ViewがModelのデータをViewからバインディングできる ようにする役割。
  9. 9. (ボクが考える)MVVM概念図 • ViewはViewModelをデータバインディングで追従。 • ViewModelを監視して、変更を自動的に反映する • ViewModelはViewを知らない(依存しない)。Modelの情報を監視 可能(Observable)な状態にして、外部(View)に提供する。 • Modelは他の存在を気にせず、依存もしない。 • 主にビジネス領域のデータを格納するだけ。
  10. 10. データバインディングの例 価格:<input type=“text” data-bind=“value:price” id=“priceText”> 消費税率:<span data-bind=“text:taxRate” id=“taxSpan”> % <hr> 税込金額:<span data-bind=“text:taxIncluded” id=“taxIncludedSpan”> 円 1000価格: 8消費税率: % 税込金額: 1080 円 function SomeViewModel(){ this.price = ko.observable(1000); this.taxRate = ko.observable(8); this.taxInclude=ko.computed(function(){ return calcTaxRate(this.price,this.taxRate); }); } 価格を2000にすると、税込金額は2160に変わる
  11. 11. data-binding
  12. 12. MVVMとデータバインディングのうまみ  Viewからロジックを追い出せる。分離できる。  data-bindingでViewModelの変数やメソッドを指定するだけ  Viewのコントロール同士の連携をシンプルにできる。  Viewのレイアウト変更にロジックが影響を受けない。  処理の起点がView(DOM)にない。  ViewはViewModelを追いかけているだけ。  DOMはViewModelの変更を受けて勝手に変わる。そこがリアクティブ。  ViewModelの使いまわしが可能。  ViewModelはViewに依存しない。  Viewにデータを置かなくていい。  データはViewModelで管理して、最終的にModelに反映。  Ajax通信時にFormからJSONやQueryStringを組み立てる必要がない。  それがいろいろはかどる!
  13. 13. jQueryのオンリー構成  まず初めに対象のデータを選ぶDOMを選んでから処理を実行  $(“#price”).change(calcTaxInclude);  レイアウトが変わると、、、  val = $(this).closest(“table”).children(“span.target”).text(“Changed!”);  いろいろはかどらなくなったり  UnitTestでブラウザが必須だったり $(function(){ $document.on(”change”, “.target”,(function(e){…})); }); とか、テストフレームワークでテストできないロジック書いてしまいがち。
  14. 14. 例えば、こんな画面 製品マスタに構成部品を追加する。 「追加」で一覧に登録 できれば「登録」で親子を一括登録し たい。
  15. 15. 従来型:ブラウザRequestで画面書き換え型 製品登録 製品情報退避 serverclient 追加 Session 部品追加 画面 DB 製品登録 追加部品情報退避 製品情報取り出し 永続化処理 追加 登録
  16. 16. 一部Ajaxを取り入れた DOMベースのJavaScript活用型 製品登録 serverclient 追加 部品追加 画面 DB 永続化処理 登録 追加 $(“部品1”).data(“code”,”FRAME1000”) $(“部品2”).data(“code”,”TIRE1000”) $(“部品3”).data(“code”,”CMP1000”) 製品登録 <inupt type=“hidden” name=“部品1”> <input type=“hidden” name=“部品2> <input type=“hidden” name=“部品3> POST/GET OR
  17. 17. View ViewModel ViewMod el ViewMod el ViewMod elModel 今回 MVVM活用でのクライアントデータ保持型 製品登録 serverclient 追加 部品追加 画面 DBDataAccess 登録 追加 { product:製品データ, 部品Array:[部品1,部品2,部品3,部品4,部品5] } Data-Bind Ajax通信 (JSON)
  18. 18. jQueryとの連携  Ajax通信はKnockout範囲外でDeferred/Promiseを活用。  DOMを直接指定して操作するScriptは使わない。  ViewModelはViewのことは知らない。一方的に呼び出されるだけ。  jQueryのプラグインはどう使う?  バインディングの自作。カスタムバインディングの中で呼び出す。  カスタムバインディング中では、定義されているDOMがわかる。  Viewを動かすのはすべてKnockoutの範囲内にする?  ビジネスロジックに一切からまない見た目だけの処理は document.readyでベタに書くのもありかと。  マウスオーバーで表示領域を拡大するとか。
  19. 19. 手応え  メリット  ViewModel/ModelをそのままJSONとして投げられるのは楽 クライアント側のhiddenでデータ持ちまわす泥臭さがなくなった。 画面非表示になった削除対象キーも裏で保持しておける。  クライアント側で状態を持つため、複数Windowを開かれた場合の対応が 楽  データと表示フォーマットの分離 Viewの責務をサーバー側から追い出すことができた。 和暦入出力の変換処理がサーバー側で不要になった。 Model/ViewModelはDate⇔CustomBindingで和暦に変換⇔HTMLは和暦  悩みどころ  表示完了までのワンテンポのずれ HTMLがロードされた後、ko.bidingContext時にDOMが動く。 FOUCっぽい現象。現在調整中。
  20. 20. ありがとうございました

×