DevLOVE Kansai KnockoutJS

DevLOVE関西～ JavaScript フレームワークは Angular JS だけじゃない～

KnockoutJS入門

115年1月26日月曜日

KnockoutJS入門

COPYRIGHT 2015 PLUGRAM, INC.

自己紹介

@tan_go238

PLUGRAM, Inc.

仕事：PHP、JavaScript

趣味：JVM、Curry


KnockoutJS入門



KnockoutJS入門



KnockoutJS入門



KnockoutJS入門


話すこと

・KnockoutJS導入のきっかけ

・KnockoutJSの基本的な使い方

・KnockoutJSでできないこと

・MVVMとは何か


KnockoutJS入門


KnockoutJS導入のきっかけ

jQueryで作ったら確実に破綻する機能の実装を頼まれる（2013年、画面数：2）

当時主流だったJSフレームワークを調査

KnockoutJSに辿り着く


KnockoutJS入門




KnockoutJS入門


必要条件・現在のサービスに影響なく追加できること

・レガシーブラウザ対応

・入力フォームをPOSTでサーバへ送信(×JSON)

十分条件・メンテナンスしやすい(UIとロジックの分離)

・テストできること（書きやすい）



KnockoutJS入門



当時主流だったJSフレームワークを調査

機能が多すぎるRouterいらん


KnockoutJS入門



KnockoutJSに辿り着く

テスト書ける

導入簡単 UIとロジックを分離できる

レガシーブラウザ対応


KnockoutJS入門


必要条件・現在のサービスに影響なく追加できること

・レガシーブラウザ対応 (IE 6+, Firefox 3.5+)

・入力フォームをPOSTでサーバへ送信(×JSON)

十分条件・メンテナンスしやすい(UIとロジックの分離)

・テストできること（書きやすい）



KnockoutJS入門


KnockoutJSとは

・宣言的データバインディング

・UI自動更新

・依存性追跡

・テンプレート

・コンポーネント (3.2から)


KnockoutJS入門


KnockoutJSの使い方

・data-bind (HTML：value, text, click など)

・observable

・observableArray

・pureComputed (computed)

これだけ覚えれば基本はOK


KnockoutJS入門


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)


KnockoutJS入門


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>


KnockoutJS入門


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”


KnockoutJS入門


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'); }

});


KnockoutJS入門


KnockoutJSでできないこと (機能比較)

アーキテクチャ

ルーティング

バインディング

共通コンポーネント

HTTP

DI

テスティング

MVVM (ViewModel) MVW (Controller)

なし (外部ライブラリを利用) angular-route

data-bind=* ng-*, {{}}

Components Directive

なし (外部ライブラリを利用) $http

なし $inject

なし (外部ライブラリを利用) Karma, angular-mocks


KnockoutJS入門


・簡単に覚えられる

・導入が楽

・古いブラウザでも安心

・共通化できる

メリット

・機能が少ない

・制約が少ない

・無い機能は作る/他ライブラリを

　利用しないといけない

デメリット

今までのJS開発を崩さず楽したい人に非常にオススメ

これまでのまとめ


KnockoutJS入門


これまでのまとめ

・簡単に覚えられる

・導入が楽


・共通化できる

メリット

・機能が少ない

・制約が少ない

・無い機能は作る/他ライブラリを

　利用しないといけない

デメリット

大規模になってくるとデータフローがごちゃごちゃになる→ MVVMやアーキテクチャの知識が必要


KnockoutJS入門


MVVMとはなにか

http://ugaya40.hateblo.jp/entry/model-mistake

MVVMのModelにまつわる誤解

ViewModelに公開するModelのインタフェース

・Modelのステートの公開とその変更通知

・Modelの操作のための戻り値のないメソッド

ViewModelとは・ViewModelはModelの影

・ViewはViewModelの影でもある




KnockoutJS入門


MVVMとはなにか

V1 VM1 M1

M2V2 VM2

Mn更新

変更通知自動更新


show notification

pop-up


KnockoutJS入門


MVVMとはなにか

V1 VM1 M1

M2V2 VM2

Mn更新


状態更新通知

focus-in

hide notification


KnockoutJS入門


Flux

http://facebook.github.io/flux/docs/overview.html

simple object・new data

・type property

・state・logic

emit change_event




KnockoutJS入門


Flux





KnockoutJS入門


MVVMとFluxの違い

MVVM Fluxなし(明確に定義されてない) Action

Model Dispatcher

Model Store

ViewModel View

View なし (JSXで記述)

・Fluxは単方向のデータフローしか生じない

・FluxはMVVMのModelをより明確に定義している


KnockoutJS入門


最後に

・KnockoutJSは簡単に習得可能

・既存プロジェクトへの導入も容易


・大規模(人数・View数・コード量)になるとデータフローの交通整理が必要

・新規＆大規模プロジェクトにはあまりオススメしない

KnockoutJS検討の際のポイント


ありがとうございました！


Technology

DevLOVE Kansai KnockoutJS