Js fuckworks

567 views

Published on

  • Be the first to comment

Js fuckworks

  1. 1. Субъективный взгляд на несколько JS фреймворков k.likhter@2gis.ru
  2. 2. dont call us — well call you — JavaScript
  3. 3. Google Closure Library
  4. 4. Все видели продукты, сделанные на нём
  5. 5. Все видели продукты, сделанные на нём Google [A-Za-z]+
  6. 6. Это не фреймворк
  7. 7. Это не фреймворк а набор инструментов
  8. 8. Очень низкоуровнево
  9. 9. Очень низкоуровнево это и плюс, и минус
  10. 10. Избыточное именованиеИсправляется собственными наработками
  11. 11. tutorial.notepad.Note.prototype.makeNoteDom = function() { // Create DOM structure to represent the note. this.headerElement = goog.dom.createDom(div, {style: background-color:#EEE}, this.title); this.contentElement = goog.dom.createDom(div, null, this.content); var newNote = goog.dom.createDom(div, null, this.headerElement, this.contentElement); // Add the notes DOM structure to the document. goog.dom.appendChild(this.parent, newNote);};
  12. 12. // jquery$(#foo).click(function(){ $(this).parent().next(.d2).text(Hello);});// google closuregoog.dom.getElement(foo).onclick = function(){ var div = goog.dom.getAncestorByClass(this, d1); var nextDiv = goog.dom.getNextElementSibling(div); goog.dom.setTextContent(nextDiv, Hello);}
  13. 13. // google closurevar node = goog.dom.getElement(mytarget);node.style.backgroundColor = blue;node.style.backgroundColor = red;// pure javascriptvar node = document.getElementById(mytarget);node.style.backgroundColor = blue;node.style.backgroundColor = red;
  14. 14. // google closurevar node = goog.dom.getElement(mytarget);node.style.backgroundColor = blue;node.style.backgroundColor = red;// pure javascriptvar node = document.getElementById(mytarget);node.style.backgroundColor = blue;node.style.backgroundColor = red;... причем второй вариант работает быстрее (jsperf.com) на втором месте — pure javascript, на третьем — jQuery
  15. 15. Не всё так страшно!
  16. 16. Не всё так страшно!Множество всего реализовано: отладка,история, i18n, storage, testing, система модулей и прочее
  17. 17. Оптимизированный на скорость JS код
  18. 18. switch (node.tagName) { case goog.dom.TagName.APPLET: case goog.dom.TagName.AREA: case goog.dom.TagName.BR: case goog.dom.TagName.COL: case goog.dom.TagName.FRAME: case goog.dom.TagName.HR: case goog.dom.TagName.IMG: case goog.dom.TagName.INPUT: case goog.dom.TagName.IFRAME: case goog.dom.TagName.ISINDEX: case goog.dom.TagName.LINK: case goog.dom.TagName.NOFRAMES: case goog.dom.TagName.NOSCRIPT: case goog.dom.TagName.META: case goog.dom.TagName.OBJECT: case goog.dom.TagName.PARAM: case goog.dom.TagName.SCRIPT: case goog.dom.TagName.STYLE: return false;}return true; Google: "How not to write JavaScript"
  19. 19. Google Closure Compiler wins
  20. 20. Google Closure TemplatesКомпилируются как на серверной, так и на клиентской стороне!Google Closure Templates Compiler для ускорения работы.
  21. 21. summary Google Closure Library+ Google - муторно+ низкоуровнево - нет готовых+ тру разработка хранилищ списков+ своя классовая - нет модель адаптированной+ свои события архитектуры+ свой i18n+ шаблоны - свой продукт
  22. 22. ExtJS
  23. 23. Не все виделипродукты, но активно используется Microsoft, Intel, HP etc
  24. 24. Полноценный фреймворк
  25. 25. Своя система классов включая MVC подход
  26. 26. Своя система хранилищавтоматическое обновление view и так далее
  27. 27. Гигантский набор инструментов длясоздания связанных viewболее гибких, чем автоматическое обновления UI в knockout.js
  28. 28. Ext.create(Ext.data.Store, { storeId:simpsonsStore, fields:[name, email, phone], data:{items:[ { name: Lisa, "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { name: Bart, "email":"bart@simpsons.com", "phone":"555-222-1234" }, { name: Homer, "email":"home@simpsons.com", "phone":"555-222-1244" }, { name: Marge, "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: memory, reader: { type: json, root: items } }});Ext.create(Ext.grid.Panel, { title: Simpsons, store: Ext.data.StoreManager.lookup(simpsonsStore), columns: [ { text: Name, dataIndex: name }, { text: Email, dataIndex: email, flex: 1 }, { text: Phone, dataIndex: phone } ], height: 200, width: 400, renderTo: Ext.getBody()});
  29. 29. Ext.create(Ext.data.Store, { хранилище данных storeId:simpsonsStore, fields:[name, email, phone], data:{items:[ { name: Lisa, "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { name: Bart, "email":"bart@simpsons.com", "phone":"555-222-1234" }, { name: Homer, "email":"home@simpsons.com", "phone":"555-222-1244" }, { name: Marge, "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: memory, описание механизма сохранения данных reader: { (ленивая инициализация через JS объект) type: json, root: items } Может быть создана через } Ext.create(Ext.data.store.proxy.Memory, { ...}); }) Ext.create(Ext.data.store.proxy.Json, { ... })Ext.create(Ext.grid.Panel, { title: Simpsons, View, зависящая от хранилища данных store: Ext.data.StoreManager.lookup(simpsonsStore), columns: [ { text: Name, dataIndex: name }, { text: Email, dataIndex: email, flex: 1 }, { text: Phone, dataIndex: phone } ], height: 200, width: 400, renderTo: Ext.getBody()});
  30. 30. Свой шаблонизатор(по принципу шаблонизатора J.Resig)
  31. 31. Самая лучшая в мире документацияи расширение проекта по документации
  32. 32. Но!
  33. 33. Фреймворк не для этого!
  34. 34. А для созданияwindows-подобного GUI
  35. 35. А для созданияwindows-подобного GUI то есть придётся писать свои view на основе уже существующих
  36. 36. Платная для неOpenSource проектов Расшарим наш исходник? :)
  37. 37. summary ExtJS+ отличная логика, - не для того которой стоит - платная придерживаться - достаточно+ отличная сложная в документация освоении+ отличные - на сервеной части инструменты жизни нет
  38. 38. summary Ext.Core+ отличная логика, - достаточно которой стоит сложная в придерживаться освоении+ отличная - на серверной части документация жизни нет+ отличные - нет отличных инструменты инструментов, нужно писать самим
  39. 39. Backbone
  40. 40. Backboneназад кость?! о_О
  41. 41. Backboneспинной хребет, твёрдость характера, главная опора
  42. 42. Все видели продукты, сделанные на нём LinkedIn Mobile, Foursquare
  43. 43. Полноценный фреймворк(вероятно, сделано по подобию ExtJS)
  44. 44. Классовая организация смешанная, в том числе MVC
  45. 45. // mixinsvar object = {};_.extend(object, Backbone.Events);object.on("alert", function(msg) { alert("Triggered " + msg);});object.trigger("alert", "an event");// true extendingvar Sidebar = Backbone.Model.extend({ promptColor: function() { var cssColor = prompt("Please enter a CSS color:"); this.set({color: cssColor}); }});
  46. 46. // mixins Событийная модель!var object = {};_.extend(object, Backbone.Events);object.on("alert", function(msg) { alert("Triggered " + msg);});object.trigger("alert", "an event");// true extendingvar Sidebar = Backbone.Model.extend({ promptColor: function() { var cssColor = prompt("Please enter a CSS color:"); this.set({color: cssColor}); }});
  47. 47. Своя система хранилищ
  48. 48. var collection = new Backbone.Collection([ {name: "Tim", age: 5}, {name: "Ida", age: 26}, {name: "Rob", age: 55}]);// orvar collection = new Backbone.Collection({ model: Book, items: [...] storage: ... // e.g. localStorage plugin});alert(JSON.stringify(collection));
  49. 49. Автоматический CRUD
  50. 50. // Backbone.sync(method, model, opts);// e.g.Backbone.sync(read, Books);
  51. 51. Инструмент создания view
  52. 52. var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: { "click .icon": "open", "click .button.edit": "openEditDialog" }, render: function() { ... }});var doc = Documents.first();new DocumentRow({ model: doc, id: "document-row-" + doc.id});
  53. 53. Шаблоны - _.template Вероятно, можно подменить
  54. 54. Шаблоны - _.templateС бубном можно отрендерить на node.js
  55. 55. Плохая документацияНет примеров, отсутствие официального туториала
  56. 56. summary Backbone+ попытка повторить - плохая ExtJS документация+ наличие - местами не очень инструментов для логичная создания - достаточно сложная model/view/controller в освоении+ логичный код - нет нара
  57. 57. AngularJS
  58. 58. Новая разработка Google
  59. 59. Ближе всего к knockoutjs
  60. 60. Декларативные биндинги(вообще, какой-то неведомый паттерн MVW)
  61. 61. Крайне умнаяшаблонная системаПрекомпилирование шаблонов, например
  62. 62. <body ng-controller="PhoneListCtrl"> <ul> <li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul></body>// а так же<ng-repeat>...</ng-repeat>// или<li class="ng-repeat: phone in phones">...</li>
  63. 63. Более строгоеразграничение по модулям И вообще — МVC!
  64. 64. Встроенная система тестированияПишешь модуль — сразу же пишешь тест
  65. 65. Куча синтаксического сахара
  66. 66. // Provide the wiring information in a moduleangular.module(myModule, []). // Teach the injector how to build a greeter // Notice that greeter itself is dependent on $window factory(greeter, function($window) { // This is a factory function, and is responsible for // creating the greet service. return { greet: function(text) { $window.alert(text); } }; }).// New injector is created from the module.// (This is usually done automatically by angular bootstrap)var injector = angular.injector(myModule);// Request any dependency from the injectorvar greeter = injector.get(greeter);
  67. 67. Поддержка i18n из коробкиподдерживает pluralize, разбиение на локали (как следствие, полная совместимость с gettext, если вдруг)
  68. 68. Отсутствие готовыхкрупных приложений (та же проблема, что и knockout)
  69. 69. Нет зависимости отсторонних библиотек jQuery — for DOM manipulating AngularJS — for web-app building
  70. 70. angular-headless (и прочие эксперименты разной успешности) ну вы поняли :)
  71. 71. Документация — очень-очень!
  72. 72. Об автоматическом сохранении,транспортах, прокси — не слышали Но можно реализовать самому.
  73. 73. summary AngularJS+ Google - Нет уверенности:+ Похож на knockout * 350+ issues / ghub + Syntax sugar+ "На все случаи ? Шаблоны на жизни" сервере — + Отличнейшая сторонний продукт документация
  74. 74. Спасибо!74 слайда — не так уж и много, правда? :-)

×