basis.js - почему я не бросил разрабатывать свой фреймворк
DESCRIPTION
Презентация с РИТ2013TRANSCRIPT
basis.jsпочему я не бросил разрабатывать
свой фреймворк
Роман ДворновOstrovok.ru
basis.js
JavaScript-фреймворк,
ориентированный на разработку
single page application
2
basis.js – нестандартный фреймворк
3
basis.js
4
Сложные вещи делать просто –
для простых есть возможность
5
TodoMVC
Настоящиевеб-приложения
basis.js для настоящих приложений
6
Это был тёплый летний вечер в древней Греции...
Проблемы веб-приложений
7
• Много кода, представлений, данных• Одни и те же данные в разных представлениях• Более одного сценария изменения данных• Асинхронность• Динамические представления• Локализация• Адаптивность• ...
basis.js
8
• Модульность, namespace
• Конструирование классов• Работу с данными• Сетевое сообщение• Построение интерфейса, компоненты• Шаблоны, адаптивность, локализация
• Инструменты, сборка
9
Шаблоны
Другие шаблонизаторы
10
element.innerHTML = 'string';
Пример шаблона в basis.js
11
<b:style src="block.css"/>
<div{element} class="block block_{disabled}"> <h2>{title}</h2> <ul> <!--{childNodesHere}--> </ul></div>
Шаблон → DOM
12
шаблон декларация эталон(DOM fragment)
функция(фабрика экземпляров)
DOM fragment
bindings
Экземпляршаблона
Шаблон = «HTML» + CSS
13
<b:style src="block.css"/>
<div class="block block_{disabled}"> <h2>{title}</h2> <ul{childNodeElement}/></div>
.block{ ...}
.block_disabled{ ...}
Шаблон CSS
Разделение логики и представления
14
ОбъектШаблон
(DOM fragment)
binding
action
Javascript Страница
В шаблонах нет логики,нет ветвлений и циклов
15
Замена DOM фрагмента<div class="sidebar"> ... <ul class="list"> <li>item 1</li> <li>item 2</li> </ul> ...</div>
16
<div class="list-wrapper"> <h2>Header</h2> <ul class="list"> </ul></div>
replaceNode
insertBefore
Синхронизация
17
Шаблон basis.js
var view = new basis.ui.Node({ template: basis.resource('path/to/template.tmpl')});
basis server
файловая система
Live update«киллер» фича
18
Темы
19
Тема = HTML + CSS
Адаптивность
20
Шаблоны в basis.js
21
• Простое logic-less описание
• Live update
• Динамические представления• Быстрый процесс верстки• Темы
• Адаптивность
Знакомо?
app-some-module-some-list__item_state_selected
22
Во что превращается шаблон
23
<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>
<b:isolate> – отменяет БЭМ
24
<b:style src="item.css"/><b:isolate/>
<li class="item {selected} {disabled}"> {title}</li>
DOM25
childNodes
Унификация API
26
методыappendChild, insertBefore, removeChild, replaceChild, ...
nextSiblingpreviousSibling
parentNode
firstChild lastChild
node
Паттерны
27
• selection (выделение)
• disable/enable
• сортировка• группировка• привязка данных• ...
28
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>
JavaScript UI tree Browser DOM tree
29
There is no spoon
basis.js <3 DOM
30
Данные31
Классы backbone.js
32
Model Collection
Классы данных basis.js
33
НаборыОбъектыСкаляры
Property Object
Entity
Dataset
Slot
Автоматические наборы
Агрегатные функции
DataObjectSet
Особенности
34
• Все данные имеют состояние• При изменении данных создается дельта изменений
• Механизм делегирования
• Объекты взаимодействуют через изменение данных и состояния
• ...
Наборы данных
35
Dataset(Collection)
Наборы: пример
36
37
contacts
38
???
selectedcontacts
39
new basis.data.dataset.Subtract({ minuend: contacts, subtrahend: selectedContacts});
40
new basis.data.dataset.Subset({ source: new basis.data.dataset.Subtract({ minuend: contacts, subtrahend: selectedContacts }), rule: function(item){ return /ч/i.test(item.data.title); }});
Модульность
41
Основные модули
core event data DOM UI
entity dataset
net routerl10n
components
42
Ресурсы
43
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() }});
Почему не require.js?
44
Почему не require.js?
44
Относительные пути
Режимы
45
• Много файлов• Ленивая подгрузка• Оптимизируем загрузку с помощью basis server
Dev Production
• Один (обычно) js файл, в котором весь код, шаблоны и словари, один CSS файл на тему
• Различные оптимизации
Режимы
46
<b:style src="block.css"/><div{element} class="block block_{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
Производительность
47
История одного view
48
Время
49
1900 msknockout.js
Время
49
1900 ms
23 ms
knockout.js
basis.js
Время
49
1900 ms
23 ms
Разница более чем в 80 раз!
knockout.js
basis.js
Всё дело в DOM50
Структуры данных
51
Другие фреймворки
52
• backbone.js – постоянно копирует поля, отдельное событие для каждого изменного поля
• knockout.js – создает слишком много массивов, замыканий и других структур
• AngularJS – dirty check (глубокое копирование и сравнение объектов)
Простые модели
53
backbone.js knockout.js basis.data
10 000 моделей c 5 полями
1 000 моделей с 50 полями
86 ms 160 ms 1 ms
3.3 MB 10.9 MB 0.3 MB
139 ms 220 ms 1 ms
1.3 MB 13.5 MB 0.1 MB
Время
Память
Время
Память
Модели посложнее
54
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
Время
Память
Время
Память
basis.js
55
• Простые структуры• Дельта изменений• Агрегация событий• Данные не упорядочены• Избегаем bind, замыканий
• ...
Инструменты
56
basisjs-tools
57
• create – кодогенерация
• server – dev-сервер
• build – сборщик
basis build
58
basis build
59
Google Chrome plugin
60
Google Chrome plugin
60
Google Chrome plugin
60
Google Chrome plugin
60
61
НЕЛЬЗЯ ТАК ПРОСТО ВЗЯТЬ
И РАССКАЗАТЬ ПРО BASIS.JSЗА 30 МИНУТ
Сделано на basis.js
62
Сделано на basis.js
62
Сделано на basis.js
62
Сделано на basis.js
62
Сделано на basis.js
62
Сделано на basis.js
62
Ostrovok.ru
63