1. basis.js
почему я не бросил разрабатывать
свой фреймворк
Роман Дворнов

2. basis.js
JavaScript фреймворк,
ориентированный на разработку
single page application
2

3. 3
TodoMVC
Настоящие
веб-приложения
basis.js для настоящих приложений

4. Сделано на basis.js
4

5. Сделано на basis.js
4

6. Сделано на basis.js
4

7. Сделано на basis.js
4

8. Сделано на basis.js
4

9. Сделано на basis.js
4

10. 5
Это был тёплый летний вечер в древней Греции...

11. Мы смотрим на другие фреймворки,
но многое нам не подходит
6

12. basis.js нестандартный фреймворк
7

13. Чего нет в basis.js
8
• Deferred
• CSS селекторов и классов в коде
• render
• ...

14. Другие фреймворки
9
Создаются, чтобы
простые вещи делать просто,
а для сложных была возможность

15. basis.js
10
Сложные вещи делать просто –
для простых есть возможность

16. jQuery – для сайтов
basis.js – для веб-приложений
11
Но есть же jQuery ...

17. Проблемы веб-приложений
12
• Много кода, представлений, данных
• Одни и те же данные в разных представлениях
• Более одного сценария изменения данных
• Асинхронность
• Динамические представления
• Локализация
• Адаптивность
• ...

18. basis.js предоставляет
13
• Модульность, namespace
• Конструирование классов
• Работу с данными
• Сетевое сообщение
• Построение интерфейса, компоненты
• Шаблоны, адаптивность, локализация
• Инструменты, сборка

19. 14
Шаблоны

20. Другие шаблонизаторы
15
element.innerHTML = 'string';

21. Пример шаблона
16
<b:style src="block.css"/>
<div{element} class="block block_{disabled}">
<h2>{title}</h2>
<ul>
<!--{childNodesHere}-->
</ul>
</div>

22. Шаблон → DOM
17
Шаблон декларация эталон
(DOM fragment)
функция
(фабрика экземпляров)
DOM fragment
bindings
Экземпляр
шаблона

23. Шаблон = «HTML» + CSS
18
<b:style src="block.css"/>
<div class="block block_{disabled}">
<h2>{title}</h2>
<ul{childNodeElement}/>
</div>
.block
{
...
}
.block_disabled
{
...
}
Шаблон CSS

24. Разделение логики и представления
19
Объект
Шаблон
(DOM fragment)
binding
action
Javascript Страница

25. В шаблонах нет логики,
нет ветвлений и циклов
20

26. Замена DOM фрагмента
<div class="sidebar">
...
<ul class="list">
<li>item 1</li>
<li>item 2</li>
</ul>
...
</div>
21
<div class="list-wrapper">
<h2>Header</h2>
<ul class="list">
</ul>
</div>
replaceNode
insertBefore

27. Синхронизация
22
Шаблон basis.js
var view = new basis.ui.Node({
template: basis.resource('path/to/template.tmpl')
});
basis server
файловая
система

28. Live update
«киллер» фича
23

29. Темы
24
Тема = HTML + CSS

30. Адаптивность
25

31. Шаблоны в basis.js
26
• Простое logic-less описание
• Live update
• Динамические представления
• Быстрый процесс верстки
• Темы
• Адаптивность

32. Знакомо?
app-some-module-some-list__item_state_selected
27

33. Во что превращается шаблон
28
<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>

34. <b:isolate> – отменяет БЭМ
29
<b:style src="item.css"/>
<b:isolate/>
<li class="item {selected} {disabled}">
{title}
</li>

35. DOM
30

36. childNodes
Унификация API
31
методы
appendChild, insertBefore, removeChild, replaceChild, ...
nextSibling
previousSibling
parentNode
firstChild lastChild
node

37. Паттерны
32
• selection (выделение)
• disable/enable
• сортировка
• группировка
• привязка данных
• ...

38. 33
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

39. 34
There is no spoon

40. basis.js <3 DOM
35

41. Данные
36

42. Классы backbone.js
37
Model Collection

43. Классы данных basis.js
38
Наборы
Объекты
Скаляры
Property Object
Entity
Dataset
Slot
Автоматические
наборы
Агрегатные
функции
DataObjectSet

44. Особенности
39
• Все данные имеют состояние
• При изменении данных создается дельта
изменений
• Механизм делегирования
• Объекты взаимодействуют через изменение
данных и состояния
• ...

45. Наборы данных
40
Dataset
(Collection)

46. Наборы: пример
41

47. 42
contacts

48. 43
???
selected
contacts

49. 44
new basis.data.dataset.Subtract({
minuend: contacts,
subtrahend: selectedContacts
});

50. 45
new basis.data.dataset.Subset({
source: new basis.data.dataset.Subtract({
minuend: contacts,
subtrahend: selectedContacts
}),
rule: function(item){
return /ч/i.test(item.data.title);
}
});

51. Модульность
46

52. Основные модули
core event data DOM UI
entity dataset
net router
l10n
components
47

53. Ресурсы
48
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()
}
});

54. Почему не require.js?
49

55. Почему не require.js?
49
Относительные пути

56. Режимы
50
• Много файлов
• Ленивая подгрузка
• Оптимизируем
загрузку с помощью
basis server
Dev Production
• Один (обычно) js файл, в
котором весь код,
шаблоны и словари, один
CSS файл на тему
• Различные оптимизации

57. Режимы
51
<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

58. Производительность
52

59. История одного view
53

60. Время
54
1900 ms
knockout.js

61. Время
54
1900 ms
23 ms
knockout.js
basis.js

62. Время
54
1900 ms
23 ms
Разница более чем в 80 раз!
knockout.js
basis.js

63. Всё дело в DOM
55

64. Структуры данных
56

65. Другие фреймворки
57
• backbone.js – постоянно копирует поля,
отдельное событие для каждого
изменного поля
• knockout.js – создает слишком много
массивов, замыканий и других структур
• AngularJS – dirty check (глубокое
копирование и сравнение объектов)

66. Простые модели
58
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
Время
Память
Время
Память

67. Модели посложнее
59
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
Время
Память
Время
Память

68. basis.js
60
• Простые структуры
• Дельта изменений
• Агрегация событий
• Данные не упорядочены
• Избегаем bind, замыканий
• ...

69. Инструменты
61

70. basisjs-tools
62
• create – кодогенерация
• server – dev-сервер
• build – сборщик

71. basis build
63

72. basis build
64

73. Google Chrome plugin
65

74. Google Chrome plugin
65

75. Google Chrome plugin
65

76. Google Chrome plugin
65

77. 66
НЕЛЬЗЯ ТАК ПРОСТО ВЗЯТЬ
И РАССКАЗАТЬ ПРО BASIS.JS
ЗА 30 МИНУТ

78. Ostrovok.ru
67

79. basisjs.com
68

80. basisjs.com/tour
69

81. github.com/basisjs
70

82. Спасибо за внимание!
Вопросы?
71
Роман Дворнов
rdvornov@gmail.com
basisjs.com
github.com/basisjs