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.

"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter", Никита Мостовой, MoscowJS 29

393 views

Published on

При увеличении количества проектов в компании, разработчики сталкиваются с задачей унификации кодовой базы. Решением подобной задачи может быть библиотека, фреймворк или общий набор компонент. Такой инструмент позволит разработчикам сконцентрироваться только на новых задачах, избежать дублирования кода и повысить производительность.
В HeadHunter с такой задачей столкнулись в 2014 году. Решением данной проблемы стало создание унифицированной библиотеки компонент, которая успешно используется на всех проектах HH. В своем докладе я хотел бы поделиться опытом развития библиотеки, проблемами, которые возникали при разработке, и их последовательным решением.

Published in: Software
  • Be the first to comment

  • Be the first to like this

"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter", Никита Мостовой, MoscowJS 29

  1. 1. Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter Мостовой Никита • Frontend developer at HeadHunter • twitter: @xnimorz • http://xnim.ru
  2. 2. HeadHunter 2
  3. 3. Различные сервисы 3
  4. 4. Дублирование кода разные решения одной задачи 4
  5. 5. Поддержка разных реализаций блоков, выполняющих единые функции 5
  6. 6. Проблемы • Дублирование кода • Несколько реализаций одинаковых компонентов • Долгий процесс изменения дизайна общих интерфейсов • Увеличение количества проектов 6
  7. 7. Решение? • C 2012 года в HeadHunter существует репозиторий интерфейсных компонентов 'bloko' 7
  8. 8. Старая архитектура • Использование проекта - ручное копирование кода • xsl для верстки компонентов • jQuery Plugins система 8
  9. 9. JQuery Plugins var $dropdown = $('.HH-Dropdown').dropdown(); $dropdown.on('selected', function(event, data) {
 // jQuery работа с событиями
 });
 $dropdown.show(); // jQuery метод или API компонента? 
 
 9
  10. 10. Стандартизация требований • Браузерная поддержка: ie8+, android browser 2.4+ • Changelog + SemVer • Файловая структура 10
  11. 11. Сборка проекта - gulp! • Собираем JavaScript • Компилируем templates (mustache —> mustache.js) • Подготавливаем стили • Сжимаем изображения, svgo • Собираем и выкладываем на github.io 
 документацию 11
  12. 12. Debian-пакеты? + Удобное управление релизами — Может быть установлен только один пакет в системе — Невозможно релизить пакеты, зависящие от разных версий библиотеки 12
  13. 13. bloko - как npm-пакет "dependencies": {
 "bloko": "hhru/bloko#build-12.5.0"
 } 13
  14. 14. github-релизы 14 "dependencies": {
 "bloko": "hhru/bloko#build-12.5.0"
 }
  15. 15. Структура компонентов • Независимые AMD модули-фабрики • Backbone-компоненты • Mustache шаблоны • БЭМ 15
  16. 16. Микрофреймворк Bloko-Components Особенности: • Единое место инициализации компонентов • Стандартизация внешнего API модулей 16
  17. 17. Микрофреймворк Bloko-Components Решает задачи инициализации компонентов: • при загрузке страницы • в ajax ответах, содержащих html 17
  18. 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. 19. API Bloko-Components var Component = Components.build({create: (el, params) => {}}); Components.init(document.body);
 
 var component = Components.make(
 Component, 
 DomElement, 
 params
 );
 19
  20. 20. Система якорей <div class="container" > <script data-name="ComponentName" data-params='
 {
 "params": true
 }
 '></script> <div/> 20 Специальные метки в html с именем и параметрами компонента:
  21. 21. Система якорей <body class="page">
 <div class="view">
 <form class="form">
 <!-- content -->
 </form>
 </div>
 </body> 21
  22. 22. Система якорей <body class="page">
 <div class="view">
 <form class="form">
 <script data-name="HH/Form" data-params="{param: value}">
 <!-- content -->
 </form>
 </div>
 </body>
 22
  23. 23. Система якорей 23
  24. 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. 25. Документация для дизайнеров 25
  26. 26. Документация для дизайнеров 26
  27. 27. … и разработчиков 27
  28. 28. Что мы получили? • Универсальные компоненты • Документированный код • Увеличение скорости разработки и прототипирования • Юнит-тесты 28
  29. 29. Слабые стороны • Лишняя асинхронность при инициализации • Сложность полноценного перехода на другой фреймворк • Разные шаблонизаторы на проектах (xslt | jinja/nunjucks | mustache) 29
  30. 30. bem-components? • Задачи, для решения которых хватает css, решаются в bem-components чрезмерной логикой на js • Отсутствие нужных нам элементов интерфейса • Многие элементы интерфейса должны вести себя не так, как в текущей реализации в bem- components 30
  31. 31. Итого • Выделяйте общие компоненты • Большие проекты должны быть структурированы и документированы • Модульность и чистота компонентов - важная часть проекта 31
  32. 32. Спасибо за внимание! • Страница проекта с примерами: http://hhru.github.io/bloko/ • xnimor@ya.ru • twitter: @xnimorz 32
  33. 33. Вопросы? • Страница проекта с примерами: http://hhru.github.io/bloko/ • xnimor@ya.ru • twitter: @xnimorz 33

×