Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Basis.js - Production Ready SPA Framework

163 views

Published on

Сергей Мелюков
Avito

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Basis.js - Production Ready SPA Framework

  1. 1. basis.js production ready framework 1
  2. 2. Обо мне @smelukov Работаю в Avito Делаю большое SPA Преподаю JS Учу создавать веб-приложения Люблю JS и жену Но больше жену Популяризирую basis.js Верю, что basis.js захватит мир Сергей Мелюков 2
  3. 3. Когда я рассказываю про basis.js ‣ Зачем?! Есть же [X] ‣ basis.js - сложный, а [X] - простой 3
  4. 4. Возможно, я не точно доносил смысл того, что такое basis.js и это повлекло поспешные выводы 4
  5. 5. Действительно ли можно просто взять любой фреймворк и сразу начать делать веб-приложения? 5
  6. 6. Нет! Любой фреймворк требует изучения и опыта использования 6
  7. 7. Поговорим о том, какие возможности дает basis.js из коробки 7
  8. 8. План ‣ Компоненты ‣ Источники данных ‣ Локализация ‣ Трекинг событий ‣ Инструменты разработки ‣ Заключение 8
  9. 9. ‣ Компоненты ‣ Источники данных ‣ Локализация ‣ Трекинг событий ‣ Инструменты разработки ‣ Заключение 9
  10. 10. basis.js - это компонентный подход 10
  11. 11. OK имя фамилия отчество Отмена 11
  12. 12. 
 new Node({
 template: ...,
 binding: {
 firstName: ...,
 lastName: ...,
 }
 }); 12
  13. 13. 
 new Node({
 template: ...,
 binding: {
 firstName: ...,
 lastName: ...
 }
 }); 13
  14. 14. basis.js - это шаблоны без логики 14
  15. 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. 16. Логика в JS, шаблон в XHTML 16
  17. 17. <b:style src="./person.css"/>
 
 <div class="person">
 <div>Имя: {firstName}</div>
 <div>Фамилия: {lastName}</div>
 </div> 17
  18. 18. basis.js - это изоляция стилей и модульный CSS 18
  19. 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. ‣ Компоненты ‣ Источники данных ‣ Локализация ‣ Трекинг событий ‣ Инструменты разработки ‣ Заключение 20
  21. 21. basis.js - это гибкое взаимодействие с источниками данных 21
  22. 22. Источником данных может быть объект, коллекция объектов или другой компонент 22
  23. 23. 
 new Node({
 template: ...,
 binding: { ... }, dataSource: ... 
 }); 23
  24. 24. childNodes Component items Dataset (коллекция) ‣ model ‣ model ‣ model ‣ model ‣ model ‣ model component component component component component component 24
  25. 25. Контролировать источник данных можно при помощи состояний 25
  26. 26. ‣ processing - в состоянии синхронизации ‣ deprecated - данные устарели ‣ ready - готов к работе ‣ error - ошибка 26
  27. 27. Примеры использования?
  28. 28. Показываем спиннер, пока загружаются данные
  29. 29. Обновляем устаревшие данные
  30. 30. basis.js - это автоматические источники данных (индексы, фильтры, etc…) 30
  31. 31. 31
  32. 32. Выбранные друзья items Доступные друзья items ‣ model ‣ model ‣ model??? 32
  33. 33. Исключим выбранных друзей из всех друзей и получим доступных друзей 33
  34. 34. allFriends = new Dataset(); favoriteFriends = new Dataset();
 
 availableFriends = new Subtract({
 minuend: allFriends,
 subtrahend: favoriteFriends
 }); 34
  35. 35. allFriends = new Dataset(); favoriteFriends = new Dataset();
 
 availableFriends = new Subtract({
 minuend: allFriends,
 subtrahend: favoriteFriends
 }); 35
  36. 36. allFriends = new Dataset(); favoriteFriends = new Dataset();
 
 availableFriends = new Subtract({
 minuend: allFriends,
 subtrahend: favoriteFriends
 }); 36
  37. 37. Почему не for? 37
  38. 38. Придется реализовать механизм отслеживания изменений 38
  39. 39. Такой механизм уже встроен в наборы basis.js! 39
  40. 40. allFriends = new Dataset(); favoriteFriends = new Dataset();
 
 availableFriends = new Subtract({
 minuend: allFriends,
 subtrahend: favoriteFriends
 }); 40
  41. 41. А есть еще что-то, кроме Subtract? 41
  42. 42. 42 ‣ Merge - объединение коллекций ‣ Filter - фильтрация элементов коллекции ‣ Slice - срез элементов коллекции ‣ Split - деление коллекции на подмножества ‣ etc…
  43. 43. Для агрегации элементов коллекции используются индексы 43
  44. 44. 44 ‣ Min - минимальное значение коллекции ‣ Max - максимальное значение коллекции ‣ Avg - среднее значение коллекции ‣ Sum - сумма элементов в коллекции ‣ etc…
  45. 45. Манипуляция с данными, а не с DOM DOM - всего лишь отображение 45
  46. 46. ‣ Компоненты ‣ Источники данных ‣ Локализация ‣ Трекинг событий ‣ Инструменты разработки ‣ Заключение 46
  47. 47. basis.js - это удобные инструменты локализации 47
  48. 48. Словарь - это JSON-файл 48
  49. 49. {
 "en-US": {
 "hello": "Hello!"
 },
 "ru-RU": {
 "hello": "Привет!"
 }
 } 49
  50. 50. {
 "en-US": {
 "hello": "Hello!"
 },
 "ru-RU": {
 "hello": "Привет!"
 }
 } <div>
 {l10n:hello}
 </div> 50
  51. 51. <div>
 Привет!
 </div> 51
  52. 52. В словарях можно использовать биндинги и разметку 52
  53. 53. new Node({
 template: ... binding: {
 firstName: ...,
 lastName: ...
 }
 }); 53
  54. 54. {
 "_meta": {
 "type": {
 "hello": "markup"
 }
 },
 "ru-RU": {
 "hello": "Привет, <b>{firstName} {lastName}</b>"
 }
 }
  55. 55. {
 "_meta": {
 "type": {
 "hello": "markup"
 }
 },
 "ru-RU": {
 "hello": "Привет, <b>{firstName} {lastName}</b>"
 }
 } <div>
 {l10n:hello}
 </div> 55
  56. 56. <div>
 Привет, <b>Иван Петров</b>
 </div> 56
  57. 57. Грамматическое число поддерживается на уровне словаря 57
  58. 58. new Node({
 template: ... binding: {
 total: ...
 }
 }); 58
  59. 59. {
 "_meta": {
 "type": {
 "offer": "plural"
 }
 },
 "ru-RU": {
 "offer": [
 "Всего {#} объявление",
 "Всего {#} объявления",
 "Всего {#} объявлений"
 ]
 }
 } 59
  60. 60. {
 "_meta": {
 "type": {
 "offer": "plural"
 }
 },
 "ru-RU": {
 "offer": [
 "Всего {#} объявление",
 "Всего {#} объявления",
 "Всего {#} объявлений"
 ]
 }
 } <div>
 {l10n:offer.{total}}
 </div> 60
  61. 61. <div>
 Всего 10 объявлений
 </div> 61
  62. 62. ‣ Компоненты ‣ Источники данных ‣ Локализация ‣ Трекинг событий ‣ Инструменты разработки ‣ Заключение 62
  63. 63. basis.js - это трекинг событий 63
  64. 64. Разметим компоненты и шаблоны ролями 64
  65. 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. 66. <div role-marker="popup">
 <div> ... </div>
 <button role-marker="popup/ok">OK</button>
 <button role-marker="popup/cancel">Отмена</button>
 </div> 66
  67. 67. Создадим tracking-map и укажем за чем необходимо следить 67
  68. 68. {
 "popup/ok": {
 "click": {
 ...
 }
 }, "popup/cancel": {
 "click": {
 ...
 }
 }
 } map.json 68
  69. 69. {
 "popup/ok": {
 "click": [
 ...
 ]
 }, "popup/cancel": {
 "click": [
 ...
 ]
 }
 } map.json 69
  70. 70. Соединяем воедино 70
  71. 71. tracker.loadMap(require('./map.json'));
 tracker.attach(function(info) { // Google Analytics
 ga(info.data);
 }); 71
  72. 72. tracker.loadMap(require('./map.json'));
 tracker.attach(function(info) { // Google Analytics
 ga(info.data);
 }); 72
  73. 73. tracker.loadMap(require('./map.json'));
 tracker.attach(function(info) { // Google Analytics
 ga(info.data);
 }); 73
  74. 74. ‣ Компоненты ‣ Источники данных ‣ Локализация ‣ Трекинг событий ‣ Инструменты разработки ‣ Заключение 74
  75. 75. basis.js - это удобные инструменты разработки 75
  76. 76. Граф зависимостей - простое приложение 76
  77. 77. Граф зависимостей - сложное приложение 77
  78. 78. ‣ выбраны услуги ‣ достаточно средств ‣ достаточно прав 78
  79. 79. Почему кнопка неактивна? 79
  80. 80. 80
  81. 81. Более подробно в докладе Романа Дворнова http://bit.ly/2fr9vXO 81
  82. 82. ‣ Прошлый опыт ‣ Компоненты ‣ Источники данных ‣ Локализация ‣ Трекинг событий ‣ Инструменты разработки ‣ Заключение 82
  83. 83. И все таки… Почему мне нужно использовать basis.js? 83
  84. 84. basis.js уже сейчас активно используется в production 84
  85. 85. Попробуйте basis.js и сделайте свои выводы 85
  86. 86. Как попробовать? 86
  87. 87. ‣ npm i -g basisjs-tools basis create app basis server 87
  88. 88. ‣ npm i -g basisjs-tools ‣ basis create app basis server 88
  89. 89. ‣ npm i -g basisjs-tools ‣ basis create app ‣ basis server 89
  90. 90. 90
  91. 91. Отлично! А минусы тоже есть? 91
  92. 92. ‣ Документация ‣ Есть что улучшать ‣ Сообщество (есть gitter) 92
  93. 93. Спасибо за внимание! 93

×