devlove kansai knockoutjs
TRANSCRIPT
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
自己紹介
@tan_go238
PLUGRAM, Inc.
仕事:PHP、JavaScript
趣味:JVM、Curry
215年1月26日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
話すこと
・KnockoutJS導入のきっかけ
・KnockoutJSの基本的な使い方
・KnockoutJSでできないこと
・MVVMとは何か
615年1月26日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
KnockoutJS導入のきっかけ
jQueryで作ったら確実に破綻する機能の実装を頼まれる(2013年、画面数:2)
当時主流だったJSフレームワークを調査
KnockoutJSに辿り着く
715年1月26日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
必要条件・現在のサービスに影響なく追加できること
・レガシーブラウザ対応
・入力フォームをPOSTでサーバへ送信(×JSON)
十分条件・メンテナンスしやすい(UIとロジックの分離)
・テストできること(書きやすい)
KnockoutJS導入のきっかけ
915年1月26日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
KnockoutJS導入のきっかけ
当時主流だったJSフレームワークを調査
機能が多すぎるRouterいらん
1015年1月26日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
KnockoutJS導入のきっかけ
KnockoutJSに辿り着く
テスト書ける
導入簡単 UIとロジックを分離できる
レガシーブラウザ対応
1115年1月26日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
必要条件・現在のサービスに影響なく追加できること
・レガシーブラウザ対応 (IE 6+, Firefox 3.5+)
・入力フォームをPOSTでサーバへ送信(×JSON)
十分条件・メンテナンスしやすい(UIとロジックの分離)
・テストできること(書きやすい)
KnockoutJS導入のきっかけ
1215年1月26日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
KnockoutJSとは
・宣言的データバインディング
・UI自動更新
・依存性追跡
・テンプレート
・コンポーネント (3.2から)
1315年1月26日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
KnockoutJSの使い方
・data-bind (HTML:value, text, click など)
・observable
・observableArray
・pureComputed (computed)
これだけ覚えれば基本はOK
1415年1月26日月曜日
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日月曜日
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日月曜日
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日月曜日
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日月曜日
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日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
・簡単に覚えられる
・導入が楽
・古いブラウザでも安心
・共通化できる
メリット
・機能が少ない
・制約が少ない
・無い機能は作る/他ライブラリを
利用しないといけない
デメリット
今までのJS開発を崩さず楽したい人に非常にオススメ
これまでのまとめ
2015年1月26日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
これまでのまとめ
・簡単に覚えられる
・導入が楽
・古いブラウザでも安心
・共通化できる
メリット
・機能が少ない
・制約が少ない
・無い機能は作る/他ライブラリを
利用しないといけない
デメリット
大規模になってくるとデータフローがごちゃごちゃになる→ MVVMやアーキテクチャの知識が必要
2115年1月26日月曜日
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日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
MVVMとはなにか
V1 VM1 M1
M2V2 VM2
Mn更新
変更通知自動更新
変更通知自動更新
show notification
pop-up
2315年1月26日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
MVVMとはなにか
V1 VM1 M1
M2V2 VM2
Mn更新
変更通知自動更新
状態更新通知
focus-in
hide notification
2415年1月26日月曜日
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日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
Flux
http://facebook.github.io/flux/docs/overview.html
2615年1月26日月曜日
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日月曜日
KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
最後に
・KnockoutJSは簡単に習得可能
・既存プロジェクトへの導入も容易
・古いブラウザでも安心
・大規模(人数・View数・コード量)になるとデータフローの交通整理が必要
・新規&大規模プロジェクトにはあまりオススメしない
KnockoutJS検討の際のポイント
2815年1月26日月曜日