Привет!

Меня зовут Коля Ильченко и вместе со своим коллегой Андреем Кузнецовым на хакатоне мы представляли команду БЭМ-форума.

Хотим поделится впечатлениями о прошедшем хакатоне по БЭМ и немного рассказать про результаты, которых нам удалось достичь вместе с командой.

Команда

Хочу немного рассказать о команде:

• Коля Ильченко - ментор, работаю разработчиком интерфейсов (в простонародье фронтэнд разработчик) в Яндексе с 2013 года. В данный момент разрабатываю сайт bem.info и БЭМ-форум, знаю полный БЭМ стек, опыт веб разработки более 4 лет. В твиттере @tavriaforever.
• Андрей Кузнецов - мой напарник по команде в Яндексе, разработчик интерфейсов, но с уклоном в серверную часть, которая написана на node.js. Имеет опыт серверной разработки на Java и Ruby. О временах, когда Андрей начал писать код, уже пишут в учебниках истории. В твиттере @kuznetsov48.
• Михаил Шукшин, на момент хакатона работал фронтэнд разработчиком в «Sapato.ru». Мне, как ментору, понравилось работать с Мишей. Он большой молодец. Не имея практического опыта разработки на БЭМ-стеке, легко влился в работу и сложностей при написании кода не испытывал. Большое ему спасибо за помощь, все задачи, которые он планировал - были выполнены.
• Иван Воищев - один из активнейших членов БЭМ-сообщества, приехал к нам на мероприятие из Воронежа. Работает в веб-студии "Мануфактура". Является БЭМ-евангелистом в студии и смог убедить всех перейти на использование полного БЭМ-стека при разработке сайтов. Насколько мне известно, от перехода на полный стек БЭМ студия получила досточно профита в плане времени выполнения заказа и распараллеливания рабочего процесса между серверной и клиентской разработкой. На хакатоне ему досталась сложная задача. И Ваня до конца хакатона «колдовал» над ней, пройдя все «круги ада», с которыми бы пришлось столкнулся нам, до конца. Спасибо большое за помощь, работать вместе было весело и продуктивно! Ванин код станет для нас основой при доведении задачи до продакшена.
• Антон Виноградов, работает в московском подразделении Альфа-Лаб разработчиком интерфейсов. Занимается внедрением и развитием БЭМ-методологии и даже папки именует по БЭМ. Является активным членом БЭМ-сообщества, регулярно выступает на мероприятиях, посвященные БЭМ, разрабатывает ряд open-source библиотек блоков БЭМ. Уже имея приличный опыт разработки на БЭМ-стеке, сразу принялся за выполнение задач. В процессе совместной работы предложил ряд улучшений. Мы обсудили много интересных моментов БЭМ-разработки. Как ментор результатом доволен. Очень радует, что в БЭМ-сообществе есть люди подобные Антону и Ване. В Твиттере @AWinogradov.
• Юрий Малахов, на момент хакатона работал в ООО «Айтаргет», г.Санкт-Петербург. Имеет опыт как серверной, так и клиентской разработки. В ходе хакатона поставленную задачу выполнил. Юра — приятный человек и интересный собеседник, вместе работать понравилось.
• Андрей Мелихов, на момент хакатона разработчик в Яндекс.Деньгах. С полным БЭМ-стеком работает на своем сервисе и уверенно пишет код под node.js. Вместе с Андреем Кузнецовым они разрабатывали серверное решение для форума. Андрей выложился на 200%, не уставал писать код даже ночью, за что ему большое человеческое спасибо, настоящий яндексоид!

Подготовка

БЭМ-форум — живой, активно развивающийся проект на сайте bem.info.

С придумыванием задач проблем не возникало. У нас как обычно есть очень много хотелок, а рук на все не хватает. Единственным сложным моментом был процесс организации коллективного «кодинга».

Здесь мы с Андреем решили все организовать следующим образом: условно разделили задачи на 2 группы — с уклоном на клиентскую и с уклоном на серверную часть. После чего провели опрос команды, кто в чем силен и какие фичи для проекта хотел бы запилить.

Задачи быстро нашли исполнителей, и мы принялись за работу.

Задачи

В процессе обсуждение мы выделили ряд обособленных задач для каждого члена команды:

Сортировка постов по аналогии с гитхабом

Нам с первого дня работы форума стало понятно, что без сортировки жить не удобно. В это время на гитхабе уже существовал отличный вариант сортировки. Мы решили не выдумывать велосипед и сделали по аналогии с гитхабом. Для решения задачи был взят блок select из bem-componenents, который мы наполнили js-магией и получили возможность сортировать по шести параметрам.

Превью .md для постов и комментариев

Форум в качестве источника данных использует issues гитхаба, где для оформления контента используется маркдаун. Так по началу было и у нас. Но в процессе, когда пользователь писал и оформлял текст в маркдаун блоки, не было возможности сделать предпросмотр. Это не очень удобно. За время хакатона мы решили сделать превью маркдаун-кода, что с успехом у нас получилось. В процессе работы была использована удобная БЭМ-библиотека для оформления контента bem-content, мейнтейнером которой является Антон Виноградов, один из участников нашей команды.

Пагинация комментариев

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

Реализация динамических заголовков для постов

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

Рейтинг постов

Владимир Гриненко однажды подкинул идею рейтинга постов на форуме на основе гитхабовского emoji «:+1». Идея классная, так как она поможет поддерживать автора поста в тех или иных ситуациях. Мы взялись за нее на хакатоне, но изначально неверно оценили задачу. Только в процессе осознали, сколько условий и исключений может быть, когда считается рейтинг. К сожалению, за время, отведенное на хакатон, нам не удалось добить задачу, но огромный пласт проделанной работы станет заделом для доведения ее до продакшена. Задачу планируем выкатить в январе-феврале 2015 года.

Авторизация

Обдумывая задачу про базу данных для форума, подумали, что было бы неплохо также сделать возможность авторизовываться не только через гитхаб. Для реализации задачи взяли passport.js. Он поддерживает 140 провайдеров. Помимо серверной части нужно было работать с БЭМ-стеком, а также реализовать панель пользователя для отображении информации и возможности входа/выхода. Задача была успешно выполнена и передана Андрею и Юре для дальнейшего использования в задаче про базу данных.

Поддержка баз данных через ORM в качестве источника данных

Андрей Кузнецов и Юра Малахов занялись задачей про альтернивный источник данных для форума - базой данных. Чтобы форум был более гибким, решили не завязываться на одной из баз, а использовать один из node.js модулей для работы с разными базами с помощью ORM. Задача потребовала перебрать весь двигатель форума, провести рефакторинг, учесть все моменты по структуре данных и сделать еще ряд подзадач. Ребята работали весь день, потом всю ночь и до самого окончания не отходили от решения.

Рабочий процесс

Как только задачи были распределены, все начали щелкать по клавиатурам ноутбуков. К счастью, у всех в команде были «макбуки», поэтому время на настройку окружения тратить не пришлось. В процессе работы мы писали код, обменивались хорошим настроением и новостями из мира IT, поздравляли Евгения @sipayrt Константинова с днем рождения, говорили про БЭМ, лепили на доску стикеры выполненных задач, готовились к презентации, вместе со всей командой представляли наши результаты и вместе получали подарки.

Результаты

Результат первого БЭМ хакатона очень порадовал нас с Андреем. Мы даже не надеялись, что успеем написать столько строчек полезного кода.

К моменту написания этого поста (январь 2015), часть решений удалось выкатить в продакшен сайта bem.info. Однако ограниченное время хакатона не дало возможности довести до конца часть сложных, требующих больше времени задач, таких как авторизация через passport.js , использование базы данных вместо гитхаба для хранения данных.

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

Все же большую часть нам удалось сделать и подготовить для сайта. Мы очень довольны этим.

Что же мы закончили и выкатили наружу?

Как вы могли заметить, на форуме появилась удобная сортировка постов с помощью селекта из bem-components. Вы можете выбрать один из шести вариантов сортировки.

Кроме этого, уже сейчас при написании поста или комментария вы можете увидеть его превью. Это дает возможность быть уверенным, что вы все правильно написали, а форматирование будет такое, как вы и задумывали.

Cделанная задача по подстановке заголовка для отдельного поста уже сейчас помогает форуму на bem.info находить новых друзей в поисковых системах. Теперь можно различить главную страницу и страницы отдельных постов.

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

Итог

Нам очень понравился формат БЭМ-хакатона. Место проведения и общая атмосфера, в которой пребывали все участники хакатона, была замечательной. Порадовал уровень приглашенных участников, количество людей, настолько неравнодушных к веб-разработке при использовании техноплатформы БЭМ.

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

Общайтесь, делитесь ответами и задавайте вопросы на БЭМ-форуме. Stay BEMed!