2-4 июля в Яндексе проходил внутренний хакатон по БЭМ-инструментам. Наша команда занималась не совсем обычной задачей - сделать БЭМ-инфраструктуру для платформы .NET (ASP.NET MVC). Хотя это и нельзя будет использовать в Яндексе (в связи с отсутствием веб-проектов на .NET), задача кажется важной, т.к. без этого многие люди не могут использовать БЭМ.

Для возможности использования БЭМ-инструментов на .NET нужно две вещи:

1. написать .NET библиотеку для BEMHTML-шаблонизации на стороне сервера
2. сделать что-то вроде project-stub для .NET проектов - заготову файловой структуры проекта и преднастроенную сборку БЭМ-бандлов.

Для серверной шаблонизации мы использовали библиотеку edgejs, с помощью которой внутри .NET процесса запускается node.js и для шаблонизации используется полноценный bem-xjst. Это круто, потому что на сервере можно использовать те же самые шаблоны, что и на клиенте. Для сборки бандлов мы использовали enb, а распространять всё это планировали с помощью менеджера пакетов NuGet.

Задачи на хакатон

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

Отладка шаблонов

Самой сложной оказалась часть с отладкой шаблонов - к сожалению, эту задачу решить не получилось. Мы попробовали использовать в качестве отладчика Visual Studio и Node Inspector. В Visual Studio получилось остановиться в нужном месте и даже видеть значения переменных, но при этом не показывался исходный код. При подключении через Node Inspector возникала странная, абсолютно не информативная ошибка. Несмотря на неудачу и скудную документацию про отладку в EDGE.js, мы не оставим этот вопрос и обязательно что-нибудь придумаем.

Тестирование производительности

Помимо отладки, мы попробовали померить производительность серверной шаблонизации. Интересно было сравнить шаблонизацию BEMHTML на .NET с JavaScript реализацией и с шаблонами на Razor. В качестве тестовых данных использовали объект с 3 уровнями вложенности: корневой объект → внутри 100 групп → внутри каждой группы 3 элемента (вот полный json). Тестовые шаблоны должны были вывести корневой элемент как div, группы как ul и элементы групп в тэге li. Вы можете посмотреть шаблоны для BEMHTML и шаблоны для Razor. Во время тестов шаблонизацию запускали 1000 раз подряд. Результаты:

• самый быстрый - Razor (~380ms),
• BEMHTML в 6 раз медленнее (~2300ms)
• BEMHTML, запускаемый через .NET - еще в 1.5 раза медленнее (~3500ms)

В принципе, примерно этого мы и ожидали, но, в любом случае, нужно было убедиться. Хотя и оказалось, что BEMHTML в .NET медленнее остальных вариантов, в абсолютных числах результаты получились вполне приемлемые и, кажется, такое замедление шаблонизации - не очень большая плата за возможности, которые дает BEMHTML.

Демо-приложение

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

Результат можете посмотреть по адресу http://bemtest.ecm7.ru, исходный код - здесь. Пример демонстрирует основные моменты: серверную шаблонизацию, отправку данных формы на бэкенд, подключение bem-components.

Релиз

И, наконец, последняя по порядку, но не по важности задача - выпустить релизную версию пакета. За время хакатона мы сделали много мелких доработок, исправили несколько багов, переписали неудобные места и написали документацию (почитайте, вроде классно получилось). В результате мы опубликовали новую версию в NuGet и её уже можно попробовать!

Команда

В заключение скажу пару слов о нашей команде. Если честно, я не был уверен, что эта тема интересна кому-то, кроме меня (всё же задача, мягко говоря, необычная для Яндекса). Но, несмотря на это, у нас собралась отличная команда: Костя Гладких, Саша Потапенко и Рома Ширин. Костя занимался тестами производительности и отладкой шаблонов, Рома и Саша писали демо-приложение, а я помогал Косте с тестами и писал документацию. Ребята, я вам очень благодарен за то, что поддержали меня. Вы очень круты!

Что дальше?

Конечно же на этом мы останавливаться не собираемся. В ближайших планах:

• разобраться с отладкой;
• перевести хелп на английский;
• причесать демо-приложение: сделать верстку формы поприятнее и выпилить лишние стили со страницы визитки, написать readme с кратким пояснением, что где смотреть;
• написать пост на хабр и, вообще, рассказать про эту штуку другими способами.

Спасибо за внимание!