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
Мостовой Никита
• Frontend developer at HeadH...
HeadHunter
2
Различные сервисы
3
Дублирование кода  разные
решения одной задачи
4
Поддержка разных реализаций
блоков, выполняющих единые функции
5
Проблемы
• Дублирование кода
• Несколько реализаций одинаковых компонентов
• Долгий процесс изменения дизайна общих
интерф...
Решение?
• C 2012 года в HeadHunter существует репозиторий
интерфейсных компонентов 'bloko'
7
Старая архитектура
• Использование проекта - ручное копирование кода
• xsl для верстки компонентов
• jQuery Plugins систем...
JQuery Plugins
var $dropdown = $('.HH-Dropdown').dropdown();
$dropdown.on('selected', function(event, data) {

// jQuery р...
Стандартизация требований
• Браузерная поддержка: ie8+, android browser 2.4+
• Changelog + SemVer
• Файловая структура
10
Сборка проекта - gulp!
• Собираем JavaScript
• Компилируем templates (mustache —> mustache.js)
• Подготавливаем стили
• Сж...
Debian-пакеты?
+ Удобное управление релизами
— Может быть установлен только один пакет в
системе
— Невозможно релизить пак...
bloko - как npm-пакет
"dependencies": {

"bloko": "hhru/bloko#build-12.5.0"

}
13
github-релизы
14
"dependencies": {

"bloko": "hhru/bloko#build-12.5.0"

}
Структура компонентов
• Независимые AMD модули-фабрики
• Backbone-компоненты
• Mustache шаблоны
• БЭМ
15
Микрофреймворк Bloko-Components
Особенности:
• Единое место инициализации компонентов
• Стандартизация внешнего API модуле...
Микрофреймворк Bloko-Components
Решает задачи инициализации компонентов:
• при загрузке страницы
• в ajax ответах, содержа...
Bloko-Components
define(['backbone', 'underscore'], function(Backbone, _) {


var CustomSelect = Backbone.View.extend({

/...
API Bloko-Components
var Component = Components.build({create: (el,
params) => {}});
Components.init(document.body);



va...
Система якорей
<div class="container" >
<script data-name="ComponentName" data-params='

{

"params": true

}

'></script>...
Система якорей
<body class="page">

<div class="view">

<form class="form">

<!-- content -->

</form>

</div>

</body>
21
Система якорей
<body class="page">

<div class="view">

<form class="form">

<script
data-name="HH/Form"
data-params="{par...
Система якорей
23
Юнит-тесты
[15:53:46] Starting 'test'...
[15:53:49] Took 30 ms to run 5 tests. 5 passed, 0 failed.
[15:53:49] gulp-qunit: ...
Документация для
дизайнеров
25
Документация для
дизайнеров
26
… и разработчиков
27
Что мы получили?
• Универсальные компоненты
• Документированный код
• Увеличение скорости разработки и
прототипирования
• ...
Слабые стороны
• Лишняя асинхронность при инициализации
• Сложность полноценного перехода на другой фреймворк
• Разные шаб...
bem-components?
• Задачи, для решения которых хватает css,
решаются в bem-components чрезмерной логикой
на js
• Отсутствие...
Итого
• Выделяйте общие компоненты
• Большие проекты должны быть структурированы и
документированы
• Модульность и чистота...
Спасибо за внимание!
• Страница проекта с примерами: http://hhru.github.io/bloko/
• xnimor@ya.ru
• twitter: @xnimorz
32
Вопросы?
• Страница проекта с примерами: http://hhru.github.io/bloko/
• xnimor@ya.ru
• twitter: @xnimorz
33
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

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

Download to read offline

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

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

"Опыт разработки универсальной библиотеки визуальных компонентов в 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

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

Views

Total views

442

On Slideshare

0

From embeds

0

Number of embeds

8

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×