Knockout_エンジニア勉強会20131120

2,469 views

Published on

11月20日開催のエスキュービズム新卒エンジニア勉強会資料です。

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,469
On SlideShare
0
From Embeds
0
Number of Embeds
1,093
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Knockout_エンジニア勉強会20131120

  1. 1. 2013.11.20
  2. 2. Agenda ○ what is ? ○ MVVM ○ observables ○ demonstration ○ techniques ○ upgrade notes ○ others
  3. 3.      (from wikipedia) http://ja.wikipedia.org/wiki/KnockoutJS
  4. 4. どこで使うの? もしも、EC-Orangeに乗せるなら・・?
  5. 5. どこに書く? user template logic 来訪者 front LC_Page.. ~~~~~~ ~~~~~~ ~~~~~~ ~~~~~~ ~~~~~~ ~~~~~~ ココに書く 管理者 admin LC_Page.. ~~~~~~ ~~~~~~ ~~~~~~ ~~~~~~ ~~~~~~ ~~~~~~ data DB
  6. 6. どこで動く? client side 来訪者 ココで動く 管理者 server side
  7. 7.      とは?  ○ リッチでレスポンシブなUIを提供 ○ クライアントサイドの JSフレームワーク ○ MVVMで実現 ○ 他のライブラリに依存関係を持たない
  8. 8. コンセプト ○ Declarative binding ○ Automatic UI reflesh ○ Elegant dependency tracking
  9. 9. jQueryと衝突しないのか? ⇒ しません  扱うレベルが違います。 jQuery = ローレベルなコントロール
  10. 10. jQuery ~~~~~js~~~~~ var count = 3; for(i=1; i<=count; i++){ $(“#string” + i).text(“test” + i); } ~~~~~html~~~~~ <div class=”xxx”> <div id=”string1”></div> <div id=”string2”></div> <div id=”string3”></div> </div> 複雑化 このへんが するとツライ。 DOM操作 タ設置 初期化 セレク ト登録 ベン イ
  11. 11. ~~~~~js~~~~~ ko.applyBindings(new function(){ var self = this; self.strings = ko.observableArray([ {item: ‘test1’}, {item: ‘test2’}, {item: ‘test3’}, ]); }); Automatic UI refresh Declarative binding ~~~~~html~~~~~ <div data-bind=”foreach: strings” class=”xxx”> <div data-bind=”text: item”><div> </div> シンプルで柔軟。 しかも早い。
  12. 12. インストール <script type='text/javascript' src='knockout-3.0.0.js'></script> これだけ。
  13. 13. 対応ブラウザ http://knockoutjs.com/documentation/browser-support.html
  14. 14. Agenda ○ what is ? ○ MVVM ○ observables ○ demonstration ○ techniques ○ upgrade notes ○ others
  15. 15. MVVMって難しそう? ⇒ 難しくありません。(たぶん) むしろ逆です。(たぶん)
  16. 16. MVVM ○ Model ビジネスロジック、永続的データ保持 ○ View テンプレート、UI I/O ○ View-Model データバインディング、モデルとのコミュニケーション
  17. 17. MVVM よくわからない。
  18. 18. MVVM View ViewModel Model http://www.slideshare.net/emadb/an-introduction-to-knockoutjs-21281153
  19. 19. MVVM          では?
  20. 20. http://adampurkiss.com/knockout-remoting/ w/ Automatic UI refresh w/ Dependency tracking w/ Ajax
  21. 21. Agenda ○ what is ? ○ MVVM ○ observables ○ demonstration ○ techniques ○ upgrade notes ○ others
  22. 22. observables observable = 「観察可能」 knockout.jsでは 観察可能なオブジェクトを取り扱う GoFでは、「observerパターン」
  23. 23. observables ○ コア技術 1. data binding - View Modelの定義 2. observable - automatic UI Refresh 3. computed observables - dependency tracking
  24. 24. observables 1. data binding ~~~~~js~~~~~ // View Modelの作成 var viewModel = { name: ko.observable(‘my name’); } // data binding ko.applyBindings(viewModel); ~~~~~html~~~~~ // View <div data-bind=”text: name”></div> View Modelを Viewに バインディング!
  25. 25. observables 2. observables ~~~~~js~~~~~ // View Modelの作成 var viewModel = { name: ko.observable(‘my name’); } // data binding ko.applyBindings(viewModel); ~~~~~html~~~~~ // View <div data-bind=”text: name”></div> nameの変化を 自動的に Viewへ通知!
  26. 26. observables 3. computed observables ~~~~~js~~~~~ // View Modelの作成 var viewModel = { name1: ko.observable(‘my name’); name2: ko.observable(‘my name’); name1, name2 どちらか変更されれば、 fullNameも更新される! fullName: ko.computed(function(){ return this.name1() + ‘:’ + this.name2(); }, this); } // data binding ko.applyBindings(viewModel); dependency tracking
  27. 27. Agenda ○ what is ? ○ MVVM ○ observables ○ demonstration ○ techniques ○ upgrade notes ○ others
  28. 28. demonstration http://knockoutjs.com/examples/ ○ Hello World ○ Cart editor
  29. 29. Agenda ○ what is ? ○ MVVM ○ observables ○ demonstration ○ techniques ○ upgrade notes ○ others
  30. 30. observables ○ ko.observable ko.observable(‘test name’); ○ ko.observableArray ko.observableArray([ { item: 1}, { item: 2}, { item: 3}, { item: 4} ]);
  31. 31. ViewModel (1/2) ○ Object Literal var viewModel = { name1: ko.observable(‘my name1’); name2: ko.observable(‘my name2’); } viewModel.fullName = ko.computed(function(){ return this.name1() + ‘:’ + this.name2(); }, viewModel); ko.applyBindings(viewModel);
  32. 32. ViewModel (2/2) ○ function function fnViewModel(){ var self = this; self.name1 = ko.observable(‘my name1’); self.name2 = ko.observable(‘my name2’); self.fullname = ko.computed(function(){ return self.name1() + ‘:’ + self.name2(); }); } ko.applyBindings(new fnViewModel());
  33. 33. Fluent Interface var viewModel = { name1: ko.observable(); name2: ko.observable(); } viewModel.name1(‘my name1’).name2(‘my name2’); viewModel
  34. 34. Activating var viewModel = { name1: ko.observable(); name2: ko.observable(); } // 全ての要素にActivate ko.applyBindings(viewModel); // 指定した要素にActivate ko.applyBindings(viewModel, $(“#activeId”));
  35. 35. Built-in Bindings (text) ○ text <div data-bind=”text: content”></div> ○ html <div data-bind=”html: content”></div>
  36. 36. Built-in Bindings (appearance) ○ visible <div data-bind=”visible: hasContents”></div> ○ css <div data-bind=”css: { class: hasContents }”></div> ○ style <div data-bind=”style: { color: contentColor }”></div> ○ attr <div data-bind=”attr: { src: contentImageUrl }”></div>
  37. 37. Built-in Bindings (event) ○ click <a href=”#” data-bind=”click: clickAction”>link</div> ○ event <div data-bind=”event: { mouseover: eventAction }”></div> ○ submit <div data-bind=”submit: submitAction”></div>
  38. 38. Built-in Bindings (Control) ○ foreach <ul data-bind=”foreach: arrayList”> <div data-bind=”text: name”></div> </ul> ○ if <div data-bind=”if: isError”>Error!!</div> ○ with <div data-bind=”with: parentContents”> <div data-bind=”text: name”> </div> ko.applyBindings({ parentName: ‘xxxx’, parentContents: { name: ‘test name’, hobby: ‘footsal’ } });
  39. 39. Built-in Bindings (Forms) ○ value <input type=”text” data-bind=”value: name” /> ○ checked <input type=”radio” data-bind=”checked: isChecked” /> ○ options <select data-bind=”options: categories”></select> ...and more
  40. 40. Custom bindings ○ バインディングを自由に拡張   <div data-bind=”myBinding: name”></div>
  41. 41. Custom bindings ○ custom bindingsを定義 ko.bindingHandlers.myBinding = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 初期化、イベントハンドラの登録など }, 指定の View Model update: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 値が変化した時に行う処理 } }; DOM要素 バインディングさ れたアクセッサ 全てのバインディング定 義のアクセッサ
  42. 42. Loading and Saving data ココ
  43. 43. Loading and Saving data サーバサイドとの依存性はない http://api.jquery.com/category/ajax/
  44. 44. Loading and Saving data var viewModel = { firstName : ko.observable("Bert"), lastName : ko.observable("Smith"), pets : ko.observableArray(["Cat", "Dog", "Fish"]), type : "Customer" }; var jsonData = ko.toJSON(viewModel); $.post("/some/url", jsonData, function(returnedData) { // something to do ~~~~ })
  45. 45. Loading and Saving data $.getJSON("/some/url", function(data) { var parsed = JSON.parse(data); // Update view model properties viewModel.firstName(parsed.firstName); viewModel.lastName(parsed.lastName); }) 複雑なView Modelになると 手入力がめんどくさい
  46. 46. Mapping plugin View Model更新時の処理を隠蔽 オブジェクトを突っ込んでマッピングすれば楽 // Update view model properties viewModel.firstName(parsed.firstName); viewModel.lastName(parsed.lastName); …………….. これが var viewModel = ko.mapping.fromJS(data); ko.mapping.fromJS(data, viewModel); こうなる
  47. 47. Agenda ○ what is ? ○ MVVM ○ observables ○ demonstration ○ techniques ○ upgrade notes ○ others
  48. 48. upgrade notes 2010-07-10: v1.0.0 2011-12-21: v2.0.0 2013-07-09: v2.3.0 2013-10-25: v3.0.0 (latest!!) https://github.com/knockout/knockout
  49. 49. v3.0.0 upgrade notes ○ ko.computed()のパフォーマンス最適化  【before】 依存のある値に変更通知が飛んだ時 計算結果が全く同じ場合でも処理が走っていた  【after】 入力された値が同じ場合は、再計算しない fullName: ko.computed(function(){ return this.name1() + ‘:’ + this.name2(); }, this);
  50. 50. v3.0.0 upgrade notes ○ ko.computed()のパフォーマンス最適化  明示的に毎回更新処理を走らせたい場合は.... obj.extend({ notify: ‘always’});  でOK!
  51. 51. v3.0.0 upgrade notes ○ 更新の独立性 <input type=”checkbox” data-bind=”visible: showTerms, checked: acceptsTerms ”/> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ showTerms の変更 ⇒ checkedの更新 + visibleもreturnされる・・
  52. 52. v3.0.0 upgrade notes ○ 更新の独立性 たまに 予期せぬバグ を生むそうです。
  53. 53. v3.0.0 upgrade notes ○ 更新の独立性   ので、 独立した更新 を行うようにしたそうです。 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <input type=”checkbox” data-bind=”visible: showTerms, checked: acceptsTerms “/>
  54. 54. v3.0.0 upgrade notes ○ optionCaptionでの HTML-encodesの有効化     セレクタのキャプションで  HTMLエンコード使えるように  したそうです。 “ &quot; & &amp; < &lt; > &gt;
  55. 55. Agenda ○ what is ? ○ MVVM ○ observables ○ demonstration ○ techniques ○ upgrade notes ○ others
  56. 56. angular.js          に近い用途 ~~~~~~~ knockout.js~~~~~~~ <div data-bind=”text: name”></div> ~~~~~~~ angular.js~~~~~~~ {{name}}
  57. 57. http://www.slideshare.net/MaslowB/knockout-vs-angular
  58. 58. http://www.slideshare.net/MaslowB/knockout-vs-angular
  59. 59. angular.js ○ performance comparison http://jsperf.com/angularjs-vs-knockoutjs
  60. 60. Knockback.js Both Knockout.js and Backbone.js have their strengths and weaknesses, but together they are amazing! With Knockback.js, you can use the strong ORM provided by Backbone and create dynamic views using Knockout bindings. http://kmalakoff.github.io/knockback/
  61. 61. Agenda ○ what is ? ○ MVVM ○ observables ○ demonstration ○ techniques ○ upgrade notes ○ others
  62. 62. まとめ ○         の説明しました
  63. 63. references ○ knockout http://knockoutjs.com ○ knockmeout http://www.knockmeout.net/2013/09/devlink-2013-kotips.html
  64. 64. ありがとうございました。

×