Download as PDF, PPTX
![Bloko-Components
define(['backbone', 'underscore'], function(Backbone, _) {
var CustomSelect = Backbone.View.extend({
//code
}
return Components.build({
defaults: {
disabled: false,
search: false,
},
create: function(element, params) {
return new CustomSelect(_.extend({el: element}, params));
}
});
}
18](https://image.slidesharecdn.com/blokomoscowjs-160331165513/75/HeadHunter-MoscowJS-29-18-2048.jpg)
![Юнит-тесты
[15:53:46] Starting 'test'...
[15:53:49] Took 30 ms to run 5 tests. 5 passed, 0 failed.
[15:53:49] gulp-qunit: ✔ QUnit assertions all passed in
LoadingSetter.html
[15:53:51] Took 918 ms to run 4 tests. 4 passed, 0 failed.
[15:53:51] gulp-qunit: ✔ QUnit assertions all passed in
autogrow.html
[15:53:52] Took 121 ms to run 11 tests. 11 passed, 0 failed.
[15:53:52] gulp-qunit: ✔ QUnit assertions all passed in
components.html
[15:53:53] Took 28 ms to run 9 tests. 9 passed, 0 failed.
[15:53:53] gulp-qunit: ✔ QUnit assertions all passed in
cookies.html
[15:53:55] Took 765 ms to run 18 tests. 18 passed, 0 failed.
[15:53:55] gulp-qunit: ✔ QUnit assertions all passed in
customSelect.htm
24](https://image.slidesharecdn.com/blokomoscowjs-160331165513/75/HeadHunter-MoscowJS-29-24-2048.jpg)
Uploaded byMoscowJS
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter", Никита Мостовой, MoscowJS 29
Документ описывает опыт разработки универсальной библиотеки визуальных компонентов 'bloko' в компании headhunter. Основное внимание уделяется проблемам, связанным с дублированием кода и сложностями при изменении дизайна, и предлагает решения, такие как стандартизация и использование микро-фреймворка для улучшения процессов разработки. Указаны преимущества, такие как документированный код и ускорение разработки, а также недостатки, включая сложности при переходе на другие фреймворки.
More Related Content
Similar to "Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter", Никита Мостовой, MoscowJS 29
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter", Никита Мостовой, MoscowJS 29
- 1. Опыт разработки универсальной библиотекивизуальных компонентов в HeadHunter Мостовой Никита • Frontend developer at HeadHunter • twitter: @xnimorz • http://xnim.ru
- 2.
- 3.
- 4. Дублирование кода разные решения одной задачи 4
- 5. Поддержка разных реализаций блоков,выполняющих единые функции 5
- 6. Проблемы • Дублирование кода •Несколько реализаций одинаковых компонентов • Долгий процесс изменения дизайна общих интерфейсов • Увеличение количества проектов 6
- 7. Решение? • C 2012года в HeadHunter существует репозиторий интерфейсных компонентов 'bloko' 7
- 8. Старая архитектура • Использованиепроекта - ручное копирование кода • xsl для верстки компонентов • jQuery Plugins система 8
- 9. JQuery Plugins var $dropdown= $('.HH-Dropdown').dropdown(); $dropdown.on('selected', function(event, data) { // jQuery работа с событиями }); $dropdown.show(); // jQuery метод или API компонента? 9
- 10. Стандартизация требований • Браузернаяподдержка: ie8+, android browser 2.4+ • Changelog + SemVer • Файловая структура 10
- 11. Сборка проекта -gulp! • Собираем JavaScript • Компилируем templates (mustache —> mustache.js) • Подготавливаем стили • Сжимаем изображения, svgo • Собираем и выкладываем на github.io документацию 11
- 12. Debian-пакеты? + Удобное управлениерелизами — Может быть установлен только один пакет в системе — Невозможно релизить пакеты, зависящие от разных версий библиотеки 12
- 13. bloko - какnpm-пакет "dependencies": { "bloko": "hhru/bloko#build-12.5.0" } 13
- 14.
- 15. Структура компонентов • НезависимыеAMD модули-фабрики • Backbone-компоненты • Mustache шаблоны • БЭМ 15
- 16. Микрофреймворк Bloko-Components Особенности: • Единоеместо инициализации компонентов • Стандартизация внешнего API модулей 16
- 17. Микрофреймворк Bloko-Components Решает задачиинициализации компонентов: • при загрузке страницы • в ajax ответах, содержащих html 17
- 18. Bloko-Components define(['backbone', 'underscore'], function(Backbone,_) { var CustomSelect = Backbone.View.extend({ //code } return Components.build({ defaults: { disabled: false, search: false, }, create: function(element, params) { return new CustomSelect(_.extend({el: element}, params)); } }); } 18
- 19. API Bloko-Components var Component= Components.build({create: (el, params) => {}}); Components.init(document.body); var component = Components.make( Component, DomElement, params ); 19
- 20. Система якорей <div class="container"> <script data-name="ComponentName" data-params=' { "params": true } '></script> <div/> 20 Специальные метки в html с именем и параметрами компонента:
- 21. Система якорей <body class="page"> <divclass="view"> <form class="form"> <!-- content --> </form> </div> </body> 21
- 22. Система якорей <body class="page"> <divclass="view"> <form class="form"> <script data-name="HH/Form" data-params="{param: value}"> <!-- content --> </form> </div> </body> 22
- 23.
- 24. Юнит-тесты [15:53:46] Starting 'test'... [15:53:49]Took 30 ms to run 5 tests. 5 passed, 0 failed. [15:53:49] gulp-qunit: ✔ QUnit assertions all passed in LoadingSetter.html [15:53:51] Took 918 ms to run 4 tests. 4 passed, 0 failed. [15:53:51] gulp-qunit: ✔ QUnit assertions all passed in autogrow.html [15:53:52] Took 121 ms to run 11 tests. 11 passed, 0 failed. [15:53:52] gulp-qunit: ✔ QUnit assertions all passed in components.html [15:53:53] Took 28 ms to run 9 tests. 9 passed, 0 failed. [15:53:53] gulp-qunit: ✔ QUnit assertions all passed in cookies.html [15:53:55] Took 765 ms to run 18 tests. 18 passed, 0 failed. [15:53:55] gulp-qunit: ✔ QUnit assertions all passed in customSelect.htm 24
- 25.
- 26.
- 27.
- 28. Что мы получили? •Универсальные компоненты • Документированный код • Увеличение скорости разработки и прототипирования • Юнит-тесты 28
- 29. Слабые стороны • Лишняяасинхронность при инициализации • Сложность полноценного перехода на другой фреймворк • Разные шаблонизаторы на проектах (xslt | jinja/nunjucks | mustache) 29
- 30. bem-components? • Задачи, длярешения которых хватает css, решаются в bem-components чрезмерной логикой на js • Отсутствие нужных нам элементов интерфейса • Многие элементы интерфейса должны вести себя не так, как в текущей реализации в bem- components 30
- 31. Итого • Выделяйте общиекомпоненты • Большие проекты должны быть структурированы и документированы • Модульность и чистота компонентов - важная часть проекта 31
- 32. Спасибо за внимание! •Страница проекта с примерами: http://hhru.github.io/bloko/ • xnimor@ya.ru • twitter: @xnimorz 32
- 33. Вопросы? • Страница проектас примерами: http://hhru.github.io/bloko/ • xnimor@ya.ru • twitter: @xnimorz 33