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.
Upcoming SlideShare
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Basis.js - Production Ready SPA Framework

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

264

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×