Basis.js - Production Ready SPA Framework
0 likes300 views
Документ представляет собой обзор фреймворка basis.js, который предлагает гибкий компонентный подход к разработке веб-приложений. Он описывает ключевые особенности, такие как управление источниками данных, локализация, трекинг событий и инструменты разработки. Автор подчеркивает важность изучения фреймворка для эффективного его использования.
![Когда я рассказываю про basis.js
‣ Зачем?! Есть же [X]
‣ basis.js - сложный, а [X] - простой
3](https://image.slidesharecdn.com/basisjs-161202132506/85/Basis-js-Production-Ready-SPA-Framework-3-320.jpg)
![{
"_meta": {
"type": {
"offer": "plural"
}
},
"ru-RU": {
"offer": [
"Всего {#} объявление",
"Всего {#} объявления",
"Всего {#} объявлений"
]
}
}
59](https://image.slidesharecdn.com/basisjs-161202132506/85/Basis-js-Production-Ready-SPA-Framework-59-320.jpg)
![{
"_meta": {
"type": {
"offer": "plural"
}
},
"ru-RU": {
"offer": [
"Всего {#} объявление",
"Всего {#} объявления",
"Всего {#} объявлений"
]
}
}
<div>
{l10n:offer.{total}}
</div>
60](https://image.slidesharecdn.com/basisjs-161202132506/85/Basis-js-Production-Ready-SPA-Framework-60-320.jpg)
![{
"popup/ok": {
"click": [
...
]
},
"popup/cancel": {
"click": [
...
]
}
}
map.json
69](https://image.slidesharecdn.com/basisjs-161202132506/85/Basis-js-Production-Ready-SPA-Framework-69-320.jpg)
Basis.js - Production Ready SPA Framework
- 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
- 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
- 28. Показываем спиннер, пока загружаются данные
- 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
- 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
- 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
- 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
- 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
- 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
- 80. 80
- 81. Более подробно в докладе Романа Дворнова http://bit.ly/2fr9vXO 81
- 82. ‣ Прошлый опыт ‣ Компоненты ‣ Источники данных ‣ Локализация ‣ Трекинг событий ‣ Инструменты разработки ‣ Заключение 82
- 83. И все таки… Почему мне нужно использовать basis.js? 83
- 84. basis.js уже сейчас активно используется в production 84
- 85. Попробуйте basis.js и сделайте свои выводы 85
- 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