More Related Content
Similar to DevLOVE Kansai KnockoutJS
Similar to DevLOVE Kansai KnockoutJS (20)
DevLOVE Kansai KnockoutJS
- 9. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
必要条件
・現在のサービスに影響なく追加できること
・レガシーブラウザ対応
・入力フォームをPOSTでサーバへ送信( JSON)
十分条件
・メンテナンスしやすい(UIとロジックの分離)
・テストできること（書きやすい）
KnockoutJS導入のきっかけ
915年1月26日月曜日
- 12. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
必要条件
・現在のサービスに影響なく追加できること
・レガシーブラウザ対応 (IE 6+, Firefox 3.5+)
・入力フォームをPOSTでサーバへ送信( JSON)
十分条件
・メンテナンスしやすい(UIとロジックの分離)
・テストできること（書きやすい）
KnockoutJS導入のきっかけ
1215年1月26日月曜日
- 14. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
KnockoutJSの使い方
・data-bind (HTML：value, text, click など)
・observable
・observableArray
・pureComputed (computed)
これだけ覚えれば基本はOK
1415年1月26日月曜日
- 15. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
KnockoutJSの使い方 (observable)
<input type="text" data-bind="value: value1"/> +
<input type="text" data-bind="value: value2"/>
= <span data-bind="text: result"></span>
<script src="js/knockout-latest.js"></script>
<script src="js/page/index.js"></script>
<script>
$(function(){
ko.applyBindings(new ViewModel());
});
</script>
function ViewModel(){
var self = this;
self.value1 = ko.observable(1);
self.value2 = ko.observable(2);
self.result = ko.pureComputed(function(){
return parseInt(self.value1()) +
parseInt(self.value2());
});
}
変更があったら通知
初期値
変更通知を受け取って実行
value1(observable) value2(observable)
result
(pureComputed)
1515年1月26日月曜日
- 16. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
KnockoutJSの使い方 (observableArray)
<div class="col-lg-12">
<h3>Task List</h3>
</div>
<div class="col-lg-12">
<ul class="list-group" data-bind="foreach: tasks"> // foreachバインディング
<li class="list-group-item">
<span data-bind="text: title"></span>
<a href="#" data-bind="click: $parent.deleteTask">delete</a>
</li>
</ul>
</div>
1615年1月26日月曜日
- 17. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
function Task(title) {
var self = this;
self.title = title;
}
function ViewModel() {
var self = this;
self.tasks = ko.observableArray([]);
self.title = ko.observable("");
self.addTask = function () {
var task = new Task(self.title());
self.tasks.push(task);
self.title("");
};
self.deleteTask = function(task) {
self.tasks.remove(task);
};
}
data-bind= click: addTask
data-bind= click: deleteTask
1715年1月26日月曜日
- 18. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
KnockoutJSの使い方 (共通コンポーネント)
<div class="col-lg-12">
<name-editor></name-editor>
</div>
ko.components.register('name-editor', {
template: "<p>Enter your name: <input data-bind='value: name'/></p>
<p>You entered <strong data-bind='text: name().toUpperCase()'>
</strong></p>",
viewModel: function() {
this.name = ko.observable('something');
}
});
1815年1月26日月曜日
- 19. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
KnockoutJSでできないこと (機能比較)
アーキテクチャ
ルーティング
バインディング
共通コンポーネント
HTTP
DI
テスティング
MVVM (ViewModel) MVW (Controller)
なし (外部ライブラリを利用) angular-route
data-bind=* ng-*, {{}}
Components Directive
なし (外部ライブラリを利用) $http
なし $inject
なし (外部ライブラリを利用) Karma, angular-mocks
1915年1月26日月曜日
- 20. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
・簡単に覚えられる
・導入が楽
・古いブラウザでも安心
・共通化できる
メリット
・機能が少ない
・制約が少ない
・無い機能は作る/他ライブラリを
利用しないといけない
デメリット
今までのJS開発を崩さず楽したい人に非常にオススメ
これまでのまとめ
2015年1月26日月曜日
- 21. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
これまでのまとめ
・簡単に覚えられる
・導入が楽
・古いブラウザでも安心
・共通化できる
メリット
・機能が少ない
・制約が少ない
・無い機能は作る/他ライブラリを
利用しないといけない
デメリット
大規模になってくるとデータフローがごちゃごちゃになる
→ MVVMやアーキテクチャの知識が必要
2115年1月26日月曜日
- 22. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
MVVMとはなにか
http://ugaya40.hateblo.jp/entry/model-mistake
MVVMのModelにまつわる誤解
ViewModelに公開するModelのインタフェース
・Modelのステートの公開とその変更通知
・Modelの操作のための戻り値のないメソッド
ViewModelとは
・ViewModelはModelの影
・ViewはViewModelの影でもある
2215年1月26日月曜日
- 25. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
Flux
http://facebook.github.io/flux/docs/overview.html
simple object
・new data
・type property
・state
・logic
emit change_event
2515年1月26日月曜日
- 27. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
MVVMとFluxの違い
MVVM Flux
なし(明確に定義されてない) Action
Model Dispatcher
Model Store
ViewModel View
View なし (JSXで記述)
・Fluxは単方向のデータフローしか生じない
・FluxはMVVMのModelをより明確に定義している
2715年1月26日月曜日
- 28. KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
最後に
・KnockoutJSは簡単に習得可能
・既存プロジェクトへの導入も容易
・古いブラウザでも安心
・大規模(人数・View数・コード量)になるとデータフローの交通整理が必要
・新規＆大規模プロジェクトにはあまりオススメしない
KnockoutJS検討の際のポイント
2815年1月26日月曜日
