"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter", Никита Мостовой, MoscowJS 29
•
0 likes•468 views
При увеличении количества проектов в компании, разработчики сталкиваются с задачей унификации кодовой базы. Решением подобной задачи может быть библиотека, фреймворк или общий набор компонент. Такой инструмент позволит разработчикам сконцентрироваться только на новых задачах, избежать дублирования кода и повысить производительность. В HeadHunter с такой задачей столкнулись в 2014 году. Решением данной проблемы стало создание унифицированной библиотеки компонент, которая успешно используется на всех проектах HH. В своем докладе я хотел бы поделиться опытом развития библиотеки, проблемами, которые возникали при разработке, и их последовательным решением.
![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/85/HeadHunter-MoscowJS-29-18-320.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/85/HeadHunter-MoscowJS-29-24-320.jpg)
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter", Никита Мостовой, MoscowJS 29
- 1. Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter Мостовой Никита • Frontend developer at HeadHunter • twitter: @xnimorz • http://xnim.ru
- 2. HeadHunter 2
- 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
- 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"> <div class="view"> <form class="form"> <!-- content --> </form> </div> </body> 21
- 22. Система якорей <body class="page"> <div class="view"> <form class="form"> <script data-name="HH/Form" data-params="{param: value}"> <!-- content --> </form> </div> </body> 22
- 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
- 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