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.

Basis.js — почему я не бросил разрабатывать свой фреймворк / Роман Дворнов (Островок)

1,105 views

Published on

  • Be the first to comment

  • Be the first to like this

Basis.js — почему я не бросил разрабатывать свой фреймворк / Роман Дворнов (Островок)

  1. 1. basis.jsпочему я не бросил разрабатыватьсвой фреймворкРоман Дворнов
  2. 2. basis.jsJavaScript фреймворк,ориентированный на разработкуsingle page application2
  3. 3. 3TodoMVCНастоящиевеб-приложенияbasis.js для настоящих приложений
  4. 4. Сделано на basis.js4
  5. 5. Сделано на basis.js4
  6. 6. Сделано на basis.js4
  7. 7. Сделано на basis.js4
  8. 8. Сделано на basis.js4
  9. 9. Сделано на basis.js4
  10. 10. 5Это был тёплый летний вечер в древней Греции...
  11. 11. Мы смотрим на другие фреймворки,но многое нам не подходит6
  12. 12. basis.js нестандартный фреймворк7
  13. 13. Чего нет в basis.js8• Deferred• CSS селекторов и классов в коде• render• ...
  14. 14. Другие фреймворки9Создаются, чтобыпростые вещи делать просто,а для сложных была возможность
  15. 15. basis.js10Сложные вещи делать просто –для простых есть возможность
  16. 16. jQuery – для сайтовbasis.js – для веб-приложений11Но есть же jQuery ...
  17. 17. Проблемы веб-приложений12• Много кода, представлений, данных• Одни и те же данные в разных представлениях• Более одного сценария изменения данных• Асинхронность• Динамические представления• Локализация• Адаптивность• ...
  18. 18. basis.js предоставляет13• Модульность, namespace• Конструирование классов• Работу с данными• Сетевое сообщение• Построение интерфейса, компоненты• Шаблоны, адаптивность, локализация• Инструменты, сборка
  19. 19. 14Шаблоны
  20. 20. Другие шаблонизаторы15element.innerHTML = string;
  21. 21. Пример шаблона16<b:style src="block.css"/><div{element} class="block block_{disabled}"><h2>{title}</h2><ul><!--{childNodesHere}--></ul></div>
  22. 22. Шаблон → DOM17Шаблон декларация эталон(DOM fragment)функция(фабрика экземпляров)DOM fragmentbindingsЭкземпляршаблона
  23. 23. Шаблон = «HTML» + CSS18<b:style src="block.css"/><div class="block block_{disabled}"><h2>{title}</h2><ul{childNodeElement}/></div>.block{...}.block_disabled{...}Шаблон CSS
  24. 24. Разделение логики и представления19ОбъектШаблон(DOM fragment)bindingactionJavascript Страница
  25. 25. В шаблонах нет логики,нет ветвлений и циклов20
  26. 26. Замена DOM фрагмента<div class="sidebar">...<ul class="list"><li>item 1</li><li>item 2</li></ul>...</div>21<div class="list-wrapper"><h2>Header</h2><ul class="list"></ul></div>replaceNodeinsertBefore
  27. 27. Синхронизация22Шаблон basis.jsvar view = new basis.ui.Node({template: basis.resource(path/to/template.tmpl)});basis serverфайловаясистема
  28. 28. Live update«киллер» фича23
  29. 29. Темы24Тема = HTML + CSS
  30. 30. Адаптивность25
  31. 31. Шаблоны в basis.js26• Простое logic-less описание• Live update• Динамические представления• Быстрый процесс верстки• Темы• Адаптивность
  32. 32. Знакомо?app-some-module-some-list__item_state_selected27
  33. 33. Во что превращается шаблон28<b:style src="item.css"/><li class="app-some-module-some-list__item app-some-module-some-list__item_state_{selected}app-some-module-some-list__item_state_{disabled}">{title}</li>
  34. 34. <b:isolate> – отменяет БЭМ29<b:style src="item.css"/><b:isolate/><li class="item {selected} {disabled}">{title}</li>
  35. 35. DOM30
  36. 36. childNodesУнификация API31методыappendChild, insertBefore, removeChild, replaceChild, ...nextSiblingpreviousSiblingparentNodefirstChild lastChildnode
  37. 37. Паттерны32• selection (выделение)• disable/enable• сортировка• группировка• привязка данных• ...
  38. 38. 33childNodes: [form {childNodes: [field { ... },field { ... }]},buttonPanel {childNodes: [button { caption: Save },button { caption: Cancel }]}]<form class="user-form"><div class="form-field"><label>Name:</label><input type="text" /></div><div class="form-field"><label>Email:</label><input type="text" /></div></form><div class="button-panel"><button>Save</button><button>Cancel</button></div>JavaScript UI tree Browser DOM tree
  39. 39. 34There is no spoon
  40. 40. basis.js <3 DOM35
  41. 41. Данные36
  42. 42. Классы backbone.js37Model Collection
  43. 43. Классы данных basis.js38НаборыОбъектыСкалярыProperty ObjectEntityDatasetSlotАвтоматическиенаборыАгрегатныефункцииDataObjectSet
  44. 44. Особенности39• Все данные имеют состояние• При изменении данных создается дельтаизменений• Механизм делегирования• Объекты взаимодействуют через изменениеданных и состояния• ...
  45. 45. Наборы данных40Dataset(Collection)
  46. 46. Наборы: пример41
  47. 47. 42contacts
  48. 48. 43???selectedcontacts
  49. 49. 44new basis.data.dataset.Subtract({minuend: contacts,subtrahend: selectedContacts});
  50. 50. 45new basis.data.dataset.Subset({source: new basis.data.dataset.Subtract({minuend: contacts,subtrahend: selectedContacts}),rule: function(item){return /ч/i.test(item.data.title);}});
  51. 51. Модульность46
  52. 52. Основные модулиcore event data DOM UIentity datasetnet routerl10ncomponents47
  53. 53. Ресурсы48basis.require(basis.ui);module.exports = new basis.ui.Node({template: resource(template/view.tmpl),binding: {editor: resource(editor.js).fetch(),list: resource(list.js).fetch()}});
  54. 54. Почему не require.js?49
  55. 55. Почему не require.js?49Относительные пути
  56. 56. Режимы50• Много файлов• Ленивая подгрузка• Оптимизируемзагрузку с помощьюbasis serverDev Production• Один (обычно) js файл, вкотором весь код,шаблоны и словари, одинCSS файл на тему• Различные оптимизации
  57. 57. Режимы51<b:style src="block.css"/><div{element} class="blockblock_{selected}"><h2>{title}</h2><ul><!--{childNodesHere}--></ul></div>[[1,1,["element"],"div",[4,[["block_","selected"]],0,"block"],[1,0,0,"h2",[3,1,["title"]]],[1,0,0,"ul",[8,1,["childNodesHere"]]]]]Dev Production
  58. 58. Производительность52
  59. 59. История одного view53
  60. 60. Время541900 msknockout.js
  61. 61. Время541900 ms23 msknockout.jsbasis.js
  62. 62. Время541900 ms23 msРазница более чем в 80 раз!knockout.jsbasis.js
  63. 63. Всё дело в DOM55
  64. 64. Структуры данных56
  65. 65. Другие фреймворки57• backbone.js – постоянно копирует поля,отдельное событие для каждогоизменного поля• knockout.js – создает слишком многомассивов, замыканий и других структур• AngularJS – dirty check (глубокоекопирование и сравнение объектов)
  66. 66. Простые модели58backbone.js knockout.js basis.data10 000 моделей c 5 полями1 000 моделей с 50 полями86 ms 160 ms 1 ms3.3 MB 10.9 MB 0.3 MB139 ms 220 ms 1 ms1.3 MB 13.5 MB 0.1 MBВремяПамятьВремяПамять
  67. 67. Модели посложнее59backbone.js basis.entityсоздание 10 000 моделей5 типизированных полей, индекс, коллекцияобновление189 ms 58 ms3.1 MB 1.1 MB235 ms 15 ms+0.3 MB +0 MBВремяПамятьВремяПамять
  68. 68. basis.js60• Простые структуры• Дельта изменений• Агрегация событий• Данные не упорядочены• Избегаем bind, замыканий• ...
  69. 69. Инструменты61
  70. 70. basisjs-tools62• create – кодогенерация• server – dev-сервер• build – сборщик
  71. 71. basis build63
  72. 72. basis build64
  73. 73. Google Chrome plugin65
  74. 74. Google Chrome plugin65
  75. 75. Google Chrome plugin65
  76. 76. Google Chrome plugin65
  77. 77. 66НЕЛЬЗЯ ТАК ПРОСТО ВЗЯТЬИ РАССКАЗАТЬ ПРО BASIS.JSЗА 30 МИНУТ
  78. 78. Ostrovok.ru67
  79. 79. basisjs.com68
  80. 80. basisjs.com/tour69
  81. 81. github.com/basisjs70
  82. 82. Спасибо за внимание!Вопросы?71Роман Дворновrdvornov@gmail.combasisjs.comgithub.com/basisjs

×