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

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



35



36

Почему не for?

37

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

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


72


73


74

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

75

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

76

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

77

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

78

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

79

80

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

81

http://bit.ly/2fr9vXO

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

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

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

Internet