Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
•
0 likes•1,683 views
Опенсорсный JavaScript-фреймворк с нестандартными подходами, ориентированный на разработку одностраничных приложений. Обновление шаблонов и стилей без перезагрузки страницы, развитые механизмы работы с данными, высокая производительность, инструменты разработчика и многое другое. Доклад с конференции WSD, Санкт-Петербург, 8 июня 2013 Видео: http://www.youtube.com/watch?v=cVbbkwkhNQg
![22
...
childNodes: [
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>
basis.js UI tree Browser DOM tree](https://image.slidesharecdn.com/fronttalks2013ekt4x3final-130705085314-phpapp02/85/Basis-js-extended-22-320.jpg)
![Режимы
42
<b:style src=/slideshow/basisjs-fronttalks/23944728/"block.css"/>
<div{element} class="block
block_{selected}">
<h2></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](https://image.slidesharecdn.com/fronttalks2013ekt4x3final-130705085314-phpapp02/85/Basis-js-extended-43-320.jpg)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
- 1. basis.js почему я не бросил разрабатывать свой фреймворк Роман Дворнов Ostrovok.ru FrontTalks, июль 2013
- 2. Немного о себе •Работаю в Ostrovok.ru •До этого руководил веб-разработкой в ПС Единый кошелек •Автор и мейтейнер фреймворка basis.js, которому уже 7 лет 2
- 5. basis.js 5 • Модульность, namespace • Конструирование классов • Работа с данными • Сетевое сообщение • Построение интерфейса, компоненты • Шаблоны, адаптивность, локализация • Инструменты, сборка
- 6. 6 Шаблоны
- 7. Другие шаблонизаторы 7 element.innerHTML = 'string';
- 8. Шаблон basis.js 8 <b:style src=/slideshow/basisjs-fronttalks/23944728/"block.css"/> <div{element} class="block block_{selected}"> <h2></h2> <ul> <!--{childNodesHere}--> </ul> </div>
- 9. Шаблон → DOM 9 Шаблон декларация эталон (DOM fragment) функция (фабрика экземпляров) DOM fragment bindings
- 10. Шаблон = «HTML» + CSS 10 <b:style src=/slideshow/basisjs-fronttalks/23944728/"block.css"/> <div class="block block_{disabled}"> <h2></h2> <ul{childNodeElement}/> </div> .block { ... } .block_disabled { ... } Шаблон CSS
- 11. Разделение логики и представления 11 Объект Шаблон (DOM fragment) binding action Javascript Страница
- 12. В шаблонах нет логики, нет ветвлений и циклов 12
- 13. Замена DOM фрагмента <div class="sidebar"> ... <ul class="list"> <li>item 1</li> <li>item 2</li> </ul> ... </div> 13 <div class="list-wrapper"> <h2>Header</h2> <ul class="list"> </ul> </div> replaceNode insertBefore
- 14. Синхронизация 14 Шаблон basis.js var view = new basis.ui.Node({ template: basis.resource('path/to/template.tmpl') }); basis server файловая система
- 16. Тема = HTML + CSS 16 // опеределение шаблона для темы basis.template.theme('mobile').define({ 'some.view': resource('path/to/view.tmpl') }); // переключение темы if (window.innerWidth > 480) basis.template.setTheme('base'); else basis.template.setTheme('mobile');
- 17. Адаптивность 17
- 18. Шаблоны в basis.js 18 • Простое logic-less описание • Live update • Динамические представления • Быстрый процесс верстки • Темы • Адаптивность
- 19. Интерфейс 19
- 20. childNodes Унификация API 20 методы appendChild, insertBefore, removeChild, replaceChild, ... node nextSiblingpreviousSibling parentNode firstChild lastChild
- 21. Паттерны 21 • selection (выделение) • disable/enable • сортировка • группировка • привязка данных
- 22. 22 ... childNodes: [ 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> basis.js UI tree Browser DOM tree
- 23. 23 There is no spoon
- 25. Данные 25
- 26. Классы данных backbone.js 26 Model Collection
- 28. Особенности 28 • Все данные имеют состояние • При изменении данных создается дельта изменений • Механизм делегирования • Объекты взаимодействуют через изменение данных и состояния • ...
- 30. Виды наборов • Merge – слияние множеств: объединение, разность и другие • Subtract – вычитание • Subset – получение подмножества • Split – разбиение на подмножества 1:1 • Cloud – разбиение на подмножества 1:М • Slice – срез подмножества 30
- 32. 32 contacts
- 34. 34 new basis.data.dataset.Subtract({ minuend: contacts, subtrahend: selectedContacts });
- 35. 35 new basis.data.dataset.Subset({ source: new basis.data.dataset.Subtract({ minuend: contacts, subtrahend: selectedContacts }), rule: function(item){ return /ч/i.test(item.data.title); } });
- 36. В итоге 36 • Описана некоторая логическая схема связи данных и компонент • Код работающий с contacts и selectedContacts остался прежним • О согласованности наборов и данных заботится фреймворк
- 37. Модульность 37
- 38. Основные модули core event data DOM UI entity dataset net routerl10n components 38
- 39. Ресурсы basis.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() } }); 39
- 42. Режимы 41 • Много файлов • Ленивая подгрузка • Оптимизируем загрузку с помощью basis server Dev Production • Один (обычно) js файл, в котором весь код, шаблоны и словари, один CSS файл на тему • Различные оптимизации
- 48. basis.js 45 1900 ms 23 ms Разница более чем в 80 раз! knockout.js
- 49. Все дело в DOM 46
- 51. Другие фреймворки 48 • backbone.js – постоянно копирует поля, событие для каждого изменного поля • knockout.js – создает слишком много массивов, замыканий и других структур • AngularJS – dirty check (глубокое копирование и сравнение объектов)
- 52. Простые модели 49 backbone.js knockout.js basis.data 10 000 моделей c 5 полями 1 000 моделей с 50 полями 136 ms 160 ms 2 ms 3.3 MB 10.9 MB 0.3 MB 86 ms 220 ms 1 ms 1.3 MB 13.5 MB 0.1 MB Время Память Время Память
- 53. Модели посложнее 50 backbone.js basis.entity создание 10 000 моделей 5 типизированных полей, индекс, коллекция обновление 189 ms 58 ms 3.1 MB 1.1 MB 235 ms 15 ms +0.3 MB +0 MB Время Память Время Память
- 55. basis.js 52 • Простые структуры • Дельта изменений • Агрегация событий • Данные не упорядочены • Избегаем bind, замыканий • ...
- 56. Инструменты 53
- 57. basisjs-tools • Консольный инструмент для разработки • Работает под управлением node.js • Установка: npm install -g basisjs-tools 54
- 58. Команды basisjs-tools • create – кодогенерация • server – dev-сервер • build – сборщик 55
- 59. Сборщик 56 • Не требует деклараций, списков файлов, карты зависимостей и т.п. • Рекурсивно парсит и анализирует файлы, строя граф файлов приложения • Использует AST для анализа • Может применять различные оптимизации
- 60. basis build 57
- 61. Google Chrome plugin 58 (расширение для Developer Tools) goo.gl/OYhFK
- 62. 59 НЕЛЬЗЯ ТАК ПРОСТО ВЗЯТЬ И РАССКАЗАТЬ ПРО BASIS.JS ЗА 30 МИНУТ
- 69. 61
- 71. basisjs.com 63
- 74. Спасибо за внимание! Вопросы? 66 Роман Дворнов @rdvornov rdvornov@gmail.com basis.js basisjs.com github.com/basisjs