Продолжаем скрещивать БЭМ и .NET

dima117 commented 8 years ago

Когда мы скрещивали БЭМ и .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(...).

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

dima117 commented 8 years ago

Небольшое дополнение про мэппинг запросов на бандлы

Чтобы где-то осталось описание.

Возможны 3 варианта мэппинга:

один бандл на всё приложение - его название можно задать в параметре DefaultBundle (по умолчанию default)

<bemSettings Mapper="Single" DefaultBundle="index" />

отдельный бандл для каждого серверного контроллера

<bemSettings Mapper="ByController" />

Название бандла определяется по названию контроллера: слова разделяются дефисами, приводятся к нижнему регистру, удаляется суффикс "controller" и добавляется префикс p- (например, MainPageController → p-main-page). Есть идея еще добавить возможность настройки названия бандла для контроллера через C# атрибуты.

кастомный мэппер - есть возможность написать свой класс мэппера и указать его название в параметре Mapper:

<bemSettings Mapper="MyApplication.MyNamespace.InnerNamespace.MyMapperClass" />

Класс мэппера должен быть унаследован от System.Web.Bem.BundleMappers.Mapper и реализовывать метод abstract string GetBundleName(ControllerContext context), получающий на вход контекст запроса и возвращающий название бандла. Также, при желании, можно переопределить метод virtual string GetBundlePath(string bundleName), возвращающий по названию бандла путь к файлу с bemhtml шаблонами (по умолчанию формируется путь <RootDir>\<bundleName>\<bundleName>.bemhtml.js)