Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DevLOVE Kansai KnockoutJS

2,237 views

Published on

KnockoutJS

Published in: Technology
  • Login to see the comments

DevLOVE Kansai KnockoutJS

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

×