(устаревшее) basis.js introduction
TRANSCRIPT
basis.jsРоман Дворнов
март 2013
basis.js
Это javascript фреймворк
для построения
single-page приложений
2
Назначение• Для создания больших легковесных приложений
• Собственный дизайн компонент и их поведение
• Часто меняются требования
• В планах есть локализация и адаптивность
• Быстрое прототипирование
3
Модули
• basis.js + 55 модулей (~352 kb, +gzip = ~100kb)
o работа с данными
o работа с сетью
o браузерные API
o организация интерфейса
o компоненты
o ...
4
Модули
5
Основные модули
core
6
Основные модули
core event
6
Основные модули
core event data
6
Основные модули
core event data DOM
6
Основные модули
core event data DOM UI
6
Основные модули
core event data DOM UI
entity dataset
6
Основные модули
core event data DOM UI
entity dataset components
6
Основные модули
core event data DOM UI
entity dataset
net
components
6
Основные модули
core event data DOM UI
entity dataset
net l10n
components
6
Основные модули
core event data DOM UI
entity dataset
net routerl10n
components
6
Core (basis.js)
• Утилитарные функции• Конструирование классов
• Ресурсы• Пространства имен (namespace)
7
Ресурсы
• Основа модульности• Ресурс - это некоторый файл
• Загрузка по требованию (lazy)
• Являются частью программы
8
Для чего нужны ресурсы
• Разбить большое на меньшие части• Контент разного типа в отдельных файлах
• Раннее связывание - поздняя инициализания
9
var text = basis.resource('some/file.txt');var popup = basis.resource('popup.js');
function showText(){ alert(text()); // или alert(text.fetch());}...showText();...popup.fetch().show(...)
Пример
10
var module = { exports: {}};var relResource = function(path){ return basis.resource('path/to/' + path);};
(function(exports, module, basis, global, __filename, __dirname, resource){ "use strict";
}).call(module, module.exports, module, basis, global, 'path/to/file.js', 'path/to', relResource);
return module.exports;
Javascript ресурсы
var SomeClass = basis.Class(null, { ...});module.exports = { whatever: 'you want to export', maybe: function(){ ... }, SomeClass: SomeClass};
path/to/file.js
11
Приложение –
управление данными и
интерфейс для этого
12
basis.ui.Node
Основа интерфейса
Наследует от классов потомком большую часть
функционала, которые вносят ту или иную функцию
–
это похоже на слоеный пирог
13
basis.event – cобытия
+
события
=
basis.event.Emitter
14
basis.data – состояние
basis.event.Emitter
+
состояние
=
basis.data.AbstractData
15
basis.data.AbstractData
+
данные
=
basis.data.Object
basis.data – данные
16
basis.data.AbstractData
+
данные
=
basis.data.Object
basis.data – данные
Скаляры
16
basis.data.AbstractData
+
данные
=
basis.data.Object
basis.data – данные
НаборыСкаляры
16
basis.data.Object
+
DOM
=
basis.dom.wrapper.Node
basis.dom.wrapper – DOM
17
basis.ui – шаблон
basis.dom.wrapper.Node
+
шаблон
=
basis.ui.Node
18
Функциональные слои
19
Функциональные слои
+события = basis.event.Emmiter
19
Функциональные слои
+события = basis.event.Emmiter
+состояние = basis.data.AbstractData
19
Функциональные слои
+события = basis.event.Emmiter
+состояние = basis.data.AbstractData
+данные = basis.data.Object
19
Функциональные слои
+события = basis.event.Emmiter
+состояние = basis.data.AbstractData
+данные = basis.data.Object
+DOM = basis.dom.wrapper.Node
19
Функциональные слои
+события = basis.event.Emmiter
+состояние = basis.data.AbstractData
+данные = basis.data.Object
+DOM = basis.dom.wrapper.Node
+шаблон = basis.ui.Node
19
basis.ui.Node• Это и view, и model, и controller – все
зависит от того как он используется, какая у
него логика
• Имеет все необходимое, для построения интерфейса
• Легко расширить или изменить поведение
20
basis.require('basis.ui');
var node = new basis.ui.Node({
container: document.body,
template: 'Hello world'
});
Hello world
21
Шаблоны• xhtml-like формат
• logic less – нет условных операторов, нет циклов
• Есть специальные вставки – биндинги
• Есть специальные теги, для подключения стилей, уточнений, включения других шаблонов etc
22
Пример
<b:style src="block.css"/>
<div{element} class="block block_{disabled}">
<h2>{title}</h2>
<ul>
<!--{childNodesHere}-->
</ul>
</div>
23
Взаимодействие
24
ОбъектШаблон
(DOM fragment)
binding
action
Javascript
binding – данные для шаблонаvar Item = basis.Class(basis.ui.Node, { template: resource('template.tmpl'), binding: { selected: { events: 'select unselect', getter: function(node){ return node.selected; } }, name: 'data:' }});
25
template.tmpl
<li event-click="item_{selected}">
{name}
</li>
var button = new basis.ui.Node({ template: resource('button.tmpl'), action: { run: function(event){ // event.type == 'click' } }});
button.tmpl<button event-click="run">click me</button>
action - обратная связь
26
Жизнь без циклов в шаблонахbasis.require('basis.ui');
var list = new basis.ui.Node({ template: resource('template/list.tmpl'), childClass: { template: resource('template/item.tmpl'), binding: { name: 'name' // function(node){ return node.name } } }, childNodes: [ { name: 'foo' }, // конфиг для childClass { name: 'bar' } ]});
27
Шаблоныlist.tmpl<b:style src="list.css" /><div class="list"> My list: <ul{childNodesElement} /></div>
item.tmpl<b:style src="item.css" /><li class="list-item"> {name}</li>
28
Сортировкаbasis.require('basis.ui');
var list = new basis.ui.Node({ ... sorting: 'name'});...list.setSorting(function(node){ return node.data.age;}, true);
29
Группировкаbasis.require('basis.ui');var list = new basis.ui.Node({ ... grouping: { groupGetter: function(node){ return node.value; }, childClass: { template: resource('template/group.tmpl'), binding: { title: 'title' } } }});...list.setGrouping(...);
30
Резюме• Разделение логики и представления• Нет селекторов, нет css классов и id в коде
(почти)
• Не манипулируем DOM напрямую, хотя такая возможность есть (пока)
• Структуру интерфейса и компонент мы контролируем в javascript
• По тексту шаблона ясно где и что будет• Шаблоны и css храним отдельно от javascript
31
Что это дает• Live update шаблонов и стилей без перезагрузки страницы
• Шаблоны не могут сломать приложение (только верстку) – в них нет кода
• Мы можем находить несоответсвия в шаблонах и стилях, применять оптимизации при сборке
• А еще мы можем реализовать темы
32
Темы• Это набор шаблонов и стилей к ним• Можно сделать совсем разные look & feel интерфейсы, которые имееют общую кодовую базу (javascript)
• Могут дополнять друг друга, например, тема для iOS, может дополнять мобильную – нет необходимости определять все шаблоны
• Можно переключать на лету
33
Live update – это круто
34
Data-flow• Различные объекты объединяются в функциональные цепочки, описывая бизнес логику
• Управление через события и состояние
• Делегирование – механизм “соединения” basis.data.Object, в результате чего они начинают разделять данные и состояние
• Подписка – механизм тригирования необходимости синхронизации данных
35
Работа с данными• basis.data.entity – типизированные данные, вычисляемые поля, обращение по индексу, пользовательские изменения
• basis.data.dataset – автоматические наборы: слияние (объединение, пересечение, разница), подмножество, вычитание, разбиение и др.
• basis.data.index – агрегатные функции для наборов, вычисление отношений к агрегатам
36
basis.net.request({
url: '/api/something',
handler: {
success: function(sender, data){ ... },
failure: function(sender, error){ ... }
}
});
net
37
basis.net.request({
url: '/api/something',
handler: {
success: function(sender, data){ ... },
failure: function(sender, error){ ... }
}
});
Но это не наш метод
net
37
var service = new basis.net.service.Service({ // настройки сервиса});...var User = basis.Class(basis.data.Object, { ... save: service.createAction({ url: '/api/user', success: function(transport, data){ ... }, ... })});...var user = new User(...);user.save();
net - наш метод
38
net - наш метод• Service
o общие настройки
o работа с сессией
o подпись запросов
o обработка ошибок
• Action
o синхронизируют свое состояние с данными
o описывают наиболее частые сценарии
o предотвращают конкурентные запросы
39
// настройка
basis.l10n.setCultureList(['ru-RU', 'en-US']);
basis.l10n.setCulture('ru-RU');
// создание словаря
basis.l10n.createDictionary('dict.namespace', 'path/to/dicts', {
key: 'value'
});
Локализация
40
• в коде:basis.l10n.token('some.dict.key').value
binding: { title: basis.l10n.token('some.dict.key')}
• в шаблонах*<span>{l10n:some.dict.key}</span>
* чаще токены задаются через binding
Локализация
41
Компоненты• Они есть :)• Реализованы наиболее часто используемые компоненты: кнопки, закладки, дерево, таблицы, окна, попапы и т.д.
• Нет смысла много про них говорить, т.к. большая часть их функционала предоставляется basis.ui.Node
• В основном используются на этапе прототипирования
42
Инструменты
• devpanel
• консольный инструмент
• Google Chrome plugin
43
• достаточно добавить в проект basis.require('basis.devpanel');
• позволяет менять тему и язык• обеспечивает API для выбора шаблонов и токенов переводов, которые используются плагином
• обеспечивает синхронизацию ресурсов на клиенте
devpanel
44
basisjs-tools
• Написан на javascript, работает под управлением node.js
• Установка npm install -g basisjs-tools
• В консоли становиться доступна команда basis
45
basis create• быстрое создание приложения, модуля и др. по шаблону
• хорошее подспорье, особенно на этапе прототипирования
• Создание приложения с базовой структурой:basis create app appname
• пока мало возможностей и шаблонов, но мы планируем добавить шаблоны для большинства частых кейсов
46
basis server• выполняет роль http сервера
• создает кеш ресурсов, минимизируя количество запросов
• мониторит изменение в файлах, и уведомляет клиент об изменениях
• умеет проксировать запросы
47
• Нет деклараций и списков файлов• На вход получает лишь индексный html файл, который анализируется, извлекают ссылки на другие файлы, которые обрабатываются так же – и так пока не будут найдены все файлы
• Для анализа файлы парсятся в AST
• Перелинковывает, реструктурирует, применяет различные оптимизации
• Понимает простые проекты, но проекты на basisjs понимает больше
basis build
48
Google Chrome plugin
49
Google Chrome plugin
49
Google Chrome plugin
49
Google Chrome plugin
49
Google Chrome plugin
49
Ссылки
• http://github.com/basisjs – исходники
• http://basisjs.com – сайт
• http://basisjs.com/tour – интерактивный тур
• http://basisjs.com/demo – демонстрации
• http://basisjs.com/docs – автодокументация
50