DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья

1,676 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,676
On SlideShare
0
From Embeds
0
Number of Embeds
1,159
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья

  1. 1. Пользователь2ГИС ОнлайнAPI СправочникаАРХИТЕКТУРА WEB-APPWWW.2GIS.RU
  2. 2. АРХИТЕКТУРА CLIENT-SIDE APPПользователь2ГИС ОнлайнAPIТранспортаAPIпробокAPI<Место длявашего сервиса>APIСправочникAPIКарт +1WWW.2GIS.RU
  3. 3. DOM НА КЛИЕНТЕWWW.2GIS.RU
  4. 4. DOM НА КЛИЕНТЕvar newDiv = document.createElement(div);newDiv.className = my-class;newDiv.id = my-id;newDiv.innerHTML = Привет, мир!;$(#container).appendChild(newDiv);Привет, мир!WWW.2GIS.RU
  5. 5. WHERE IS
  6. 6. ШАБЛОНИЗАТОРЫjQueryTemplateMustacheUnderscore.jsШаблонизатор резигаPureWWW.2GIS.RUWWW.2GIS.RU
  7. 7. СОБЫТИЯ.firmShort.firmFull#firmListWWW.2GIS.RUWWW.2GIS.RU
  8. 8. СОБЫТИЯ$("#firmTemplate").tmpl(someData).appendTo("#firmList");$(.firmShort).live({click: function() {showFirmCard(this);}});$(.firmFull).live({click: function() {hideFirmCard(this);}});WWW.2GIS.RUWWW.2GIS.RU
  9. 9. СОБЫТИЯ
  10. 10. ПОЧЕМУ KNOCKOUT?Активно развиваетсяWWW.2GIS.RUWWW.2GIS.RU
  11. 11. ● Активно развиваетсяПОЧЕМУ KNOCKOUT?Удобное разделениелогики и шаблоновWWW.2GIS.RUWWW.2GIS.RU
  12. 12. ● Активно развивается● Удобное разделение логики и шаблоновПОЧЕМУ KNOCKOUT?Функционален, естьдекларативные биндингиWWW.2GIS.RUWWW.2GIS.RU
  13. 13. ● Активно развивается● Удобное разделение логики и шаблонов● Функционален, есть декларативныебиндингиПОЧЕМУ KNOCKOUT?Низкий порог вхожденияWWW.2GIS.RUWWW.2GIS.RU
  14. 14. MVVMView ModelViewModelUI Logic Business LogicApplication LogicWWW.2GIS.RUWWW.2GIS.RU
  15. 15. KNOCKOUTWWW.2GIS.RUWWW.2GIS.RU
  16. 16. <div class="dg-search-result-header"><span data-bind="text: what_text"></span>,<span data-bind="text: where_text"></span></div>KNOCKOUTWWW.2GIS.RUWWW.2GIS.RU
  17. 17. function vm() {this.what_text = ko.observable();}ko.applyBindings(new vm());...vm.what_text(response.what);<span data-bind="text: what_text"></span>KO.OBSERVABLEWWW.2GIS.RUWWW.2GIS.RU
  18. 18. МАССИВЫWWW.2GIS.RUWWW.2GIS.RU
  19. 19. response.result = [{firmName = Театр №1,...},{firmName = Театр №2;...}]МАССИВЫWWW.2GIS.RUWWW.2GIS.RU
  20. 20. function vm () {this.firms = ko.observableArray([]);}...vm.firms(response.result);<div data-bind="foreach: firms"><div data-bind="text: firmName"></div></div>KO.OBSERVABLE_ARRAYWWW.2GIS.RUWWW.2GIS.RU
  21. 21. BINDINGS
  22. 22. <div class="dg-search-result-header"><span data-bind="text: what_text"></span>,<span data-bind="text: where_text"></span></div>BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  23. 23. BINDINGS— Текст и стиль блока— Control flow— Работа с формами— Шаблонизация— <место для ваших идей>WWW.2GIS.RUWWW.2GIS.RU
  24. 24. .firmShort.firmFull#firmListWWW.2GIS.RUWWW.2GIS.RUBINDINGS
  25. 25. <div id="firmList"data-bind="foreach: firms"><div class="firmShort"data-bind="visible: !isVisible"></div><div class="firmFull"data-bind="visible: isVisible"></div></div>BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  26. 26. data-bind="visible: isVisible,click: toggleVisibility"BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  27. 27. data-bind="visible: isVisible,click: toggleVisibility"toggleVisibility = function() {this.isVisible(!this.isVisible());}BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  28. 28. ko.bindingHandlers[visible] = {update: function (element, valueAccessor) {var value = ko.utils.unwrapObservable(valueAccessor());var isCurrentlyVisible = !(element.style.display== "none");if (value && !isCurrentlyVisible)element.style.display = "";else if ((!value) && isCurrentlyVisible)element.style.display = "none";}};BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  29. 29. ko.bindingHandlers[animateVisible] = {update: function (element, valueAccessor) {var value = ko.utils.unwrapObservable(valueAccessor());var isCurrentlyVisible = !(element.style.display== "none");var slideSpeed = 200;if (value && !isCurrentlyVisible)$(element).slideDown(slideSpeed,callback);else if ((!value) && isCurrentlyVisible)$(element).slideUp(slideSpeed,callback);}};BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  30. 30. data-bind="animateVisible: isVisible,click: toggleVisibility"toggleVisibility = function() {this.isVisible(!this.isVisible());}BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  31. 31. <script type="text/my-tpl" id="firm-tpl">//firm template code</script>BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  32. 32. <script type="text/my-tpl" id="catalog-tpl">//some template code<div data-bind="template: {name: firm-tpl,foreach: firms}"></div></script>BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  33. 33. BINDINGS
  34. 34. BINDING-CONTEXTvmvm.firms[n]WWW.2GIS.RUWWW.2GIS.RU
  35. 35. ПЕЧАТЬWWW.2GIS.RUWWW.2GIS.RU
  36. 36. <script type="text/my-tpl" id="print-tpl">//some template code<div data-bind="template: {name: firm-tpl,foreach: firms,templateOptions: {isPrint: 1}}"></div></script>ПЕЧАТЬWWW.2GIS.RUWWW.2GIS.RU
  37. 37. BINDINGS<div class="phone-number"data-bind="visible: $context.isPrint)"><!-- Some code--></div>WWW.2GIS.RUWWW.2GIS.RU
  38. 38. BINDINGS<div class="contacts"data-bind="template: {name: firm-tpl,data: $data,templateOptions: {isPrint: $context.isPrint}}"><!-- Some code--></div>WWW.2GIS.RUWWW.2GIS.RU
  39. 39. $context$datatemplateOptionsBINDING CONTEXTWWW.2GIS.RUWWW.2GIS.RU
  40. 40. BINDING CONTEXT● $parent● $parentContext● $root● $index● $elementWWW.2GIS.RUWWW.2GIS.RU$context$datatemplateOptions
  41. 41. function initBalloon (options) {map.createBalloon({point: options.point;content: options.template});}BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  42. 42. function initBalloon (options) {map.createBalloon({point: options.point;content: options.template});var container = $(#balloonContent);ko.applyBindingsToNode(container , vm);}BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  43. 43. КОГДА МНОГО "ЕСЛИ"WWW.2GIS.RUWWW.2GIS.RU
  44. 44. this.showPreloader = ko.computed(function(){return this.firmsLoad() && this.geoLoad();});<span id="preloader"data-bind="visible: showPreloader"></span>КОГДА МНОГО "ЕСЛИ"WWW.2GIS.RUWWW.2GIS.RU
  45. 45. Не наблюдайте один computedвнутри другогоKO.COMPUTEDWWW.2GIS.RUWWW.2GIS.RU
  46. 46. WWW.2GIS.RU
  47. 47. 1. Не наблюдайте один computed внутри другогоKO.COMPUTEDНе меняйте observable внутриcomputedWWW.2GIS.RUWWW.2GIS.RUWWW.2GIS.RU
  48. 48. 1. Не наблюдайте один computed внутри другого2. Не меняйте observable внутри computedKO.COMPUTEDИспользуйте computed только там,где это необходимоWWW.2GIS.RUWWW.2GIS.RU
  49. 49. PLUGINS
  50. 50. PLUGINSknockout.addressWWW.2GIS.RUWWW.2GIS.RU
  51. 51. PLUGINSwindow.location vm.myObservableko.linkObservableToUrl(vm.history, history);WWW.2GIS.RUWWW.2GIS.RUknockout.address
  52. 52. PLUGINSWWW.2GIS.RUWWW.2GIS.RU$(#firmFull).dataBind({animateVisible: isVisible,click: toggleVisibility});
  53. 53. https://gist.github.com/joelnet/1006808PLUGINSWWW.2GIS.RUWWW.2GIS.RUUnobtrusive Knockoutsupport library for jQueryJoel Thoms
  54. 54. https://github.com/SteveSanderson/knockout/wiki/PluginsPLUGINSWWW.2GIS.RUWWW.2GIS.RU
  55. 55. БОЛЬШИЕ ПРОЕКТЫ107 22 18Observable Computed ObservableArrayWWW.2GIS.RUWWW.2GIS.RU
  56. 56. FunctionsБОЛЬШИЕ ПРОЕКТЫ200+ 107 22 18WWW.2GIS.RUWWW.2GIS.RU
  57. 57. БОЛЬШИЕ ПРОЕКТЫ18WWW.2GIS.RUWWW.2GIS.RU107200+13 22
  58. 58. Namespace.ViewModelModules.<ourModule> = {_observables: {<ourObservable>: <defaultData>,<ourComputed>: function(){/*computedCode*/}},<someProperty>: 100500,_initModule: function(){/*initCode*/},<function>: function(){/*fBody*/}}БОЛЬШИЕ ПРОЕКТЫWWW.2GIS.RUWWW.2GIS.RU
  59. 59. Namespace.ViewModelModules.<ourModule> = {_observables: {<ourObservable>: <defaultData>,<ourComputed>: function(){/*computedCode*/}},<someProperty>: 100500,_initModule: function(){/*initCode*/},<function>: function(){/*fBody*/}}WWW.2GIS.RUБОЛЬШИЕ ПРОЕКТЫ150WWW.2GIS.RUWWW.2GIS.RU
  60. 60. https://github.com/2gis/dgKoModulizerdgKoModulizerWWW.2GIS.RUWWW.2GIS.RU
  61. 61. IDEdata-bind="//очень много//кода//который выглядит//как одна сплошная строка"WWW.2GIS.RUWWW.2GIS.RU
  62. 62. IDEWWW.2GIS.RUWWW.2GIS.RU
  63. 63. IDEWWW.2GIS.RUWWW.2GIS.RU
  64. 64. ПРОИЗВОДИТЕЛЬНОСТЬWWW.2GIS.RUWWW.2GIS.RUDOM.Build()
  65. 65. АНАЛОГИ— AngularJS— Backbone.js— Ember.js— ExtJS— CorMVC— AsanaLuna— ...WWW.2GIS.RUWWW.2GIS.RU
  66. 66. Илья Таратухин@darklifa

×