Когда мы скрещивали БЭМ и .NET в прошлый раз, на выходе получили зачатки библиотеки для bemhtml-шаблонизации в приложениях ASP.NET MVC. За прошедший месяц библиотека выросла в NuGet пакет, содержащий всё необходимое для БЭМ-разработки на .NET.
Что изменилось
- Библиотека переименовалась в
System.Web.Bem
, по аналогии сSystem.Web.Mvc
- Вместо gulp для сборки теперь используется enb. Как я и писал в прошлый раз, gulp-плагины для БЭМ-сборки еще довольно "сырые". Кроме того, их код написан на ES6 (используются промисы, новый синтаксис и т.д.). Из-за этого при запуске gulp-сборки в Visual Studio есть особенности, из-за которых настройка сборки кажется очень сложной неподготовленному человеку. Решено было выпилить gulp и заменить его на enb, который хорошо протестирован и не требует поддержки ES6.
Появился механизм мэппинга http-запросов на БЭМ бандлы и его настройки вынесены в конфиг приложения (
Web.config
). Секция конфига должна называтьсяbemSettings
. C её помощью можно задать путь к папке с бандлами (по умолчанию~/Bem/desktop.bundles
) и используемый алгоритм выбора бандла для текущего запроса. Пример:<bemSettings RootDir="~/Bem/public" Mapper="Single" />
- Добавлены хелперы для view, с помощью которых можно внутри Razor-view отрендерить bemhtml шаблон. Например, на этой тестовой страничке начало и конец страницы отрендерены с помощью Razor (и там кодом на C# выводится текущее время), а блок с селекторами отрендерен с помощью bemhtml (в шаблоне это выглядит так).
- Всё это дело оформлено в виде NuGet пакета и опубликовано. При установке пакета
- в проект из npm ставятся enb и нужные для сборки enb-технологии,
- добавляется папка Bem с файловой структурой БЭМ проекта и конфигом для enb,
- в конфиг MsBuild добавляется дополнительный этап сборки - запуск enb; таким образом при компиляции C# в Visual Studio выполняется также и сборка БЭМ-бандлов
- в проект подключается C# библиотека для серверной шаблонизации
- В NuGet выложены библиотеки блоков bem-core и bem-components
Быстрый старт
- Устанавливаем в свой проект ASP.NET MVC пакет System.Web.Bem. Это можно сделать через UI менеджера пакетов (не забываем отметить галочку "Include prerelease") или через консоль:
nuget install System.Web.Bem -Prerelease
. - Добавляем нужные блоки в папку
Bem/desktop.blocks
и добавляем их в декларациюBem/desktop.bundles/default/default.bemdecl.js
(по умолчанию в настройках указано собирать весь проект в один бандл с именемdefault
). - В желаемом методе контроллера возвращаем экземпляр класса
System.Web.Bem.BemhtmlResult
и передаем ему в конструкторе bemjson (например, вот так) - Собираем проект в Visual Studio, запускаем, открываем нужный url и наслаждаемся видом наших блоков :)
- Если очень хочется, можно подключить bem-components и использовать блоки оттуда. Подключение происходит аналогичным образом, только название пакета другое -
bem-components
. После установки пакета файлы блоков будут добавлены в папкуBem/libs
. Нужно подключить папки с файлами как уровни переопределения в конфиг enb (должно получиться примерно так).Что дальше
Как видите, часть пунктов из прошлого плана дальнейших действий выполнено. Но не все. По-прежнему планирую разобраться с отладкой серверных шаблонов и померять производительность. Также хочется написать хелперы для контроллеров, чтобы не писать каждый раз new BemhtmlResult(...)
.
Вы же посмотрите демо-странички и поиграйтесь с БЭМ на примере какого-нибудь небольшого проекта. Буду рад, если эта моя штука кому-то будет полезна и с удовольствием отвечу на любые вопросы.
Небольшое дополнение про мэппинг запросов на бандлы
Чтобы где-то осталось описание.
Возможны 3 варианта мэппинга:
DefaultBundle
(по умолчаниюdefault
)Название бандла определяется по названию контроллера: слова разделяются дефисами, приводятся к нижнему регистру, удаляется суффикс "controller" и добавляется префикс
p-
(например,MainPageController
→p-main-page
). Есть идея еще добавить возможность настройки названия бандла для контроллера через C# атрибуты.Mapper
:Класс мэппера должен быть унаследован от
System.Web.Bem.BundleMappers.Mapper
и реализовывать методabstract string GetBundleName(ControllerContext context)
, получающий на вход контекст запроса и возвращающий название бандла. Также, при желании, можно переопределить методvirtual string GetBundlePath(string bundleName)
, возвращающий по названию бандла путь к файлу с bemhtml шаблонами (по умолчанию формируется путь<RootDir>\<bundleName>\<bundleName>.bemhtml.js
)Крутотень!
огонь!
а bemhtml сделан на основе портирования нового bem-xjst?
@veged, да, см. https://github.com/dima117/bemtest-net/blob/master/WebApplication/package.json
@veged, там в .NET процессе запускается нода. Соответственно, выполняется та версия bem-xjst, которая была использована при сборке шаблонов.
Спасибо!
Давай переводить на английский и публиковать во всех наших каналах.
@vithar Перевели, можно публиковать: https://github.com/dotnet-bem/system-web-bem/blob/master/README.md