6. Утилитарные функции
• Работа с объектами, строками, числами,
массивами и функциями
• Polyfill'ы для ES5 методов и исправления
некоторых методов для старых браузеров
• Обертка над консольными методами (basis.dev)
6
7. Специальные функции
• Функции по работе с путями (basis.path)
• Выполнение кода в следующем фрейме
(basis.setImmediate/clearImmediate, basis.nextTick)
• Асинхронная работа с document (basis.doc)
• basis.getter, basis.ready
7
10. Пример
// подключаем другие модули
var foo = basis.require('./path/to/module.js');
!
// делаем что-то
var instance = new foo.SomeClass({ ... });
!
// экспортируем
module.exports = instance;
10
13. Ресурс
• Ленивый интерфейс (объявление не приводит к
загрузке содержимого)
• Это функция – ее вызов или ее метода .fetch()
возвращает содержимое ресурса, которое
кешируется
• Повторный вызов возвращает значение из кеша
13
14. Пример
// объявление, файл не будет загружен
var someText = basis.resource('./path/to/file.txt');
!
// файл будет загружен, его содержимое
// будет закешировано и возвращено
console.log(someText());
!
// эквивалент, будет возвращено уже закешированое значение
console.log(someText.fetch());
14
18. Можно добавить свой тип
var Compiler = basis.require('./path/to/cs.js').CoffeeScript;
var processJs = basis.resource.extensions['.js'];
!
basis.resource.extensions['.coffee'] =
function(content, url){
return processJs(Compiler.compile(content), url);
};
18
* так же делается и в node.js
20. JS-модули получают
• __filename* – путь к файлу
• __dirname* – путь к папке файла
• resource = basis.resource(__dirname + fn)
• require = basis.require(__dirname + fn)
20
* как и в node.js
21. Разрешение путей
• basis.resource и basis.require разрешают
пути относительно html файла
• resource и require – относительно файла
модуля
21
33. Namespace → path
27
basis.ui.popup
Корневой неймспейс Путь к файлу
Им назначается абсолютный путь Точки заменяются на слеши и
добавляет расширение .js
/abs/path/to/basis/ui/popup.js
43. 36
«Component-based software engineering
(CBSE) ... is a reuse-based approach
to defining, implementing and composing
loosely coupled independent components
into systems...»
en.wikipedia.org/wiki/Software_component
65. Работа c данными
var object = new basis.data.Object({
data: {
foo: 1,
bar: 2
}
});
!
// обновляем
object.update({ bar: 3, baz: 4 });
57
Если будут изменения,
выбросит событие update с
дельтой и вернет дельту.
Здесь дельта
{ bar: 2, baz: undefined }
66. Но в основном ради
делегирования*
58
* об этом будет дальше
78. На стороне JavaScript
70
var view = new basis.ui.Node({
template: resource('./button.tmpl'),
binding: {
...
},
action: {
...
}
});
79. На стороне JavaScript
70
var view = new basis.ui.Node({
template: resource('./button.tmpl'),
binding: {
...
},
action: {
...
}
});
Описание шаблона
80. На стороне JavaScript
70
var view = new basis.ui.Node({
template: resource('./button.tmpl'),
binding: {
...
},
action: {
...
}
});
Значения для шаблона
Описание шаблона
81. На стороне JavaScript
70
var view = new basis.ui.Node({
template: resource('./button.tmpl'),
binding: {
...
},
action: {
...
}
});
Значения для шаблона
Действия, которые можно
вызывать из шаблона
Описание шаблона
82. Binding
71
var Foo = basis.ui.Node.subclass({
title: 'no title',
binding: {
title: function(leaf){
return leaf.title;
}
},
setTitle: function(newTitle){
this.title = newTitle;
this.updateBind('title'); // когда надо обновить
}
});
binding – дополняется при
наследовании
83. Обычно есть события
72
var Foo = basis.ui.Node.subclass({
binding: {
disabled: {
events: ['disable', 'enable'],
getter: function(node){
return node.isDisabled();
}
}
}
});
103. Особенности
• Все данные имеют состояние
• При изменении данных создается дельта
изменений
• Механизм делегирования
• Объекты взаимодействуют через изменение
данных и состояния
• ...
90
112. На практике
94
window
panel
button button
new Button({
delegate: panel,
handler: {
stateChanged: function(){
this.setDisabled(
this.state == 'processing');
}
}
});
Сработает, не важно у кого менять
состояние: у кнопки, панели или окна –
данные и состояние одни
116. Разные задачи, разные решения
96
• Произвольные поля • Строгий набор полей
• Вычисляемые поля
• Индекс
• Нормализация значений
• Defaults
• Rollback
• ...
basis.entity.Entitybasis.data.Object
дешево и сердито дороже, но с плюшками
117. 97
Подробнее в докладе
Не бойся, это всего лишь
данные... просто их много
tinyurl.com/client-side-big-data
125. 105
new basis.data.dataset.Filter({
source: new basis.data.dataset.Subtract({
minuend: contacts,
subtrahend: selectedContacts
}),
rule: function(item){
return /ч/i.test(item.data.title);
}
});
126. Итог
• Описана некоторая логическая схема
связи данных и компонент
• Код работающий с contacts и
selectedContacts остался прежним
• О согласованности наборов и данных
заботится фреймворк
106
133. Знания о DOM структуре
позволяют использовать
оптимизации
113
134. Например
• cloneNode(true) – быстрое создание
DOM-фрагмента
• обработка событий через один глобальный
capture-обработчик на документе для
каждого уникального события
114
142. TodoMVC
122
100 items 1000 items
AngularJS 125 ms 1491 ms
Backbone 53 ms 510 ms
Knockout 39 ms 489 ms
vanilla 23 ms 1882 ms
jQuery 20 ms 184 ms
Backbone + basis.js templates 18 ms 202 ms
basis.js 8 ms 95 ms
2.5x быстрее
166. Это дает Heat map,
карту показывающую
где и как часто
меняется DOM
144
167. Анализ и выявление проблем
• какие классы используются в разметке,
но их нет в стилях
• какие селекторы никогда не сработают
• конфликты стилей
• и т.д.
145
177. В состав входят
• server – dev-сервер
• extract – строит граф файлов и
извлекает информацию о приложении
• build – сборка приложения
• create – кодогенерация
155
178. Сборка
• Не требует деклараций, списков файлов,
карты зависимостей и т.п.
• Рекурсивно парсит и анализирует файлы,
строя граф файлов приложения
• Использует AST для анализа
• Может применять различные оптимизации
156
181. Резюме
• Модульный фреймворк, решающий большую часть задач
• Большинство решений хорошо стыкуются между собой
• Полноценная экосистема (инструменты)
• Простое моделирование систем, меняющихся во времени
• Использование подходов "будущего": DOM-based
шаблонизатор, анализ проекта и автоматическая его
сборка, реактивное программирование
159