Войти с помощью github
Форум /

Когда мы скрещивали БЭМ и .NET в прошлый раз, на выходе получили зачатки библиотеки для bemhtml-шаблонизации в приложениях ASP.NET MVC. За прошедший месяц библиотека выросла в NuGet пакет, содержащий всё необходимое для БЭМ-разработки на .NET.

Что изменилось

  1. Библиотека переименовалась в System.Web.Bem, по аналогии с System.Web.Mvc
  2. Вместо gulp для сборки теперь используется enb. Как я и писал в прошлый раз, gulp-плагины для БЭМ-сборки еще довольно "сырые". Кроме того, их код написан на ES6 (используются промисы, новый синтаксис и т.д.). Из-за этого при запуске gulp-сборки в Visual Studio есть особенности, из-за которых настройка сборки кажется очень сложной неподготовленному человеку. Решено было выпилить gulp и заменить его на enb, который хорошо протестирован и не требует поддержки ES6.
  3. Появился механизм мэппинга http-запросов на БЭМ бандлы и его настройки вынесены в конфиг приложения (Web.config). Секция конфига должна называться bemSettings. C её помощью можно задать путь к папке с бандлами (по умолчанию ~/Bem/desktop.bundles) и используемый алгоритм выбора бандла для текущего запроса. Пример:

    <bemSettings RootDir="~/Bem/public" Mapper="Single" />
    
  4. Добавлены хелперы для view, с помощью которых можно внутри Razor-view отрендерить bemhtml шаблон. Например, на этой тестовой страничке начало и конец страницы отрендерены с помощью Razor (и там кодом на C# выводится текущее время), а блок с селекторами отрендерен с помощью bemhtml (в шаблоне это выглядит так).
  5. Всё это дело оформлено в виде NuGet пакета и опубликовано. При установке пакета
    • в проект из npm ставятся enb и нужные для сборки enb-технологии,
    • добавляется папка Bem с файловой структурой БЭМ проекта и конфигом для enb,
    • в конфиг MsBuild добавляется дополнительный этап сборки - запуск enb; таким образом при компиляции C# в Visual Studio выполняется также и сборка БЭМ-бандлов
    • в проект подключается C# библиотека для серверной шаблонизации
  6. В NuGet выложены библиотеки блоков bem-core и bem-components

    Быстрый старт

  7. Устанавливаем в свой проект ASP.NET MVC пакет System.Web.Bem. Это можно сделать через UI менеджера пакетов (не забываем отметить галочку "Include prerelease") или через консоль: nuget install System.Web.Bem -Prerelease.
  8. Добавляем нужные блоки в папку Bem/desktop.blocks и добавляем их в декларацию Bem/desktop.bundles/default/default.bemdecl.js (по умолчанию в настройках указано собирать весь проект в один бандл с именем default).
  9. В желаемом методе контроллера возвращаем экземпляр класса System.Web.Bem.BemhtmlResult и передаем ему в конструкторе bemjson (например, вот так)
  10. Собираем проект в Visual Studio, запускаем, открываем нужный url и наслаждаемся видом наших блоков :)
  11. Если очень хочется, можно подключить bem-components и использовать блоки оттуда. Подключение происходит аналогичным образом, только название пакета другое - bem-components. После установки пакета файлы блоков будут добавлены в папку Bem/libs. Нужно подключить папки с файлами как уровни переопределения в конфиг enb (должно получиться примерно так).

    Что дальше

Как видите, часть пунктов из прошлого плана дальнейших действий выполнено. Но не все. По-прежнему планирую разобраться с отладкой серверных шаблонов и померять производительность. Также хочется написать хелперы для контроллеров, чтобы не писать каждый раз new BemhtmlResult(...).

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