Upload
-
View
194
Download
1
Embed Size (px)
Citation preview
basis.jsproduction 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
31
Выбранные друзья
items
Доступные друзья
items
‣ model ‣ model ‣ model???
32
Исключим выбранных друзей из всех друзей и получим доступных
друзей
33
allFriends = new Dataset();
favoriteFriends = new Dataset();availableFriends = new Subtract({ minuend: allFriends, subtrahend: favoriteFriends});
34
allFriends = new Dataset();
favoriteFriends = new Dataset();availableFriends = new Subtract({ minuend: allFriends, subtrahend: favoriteFriends});
35
allFriends = new Dataset();
favoriteFriends = new Dataset();availableFriends = new Subtract({ minuend: allFriends, subtrahend: favoriteFriends});
36
Почему не for?
37
Придется реализовать механизм отслеживания изменений
38
Такой механизм уже встроен в наборы basis.js!
39
allFriends = new Dataset();
favoriteFriends = new Dataset();availableFriends = new Subtract({ minuend: allFriends, subtrahend: favoriteFriends});
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
tracker.loadMap(require('./map.json'));tracker.attach(function(info) { // Google Analytics ga(info.data);});
72
tracker.loadMap(require('./map.json'));tracker.attach(function(info) { // Google Analytics ga(info.data);});
73
‣Компоненты ‣Источники данных ‣Локализация ‣ Трекинг событий ‣Инструменты разработки ‣Заключение
74
basis.js - это удобные инструменты разработки
75
Граф зависимостей - простое приложение
76
Граф зависимостей - сложное приложение
77
‣ выбраны услуги ‣достаточно средств ‣достаточно прав
78
Почему кнопка неактивна?
79
80
‣ Прошлый опыт ‣ Компоненты ‣ Источники данных ‣ Локализация ‣ Трекинг событий ‣ Инструменты разработки ‣ Заключение
82
И все таки… Почему мне нужно
использовать basis.js?
83
basis.js уже сейчас активно используется в production
84
Попробуйте basis.js и сделайте свои выводы
85
Как попробовать?
86
‣ npm i -g basisjs-tools basis create app basis server
87
‣ npm i -g basisjs-tools ‣ basis create app
basis server
88
‣ npm i -g basisjs-tools ‣ basis create app ‣ basis server
89
90
Отлично! А минусы тоже есть?
91
‣ Документация ‣ Есть что улучшать ‣ Сообщество (есть gitter)
92
Спасибо за внимание!
93