MoscowJS 24.11.2016 Basis.js - Production Ready Framework

1. basis.js
production ready framework
1

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

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

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

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

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

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

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

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

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

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

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

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

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

15. <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

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

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

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

19. <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. ‣ Компоненты
‣ Источники данных
‣ Локализация
‣ Трекинг событий
‣ Инструменты разработки
‣ Заключение
20

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

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

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

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

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

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

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

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

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

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

31. 31

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

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

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

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

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

37. Почему не for?
37

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

80. 80

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

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

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

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

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

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

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

88. ‣ npm i -g basisjs-tools
‣ basis create app
basis server
88

89. ‣ npm i -g basisjs-tools
‣ basis create app
‣ basis server
89

90. 90

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

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

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