"Basis.js - Production Ready SPA Framework" Сергей Мелюков (Avito)

basis.js
production ready framework
1

Обо мне
@smelukov
Работаю в Avito
Делаю большое SPA
Преподаю JS
Учу создавать веб-приложения
Люблю JS и жену
Но больше жену
Популяризирую basis.js
Верю, что basis.js захватит мир
Сергей Мелюков
2

Когда я рассказываю про basis.js
‣ Зачем?! Есть же [X]
‣ basis.js - сложный, а [X] - простой
3

Возможно, я не точно доносил
смысл того, что такое basis.js и это
повлекло поспешные выводы
4

Действительно ли можно просто
взять любой фреймворк и сразу
начать делать веб-приложения?
5

Нет!
Любой фреймворк требует
изучения и опыта использования
6

Поговорим о том, какие
возможности дает basis.js из
коробки
7

План
‣ Компоненты
‣ Источники данных
‣ Локализация
‣ Трекинг событий
‣ Инструменты разработки
‣ Заключение
8

9

basis.js - это компонентный
подход
10

OK
имя
фамилия
отчество
Отмена
11

new Node({ 
template: ..., 
binding: { 
firstName: ..., 
lastName: ..., 
} 
});
12

new Node({ 
template: ..., 
binding: { 
firstName: ..., 
lastName: ... 
} 
});
13

basis.js - это шаблоны без
логики
14

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li> 
<li template="ngFor let item of items; let i = index; trackBy: trackByFn">...</li>
if (todos.length) { 
main = ( 
<section className="main"> 
<input 
className="toggle-all" 
type="checkbox" 
onChange={this.toggleAll} 
checked={activeTodoCount === 0} 
/> 
<ul className="todo-list"> 
{todoItems} 
</ul> 
</section> 
); 
} 
15

Логика в JS, шаблон в XHTML
16

<b:style src="./person.css"/> 
 
<div class="person"> 
<div>Имя: {firstName}</div> 
<div>Фамилия: {lastName}</div> 
</div>
17

basis.js - это изоляция стилей и
модульный CSS
18

<b:style src="./person.css"/> 
<b:isolate/> 
 
<div class="person"> 
<div class="photo"> ... </div> 
<div class="info"> ... </div> 
</div>
<style> ... </style> 
 
<div class="i1__person"> 
<div class="i1__photo"> ...</div> 
<div class="i1__info"> ...</div> 
</div>
19

20

basis.js - это гибкое
взаимодействие с источниками
данных
21

Источником данных может быть
объект, коллекция объектов или
другой компонент
22

new Node({ 
template: ..., 
binding: { ... },
dataSource: ...  
});
23

childNodes
Component
items
Dataset
(коллекция)
‣ model
‣ model
‣ model
‣ model
‣ model
‣ model
component
component
component
component
component
component
24

Контролировать источник данных
можно при помощи состояний
25

‣ processing - в состоянии синхронизации
‣ deprecated - данные устарели
‣ ready - готов к работе
‣ error - ошибка
26

Примеры использования?

Показываем спиннер, пока
загружаются данные

Обновляем устаревшие данные

basis.js - это автоматические
источники данных (индексы,
фильтры, etc…)
30

Выбранные друзья
items
Доступные друзья
items
‣ model
‣ model
‣ model???
32

Исключим выбранных друзей из
всех друзей и получим доступных
друзей
33

allFriends = new Dataset();
favoriteFriends = new Dataset(); 
 
availableFriends = new Subtract({ 
minuend: allFriends, 
subtrahend: favoriteFriends 
});
34

 
});
35

 
});
36

Придется реализовать механизм
отслеживания изменений
38

Такой механизм уже встроен в
наборы basis.js!
39

 
});
40

А есть еще что-то, кроме Subtract?
41

42
‣ Merge - объединение коллекций
‣ Filter - фильтрация элементов коллекции
‣ Slice - срез элементов коллекции
‣ Split - деление коллекции на подмножества
‣ etc…

Для агрегации элементов коллекции
используются индексы
43

44
‣ Min - минимальное значение коллекции
‣ Max - максимальное значение коллекции
‣ Avg - среднее значение коллекции
‣ Sum - сумма элементов в коллекции
‣ etc…

Манипуляция с данными, а не с DOM
DOM - всего лишь отображение
45

46

basis.js - это удобные
инструменты локализации
47

Словарь - это JSON-файл
48

{ 
"en-US": { 
"hello": "Hello!" 
}, 
"ru-RU": { 
"hello": "Привет!" 
} 
}
49

{ 
"en-US": { 
"hello": "Hello!" 
}, 
"ru-RU": { 
"hello": "Привет!" 
} 
}
<div> 
{l10n:hello} 
</div>
50

<div> 
Привет! 
</div>
51

В словарях можно использовать
биндинги и разметку
52

new Node({ 
template: ...
binding: { 
firstName: ..., 
lastName: ... 
} 
});
53

{ 
"_meta": { 
"type": { 
"hello": "markup" 
} 
}, 
"ru-RU": { 
"hello": "Привет, <b>{firstName} {lastName}</b>" 
} 
}

{ 
"_meta": { 
"type": { 
"hello": "markup" 
} 
}, 
"ru-RU": { 
"hello": "Привет, <b>{firstName} {lastName}</b>" 
} 
}
<div> 
{l10n:hello} 
</div>
55

<div> 
Привет, <b>Иван Петров</b> 
</div>
56

Грамматическое число
поддерживается на уровне словаря
57

new Node({ 
template: ...
binding: { 
total: ... 
} 
});
58

{ 
"_meta": { 
"type": { 
"offer": "plural" 
} 
}, 
"ru-RU": { 
"offer": [ 
"Всего {#} объявление", 
"Всего {#} объявления", 
"Всего {#} объявлений" 
] 
} 
}
59

{ 
"_meta": { 
"type": { 
"offer": "plural" 
} 
}, 
"ru-RU": { 
"offer": [ 
"Всего {#} объявление", 
"Всего {#} объявления", 
"Всего {#} объявлений" 
] 
} 
}
<div> 
{l10n:offer.{total}} 
</div>
60

<div> 
Всего 10 объявлений 
</div>
61

62

basis.js - это трекинг событий
63

Разметим компоненты и
шаблоны ролями
64

<div b:role> 
<div> ... </div> 
<button b:role="ok">OK</button> 
<button b:role="cancel">Отмена</button> 
</div>
new Node({ 
template: ..., 
role: "popup" 
});
65

<div role-marker="popup"> 
<div> ... </div> 
<button role-marker="popup/ok">OK</button> 
<button role-marker="popup/cancel">Отмена</button> 
</div>
66

Создадим tracking-map и укажем
за чем необходимо следить
67

{ 
"popup/ok": { 
"click": { 
... 
} 
},
"popup/cancel": { 
"click": { 
... 
} 
} 
}
map.json
68

{ 
"popup/ok": { 
"click": [ 
... 
] 
},
"popup/cancel": { 
"click": [ 
... 
] 
} 
}
map.json
69

Соединяем воедино
70

tracker.loadMap(require('./map.json')); 
tracker.attach(function(info) {
// Google Analytics 
ga(info.data); 
});
71

ga(info.data); 
});
72

ga(info.data); 
});
73

74

basis.js - это удобные
инструменты разработки
75

Граф зависимостей - простое приложение
76

Граф зависимостей - сложное приложение
77

‣ выбраны услуги
‣ достаточно средств
‣ достаточно прав
78

Почему кнопка неактивна?
79

Более подробно в докладе
Романа Дворнова
http://bit.ly/2fr9vXO
81

‣ Прошлый опыт
82

И все таки…
Почему мне нужно
использовать basis.js?
83

basis.js уже сейчас активно
используется в production
84

Попробуйте basis.js и сделайте
свои выводы
85

Как попробовать?
86

‣ npm i -g basisjs-tools
basis create app
basis server
87

‣ basis create app
basis server
88

‣ basis create app
‣ basis server
89

Отлично!
А минусы тоже есть?
91

‣ Документация
‣ Есть что улучшать
‣ Сообщество (есть gitter)
92

Спасибо за внимание!
93

"Basis.js - Production Ready SPA Framework" Сергей Мелюков (Avito)

Recommended

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to "Basis.js - Production Ready SPA Framework" Сергей Мелюков (Avito) (20)

More from AvitoTech (20)

"Basis.js - Production Ready SPA Framework" Сергей Мелюков (Avito)