# Хакатон по БЭМ: проект «Приборная панель»

Привет!

Меня зовут [Саша Тиквач](https://ru.bem.info/authors/tikvach-alexandr).

На прошедшем хакатоне по БЭМ я и мой коллега [Антон Усманский](https://events.yandex.ru/lib/people/683392/) были менторами проекта «Приборная панель».

Результатами работы нашей команды мы хотим поделиться с вами сегодня.

![](https://img-fotki.yandex.ru/get/15595/44214498.bd/0_9bc26_a22a691c_XL.jpg)

## Как возникла идея проекта

Наша команда отвечает за поддержку шести библиотек блоков, почти в каждой из которых несколько стабильных версий — 2.x и 3.x. Как вы можете догадаться, поддерживать такое обилие библиотек непросто, поэтому очень многое у нас автоматизировано. 

Когда есть возможность в реальном времени следить за состоянием библиотек (сборка, тесты, валидация стиля кода, деплой статики и документации и т.д.), работать и жить становится намного легче. 

Именно поэтому мы решили разработать прототип «приборной панели», куда бы агрегировалась и выводилась информация по перечисленным выше состояниям от роботов.

Перед тем, как решить написать что-то свое, мы посмотрели на самые популярные решения в этой области, увидели их недочеты и хотели избавится от них в нашем проекте.

Прототипировать решили на наших БЭМ-технологиях.

## Подготовка

Мы хотели, чтобы работа в команде протекала достаточно распределенно и прозрачно.

Для этого подготовили каркас приложения, который умел делать самые базовые вещи для доски с виджетами. Сделали небольшие заметки про процесс разработки. Подготовили инфраструктуру, а именно настроили деплой на gh-pages и интегрировали инструменты проверки code-style, чтобы не получить солянку из кода. Также набросали [примерные макеты](https://github.com/spbd/specs).

За основу взяли [bem-core](https://github.com/bem/bem-core/) и [bem-components](https://github.com/bem/bem-components/), а также сопутствующие этим библиотекам технологии.

## Постановка задачи

Наша заготовка была очень базовой, и мы понимали, что нужно работать в этом направлении тоже.

В итоге у нас выкристаллизовались две основные задачи: **доработка движка** и **разработка виджетов**.

## Работа в команде и распределение задач

После презентации проекта на открытии хакатона к нам в команду записалось 3 человека: [Саша Баумгертнер](https://events.yandex.ru/lib/people/158322/), [Дима Белицкий](http://ru.bem.info/authors/belitsky-dmitry/) и [Ваня Скороходов](https://github.com/universome). 

Саша и Дима работают в Яндексе и на деле знают, что такое БЭМ. Ваня с БЭМом был знаком вскользь, но очень быстро во всем разобрался!

![](https://img-fotki.yandex.ru/get/16130/44214498.bd/0_9bc2a_e15caab6_XL.jpg)

Я дорабатывал движок, помогал ребятам и делал виджет, отображающий статусы сборок веток

![](https://img-fotki.yandex.ru/get/16135/127846884.248/0_f9b80_d7717861_XL.jpg)

Антон занимался [серверной](https://github.com/spbd/server) частью и общими архитектурными вопросами.

Ваня взялся дорабатывать движок и делать виджет, отображающий размер свободного места на стейджинге.

![](https://img-fotki.yandex.ru/get/16129/127846884.248/0_f9b81_a969af8b_XL.jpg)

Саша делал виджет про открытые PR.

![](https://img-fotki.yandex.ru/get/15557/127846884.248/0_f9b82_36b8dec3_XL.jpg)

Дима занялся виджетом про ревьюверов в текущем спринте.

![](https://img-fotki.yandex.ru/get/15557/127846884.248/0_f9b89_3a72cb51_XL.jpg)

## Результаты

Результаты работы нашей команды презентовали в финале хакатона, где каждая команда рассказывала и показывала то, чем занималась два дня. Кажется, мы неплохо потрудились, потому что стали первой командой по [результатам голосования участников](http://instagram.com/p/vdvuzDjYhP/?modal=true), набрав 11 голосов. 

![](https://img-fotki.yandex.ru/get/16181/44214498.bd/0_9bc29_8f03630f_XL.jpg)

Ребята очень старались закончить все и в срок, за что им огромное спасибо!

Мы успели сделать все виджеты, а также допилить движок до состояния, умеющего их отображать. 

Однако, из-за малого количества времени сделали все, к сожалению, не совсем в том качестве и виде, в котором хотели.

![](https://img-fotki.yandex.ru/get/15522/127846884.248/0_f9b7f_6f22c454_XL.jpg)

На хакатон мы пришли **написать прототип проекта и попробовать его в деле**. Эту задачу мы успешно реализовали.

Во время разработки увидели очень много сложных мест, где теперь, благодаря командной работе на хакатоне, знаем, как сделать по-другому, улучшить, расширить. В будущем знания и опыт, полученные здесь, помогут нам не наступить на грабли и сделать все лучше.

Написанный проект мы решили не закапывать и оставить на уровне прототипа, чтобы вы смогли использовать код в качестве наглядного примера и пересматривать наш опыт в процессе подготовки похожих задач и проектов.

Огранизация, в которой велась разработка — [github.com/spbd](https://github.com/spbd).

Посмотреть на dashboard можно [здесь](http://spbd.github.io/builds/stable/).

Прототипирование — важная часть разработки, которая требует времени и сил, но в то же время помогает смотреть на вещи по-разному. Благодаря хакатону время на нее нашлось!

Ну, а мой совет вам — не ждите хакатонов, прототипируйте больше, учитесь и смотрите на проекты по-новому!

Спасибо вам огромное, и **stay BEMed!**