(устаревшее) basis.js introduction

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