Войти с помощью github

Мы продолжаем серию интенсивов для новичков на целый день!

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

Очень просим вас максимально оперативно зарегистрироваться.

Как и на прошлом митапе начнем с самых азов и познакомим начинающих верстальщиков с идеями, которые стоят за БЭМ, а затем перейдем к практике на БЭМ-платформе (bem-express) и React с использованием bem-react-core.

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

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

В этот раз у нас будет гораздо больше времени, так вы сможете сделать передышку, задать вопросы и перекусить в перерыве.

План мероприятия:
12:00 — 12:30 — Знакомство и ваши вопросы
12:30 — 14:00 — Основы БЭМ
14:00 — 15:00 — Перерыв
15:00 — 18:00 — Знакомство с React.js и плавное погружение в bem-react-core
18:00 — 19:00 — Заключительная секция вопросов и ответов

Ноутбук приносить не обязательно. После встречи мы опубликуем все материалы, ссылки и видео.

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

По всем вопросам пишите по адресу: info@bem.info

Stay BEMed!

Мы продолжаем серию БЭМапов!

Сергей Бережной проведёт секцию живого программирования и познакомит вас с библиотекой bem-react-core. Вы узнаете, как и зачем в одном проекте совмещать React и bem-react-core, как создавать блоки и элементы, работать с модификаторами и использовать уровни переопределения.

Мы приглашаем всех, кто уже знаком с React и хочет привлечь БЭМ к своему проекту! Регистрация открыта!

Stay BEMed!

Мы продолжаем серию митапов для новичков. На этот раз проводим интенсив на целый день!

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

Как и на прошлом митапе начнем с самых азов и познакомим начинающих верстальщиков с идеями, которые стоят за БЭМ, а затем на практическом примере рассмотрим разработку проекта на React.js и bem-react-core.

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

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

В этот раз у нас будет гораздо больше времени, так вы сможете сделать передышку, задать вопросы и перекусить в перерыве.

План мероприятия:
12:00 — 12:30 — Знакомство и ваши вопросы
12:30 — 14:00 — Основы БЭМ
14:00 — 15:00 — Перерыв
15:00 — 18:00 — Знакомство с React.js и плавное погружение в bem-react-core
18:00 — 19:00 — Заключительная секция вопросов и ответов

Ноутбук приносить не обязательно. После встречи мы опубликуем все материалы, ссылки и видео.

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

По всем вопросам пишите по адресу: info@bem.info

Stay BEMed!

Статьи

Список статей на английском языке

Видео

RadioJS

UPD: Опубликовали видео: https://www.youtube.com/watch?v=BuKeVrQmVKI&t Мы продолжаем серию встреч для новичков!

На этот раз Владимир Гриненко проведет мастер-класс, на котором:

  • Сверстает макет с нуля по БЭМ-методологии, попутно объясняя ее принципы.
  • Покажет на примере сверстанного макета, как перевести любой БЭМ-проект на React.

Вас ждет максимум практики и примеров!

Регистрация уже открыта: https://events.yandex.ru/events/bemup/02-february-2018/.

Stay BEMed!

Коротко и только о самом главном.

Библиотеки

bem-core

Выпустили версии bem-core 4.1.0-4.2.1.

Все изменения, вошедшие в релизы, описаны в CHANGELOG.

bem-core: turbo

Выпилили jQuery из bem-core. Официального релиза пока не было, но релиз-кандидат уже можно пробовать и писать нам отзывы.

bem-components

Выпустили версии 4.0.0-6.0.1.

Все изменения, вошедшие в релизы, описаны в CHANGELOG.

bem-history

Выпустили версию 4.0.0.

Подробно описали изменения в CHANGELOG.

bem-calendar

Опубликовали мини-библиотеку bem-calendar на основе bem-components.

bem-textarea-editor

Опубликовали библиотеку bem-textarea-editor с блоком editor, позволяющим писать текст в формате Markdown с удобной панелью инструментов (примерно как на Github) и получать превью до отправки поста на сервер.

Посмотреть на работу блока в действии можно тут.

bem-font-awesome

Опубликовали библиотеку bem-font-awesome, которая позволяет использовать Font Awesome с БЭМ-нотацией и не тянуть лишние стили в проект.

bem-font-awesome-icons

Опубликовали альтернативный вариант библиотеки bem-font-awesomebem-font-awesome-icons, где разделили шрифт на отдельные SVG-иконки, так что теперь на клиент приезжает только то, что действительно используется.

БЭМ и React

bem-react-core

Выпустили версию 1.0.0. До официального релиза библиотеку отделяет только подготовка документации.

Много и в разных форматах рассказывали о bem-react-core:

  • Провели серию мастер-классов. Видео опубликовали на YouTube в канале bem.info.
  • Сергей Бережной рассказал на Я.Субботнике по фронтенду, что делать, если вы используете i-bem.js и хотите получить преимущества React-подхода без потери привычных БЭМ-терминов и декларативности. И как нужно поступать, если вы используете React и хотите получить преимущества БЭМ-методологии.
  • Антон Виноградов показал предварительный релиз bem-react-core на митапе по БЭМ в декабре.

bem-react-components

Активно работали над bem-react-components — библиотекой блоков для разработки с React по БЭМ-методологии. Официального релиза пока не выпустили, но большинство блоков уже реализованы.

create-bem-react-app

Продолжаем создавать реактовый проджект стаб create-bem-react-app, который позволяет одной командой собрать готовое React/БЭМ-приложение с установленными зависимостями и правильной файловой структурой.

Технологии

bem-express

Выпустили партию мажорных обновлений:

  • Обновили версии библиотек bem-core 4.2.1 и bem-components 6.0.1.
  • Перешли со Stylus к PostCSS. Теперь из коробки поставляется тот же набор плагинов, что и в bem-components.
  • Внедрили опциональный livereload. Подробнее смотри в документации и в README проекта.
  • Добились ускорения сборки.
  • Отказались от bower для поставки библиотек. Теперь все зависимости ставятся через npm в папку node_modules.

Написали большое и подробное пошаговое руководство: Переходим на сторону сервера с bem-express.

project-stub

Обновили версии библиотек bem-core 4.2.1, bem-components 6.0.1 и другие зависимости.

В качестве эксперимента включили gulp-bem в project-stub.

bem-xjst

Выпустили версии v8.3.1-v8.8.5.

Все изменения, вошедшие в релизы, описаны в CHANGELOG.

Инструменты

bem-sdk

Перенесли все пакеты bem-sdk в монорепозиторий. В процессе избавились от циклических зависимостей между модулями и разделили все для оптимального использования на клиенте.

Выпустили обновленные пакеты bem-sdk. Обновили документацию.

Написали пакеты @bem/sdk.file и @bem/sdk.naming.file.stringify, которые позволяют взять описание БЭМ-сущности, путь до уровня, передать схему файловой структуры и получить путь до файла.

bem-tools

Выпустили bem-tools 2.0.0, где обновили bem-tools-create 2.1.0.

Подробности читайте в документации.

ENB

Выпустили мажорную prestable-версию enb@2.0.0-0. Внедрили модули из bem-sdk в ENB.

enb-bem-techs

Полностью переписали enb-bem-techs на bem-sdk и выпустили prestable-версию 3.0.0-0.

enb-bemxjst

Обновили enb-bemxjst до актуальной версии bem-xjst, где появилась поддержка экспортов в разные модульные системы.

gather-reverse-deps

Выпустили пакет gather-reverse-deps, который позволяет собирать обратные зависимости.

gulp-bem-src

Выпустили версию 0.1.0 с обновлением bem-sdk.

bem-naming

Пакет bem-naming перенесли в монорепозиторий bem-sdk. Новое название пакета — @bem/sdk.naming.entity.

Кроме того, теперь можно использовать отдельные пакеты:

  • @bem/sdk.naming.entity.stringify — формирует строку в соответствии с представлением объекта БЭМ-сущности.
  • @bem/sdk.naming.entity.parse — получает БЭМ-сущность из строки.
  • @bem/sdk.naming.cell.stringify — формирует путь строкового объекта к сущности внутри файловой системы БЭМ-проекта.
  • @bem/sdk.naming.presets — набор известных соглашений об именовании БЭМ-сущностей.

borschik

Выпустили версии 1.7.0-2.0.0, где прекратили поддержку node 0.8.0. и заменили uglify-js на uglify-es для поддержки ES6.

Подробности в CHANGELOG.

bem-walk

Написали полный и понятный README.

bemhint

Выпустили версии 0.10.0-0.10.1, где появилась поддержка предупреждений. Обновление сохраняет полную обратную совместимость с предыдущей версией.

bemhint-estree

Выпустили линтер недостающих зависимостей bemhint-estree, где добавили поддержку ES6 и написали обертку-раннер для линтера bem-xjst. В каждом репозитории есть подробная документация.

bemhint-deps-schema

Выпустили новую версию плагина для bemhint — bemhint-deps-schema 2.1.0, который проверяет, чтобы файлы *.deps.js соответствовали спецификации. Теперь bemhint-deps-schema умеет обрабатывать не только .json-, но и .js-файлы с module.exports.

Документация

Сайт bem.info

Мероприятия

2017-12-28 14 13 30

Конференции

Митапы по БЭМ

Провели целую серию BEMup'ов:

  • BEMup для новичков — встреча для тех, кто уже имеет представление о базовых понятиях методологии. Опубликовали скринкаст. Видео с первого BEMup'а для новичков, для тех, кто пропустил начало.
  • Рассказали про сборку БЭМ-проектов с enb и про все новости БЭМ из мира React на BEMup'е в Москве. Опубликовали видео.
  • Провели BEMup в Екатеринбурге для разработчиков, использующих БЭМ в своих проектах и желающих больше узнать про БЭМ-технологии.
  • Провели мастер-класс, на котором написали проект на основе project-stub. На живых примерах показали, для чего нужны технологии BEMJSON, BEMTREE, BEMHTML, DEPS, и как использовать их вместе. Опубликовали скринкаст.
  • Сергей Бережной провел мастер-классы по использованию библиотеки bem-react-core. Скринкасты с нескольких встреч опубликовали на Youtube. Также вы можете найти видео на форуме bem.info по тегу BEMup + video.
  • Провели еще один BEMup для новичков в Москве, где Владимир Гриненко рассказал про методологию БЭМ и технологии с нуля, Антон Виноградов представил первый релиз-кандидат библиотеки bem-react-core, и состоялась секция вопросов и ответов с Сергеем Бережным, Виталием Харисовым и Владимиром Гриненко.

Хакатоны

Провели два продуктивных хакатона по инструментам БЭМ. Большинство результатов уже включены в этот выпуск дайджеста. Следите за новостями, если хотите принять участие в следующем хакатоне!

Вебинары

Антон Виноградов провел вебинар Немного БЭМ в вашем React, где рассказал, как начать использовать bem-react-core — декларативно описывать React-компоненты, гибко их доопределять и использовать уровни переопределения.

Разное

UPD Опубликовали видео доклада про bem-react-core: https://youtu.be/2pKg-xGg1gI?t=38

Ты должен прийти, если:

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

В программе:

  • доклад от @tadatuta
  • секция вопросов/ответов с @veged, @tadatuta и @vithar
  • рассказ о bem-react-core от @awinogradov

Регистрация уже открыта: https://events.yandex.ru/events/bemup/15-december-2017/

Stay BEMed!

Итоги работы нашей команды за четыре месяца:

Новости библиотек

bem-core

Выпустили минорную версию v4.2.1.

Исправлено:

  • Ошибка с инвалидацией кеша элементов при изменении DOM.
  • Ошибка в i-bem-dom__events, приводившая к тому, что данные события не передавались в обработчик.
  • Метод isEditable модуля dom. Добавлены недостающие типы.

Изменения, вошедшие в релиз:

  • Синтаксические изменения в JSDoc блока i-bem-dom.
  • Незначительная доработка документации.
  • Добавление CLA(Contributor License Agreement).

Подробности в CHANGELOG.

bem-core: get rid of jQuery!

Выпилили jQuery из bem-core. Официального релиза пока не было, но релиз-кандидат уже можно пробовать и писать нам отзывы!

bem-components

Выпустили минорную версию v6.0.1, в которой обновили bem-core до версии 4.2.1 и устранили ряд ошибок:

  • Поддержка bem-xjst 8.x: режим js() заменен на addJs().
  • В блоке popup у молификатора target_anchor исправлены вычисления позиции для поддержки новой версии jQuery.
  • Исправлена ошибка, при которой не удалялись контролы в select_mode_radio-check.

Изменения, вошедшие в релиз:

  • Добавлен CLA(Contributor License Agreement).
  • Удалены неиспользуемые шаблоны в блоке attach.

Подробности в CHANGELOG.

Новости технологий

bem-xjst

Выпустили релизы:

Основные изменения:

  • Добавили поддержку source map.
  • Исправлен экспорт библиотек, в первую очередь для CommonJS.
  • Возобновили поддержку вложенных миксов.
  • Исправлены ошибки в методе generate().
  • Добавили возможность задавать функцию для кастомизации вывода ошибок.
  • Обновили зависимости от vow и uglify-js.

Подробности читайте в CHANGELOG.

bem-express

Обновили версии библиотек bem-core 4.2.1 и bem-components 6.0.1.

bemhint

Выпустили новую версию bemhint 0.10.0, где появилась поддержка предупреждений. Обновление сохраняет полную обратную совместимость с предыдущей версией и уже опробовано на нескольких реальных проектах.

bemhint-estree

Выпустили линтер недостающих депсов bemhint-estree, где добавили поддержку ES6 и написали обертку-раннер для линтера bem-xjst. В каждом репозитории есть подробная документация.

bemhint-deps-schema

Выпустили новую версию плагина для bemhint — bemhint-deps-schema 2.1.0, который проверяет, чтобы файлы *.deps.js соответствовали спецификации. Теперь bemhint-deps-schema умеет обрабатывать не только .json-, но и .js-файлы с module.exports.

enb-bemxjst

Обновлили enb-bemxjst до актуальной версии bem-xjst, где появилась поддержка экспортов в разные модульные системы (раньше эту задачу брала на себя технология для ENB).

Новости инструментов

bem-sdk

Проделали большую работу по переносу bem-sdk в монорепозиторий.

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

На хакатоне продолжили работу по миграции тестов модулей bem-sdk с ava на mocha, что позволило считать покрытие в монорепозитории. Доделать поддержку сетов не успели, но, кажется, придумали, как сделать правильно и сохранить обратную совместимость.

Помимо этого починили баги и обновили документацию.

Алексей Ярошевич написал еще пару пакетов @bem/sdk.file и @bem/sdk.naming.file.stringify — теперь можно взять описание БЭМ-сущности, путь до уровня, передать вашу схему файловой структуры и получить путь до файла.

Все пакеты зарелизили, так что теперь можно пробовать мигрировать (впрочем, можно было и раньше ;)

ENB

Продолжаем внедрять модули из bem-sdk в ENB. В ближайшее время ожидается canary-версия, которую можно будет пробовать у себя в проекте. Подглядывать (или помогать) можно здесь.

borschik

Выпустили мажорную версию borschik v2.0.0, где заменили uglify-js на uglify-es для поддержки ES6.

Новости БЭМ из мира React

bem-react-core

Продолжаем активно развивать библиотеку bem-react-core в beta-режиме. Выпустили несколько минорных версий v0.4.3-v0.4.6.

Основная документация:

Провели ряд мероприятий, посвященных bem-react-core:

  • Провели серию мастер-классов по bem-react-core. Видео можно найти на YouTube в канале bem.info.
  • Сергей Бережной рассказл на Я.Субботнике по фронтенду, что делать, если вы используете i-bem.js и хотите получить преимущества React-подхода без потери привычных БЭМ-терминов и декларативности. Как нужно поступать, если вы используете React и хотите получить преимущества БЭМ-методологии. Видео доклада.

bem-react-components

Продолжаем активно развивать bem-react-components — библиотеку блоков для разработки с React по БЭМ-методологии.

create-bem-react-app

Продолжаем создавать реактовый проджект стаб create-bem-react-app, который позволяет одной командой собрать готовое React/БЭМ-приложение с установленными зависимостями и правильной файловой структурой.

Новости документации

Как и обещали, написали много нового и пересмотрели часть старой документации:

Новости сайта bem.info

Новости мероприятий и сообщества

  • Организовали несколько встреч БЭМ-сообщества — BEMup'ов, на которых Сергей Бережной провел мастер-классы по использованию библиотеки bem-react-core. Скринкасты со всех встреч можно найти на Youtube или по тегу BEMup + video на форуме bem.info.
  • Владимир Гриненко и Сергей Бережной выступили на FullStack Conference с докладом BEM — The unknown.
  • Владимир Гриненко рассказал о зависимостях в компонентном вебе на HolyJSconf в Питере. Доклад Зависимости в компонентном вебе, сделанные правильно.
  • Сергей Бережной рассказл на Я.Субботнике по фронтенду, как совместить преимущества БЭМ и React. Видео доклада
  • Провели двухдневный продуктивный хакатон по инструментам БЭМ. Все результаты уже описаны в этом выпуске. Следите за новостями, если хотите поучавствовать в следующем!

Доброго времени суток. Я в беме новичек, но заметил одну характерную черту bem библиотек - они жестко связаны. Пример: bem-mvc. Я понимаю, что библиотека разработана в контексте bem, но допустим мне понравилась реализация моделей и я хочу использовать модели и только, но судя по всему такой возможности нет - потому что имеет жесткую зависимость от bem-core. Ожидание:

import {createModel} from 'bem-mvc';
const User = createModel({ /* config */ });
// I can use model User without bem, or with it
BEM.registerModel('User', User);
// or
BEM.registerModel('User', createModel({ /* ... */ }));

Реальность:

BEM.MODEL.decl({ /*...*/ });

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

Это лишь мое мнение. Извините, если все на самом деле не так.

15 сентября в Екатеринбурге состоится очередная встреча БЭМ-сообщества — BEMup!

Мы ждем вас в уютном офисе Яндекса, где Сергей Бережной проведет мастер-класс по использованию bem-react-core — библиотеки, расширяющей возможности React.

Если вам близка идея БЭМ, приходите! Будем говорить про БЭМ, React и фронтенд в целом.

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

Регистрация открыта!

Stay BEMed!

PS: По традиции вы можете задать вопросы заранее в комментариях к этому посту, а мы постараемся подробно ответить на них во время митапа.

UPD: Опубликовали видео с митапа https://www.youtube.com/watch?v=o1MeyEvpDTg

11 августа в 19:00 в питерском офисе Яндекса пройдет еще один митап по БЭМ!

Сергей Бережной проведет мастер-класс по использованию bem-react-core — библиотеки, расширяющей возможности React. Вы получите возможность изменять любые аспекты поведения компонентов без добавления лапши из if-ов в коде. В точности так, как это делается в CSS.

Вы сможете:

  • Создать компонент с разным набором признаков (в том числе и с разной разметкой!).
  • Дешево проводить AB-тестирование и эксперименты.
  • Настраивать компонент под окружение/платформу, переиспользуя общий код.

Кроме того, мы ответим на любые ваши вопросы, связанные с БЭМ и работой фронтендера в Яндексе.

По традиции вы можете задать вопросы заранее в комментариях к этому посту, а мы постараемся подробно ответить на них во время митапа.

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

Регистрация открыта!

Stay BEMed!

В последний день весны мы решили рассказать вам, что наша команда сделала за последние четыре месяца.

Новости документации

Чего стоит ждать в ближайшем будущем:

  • Новый большой и полезный туториал по всему БЭМ-стеку.
  • Новые документы в разделе Методология.

Новости библиотек

bem-core

Выпустили bem-core 4.2.0. Обновление должно быть совершенно «бесплатным», так как новая версия полностью обратносовместимая.

Главным изменением является совместимость с bem-xjst 8.x.

Все изменения, вошедшие в релиз, описаны в CHANGELOG.

bem-core 4.2.0 уже внедрена в project-stub.

bem-components

Выпустили две версии v5.1.0 и v6.0.0.

v5.1.0

Версия v5.1.0 обратносовместимая. Обновление не должно потребовать дополнительных усилий.

Основные изменения:

  • обновлена зависимость от bem-core до 4.2.0;
  • добавлено визуальное оформление для link_disabled;
  • исправлены некоторые ошибки.

Подробности в CHANGELOG.

v6.0.0

Bерсия v6.0.0 отличается от 5.1.0 только новыми шаблонами. v6.0.0 обязательно требует обновления до bem-xjst v8.x, где появились новые режимы и исправлена работа режима extend.

Подробности в CHANGELOG.

Необходимые пакеты для сборки на ENB (enb-bemxjst 8.6.7) или gulp (gulp-bem-xjst 3.0.0) уже доступны для установки.

При переходе вам может пригодиться автоматический мигратор шаблонов.

bem-components 6.0.0 внедрена в project-stub.

bem-history

Выпустили новую версию bem-history v4.0.0, анонсированную в прошлом выпуске дайджеста. Версия v4.0.0 полностью совместима с bem-core v4.

Главное изменение — переименование блока uri в элемент uri__querystring, который расширяет базовую реализацию одноименного модуля из bem-core классом Uri. Методы класса сохранились без изменений.

Подробное описание изменений в CHANGELOG.

bem-calendar

Опубликовали мини-библиотеку bem-calendar на основе bem-components.

bem-textarea-editor

Опубликовали библиотеку bem-textarea-editor с блоком editor, позволяющим писать текст на маркдауне с удобной панелью инструментов (примерно как на Github) и получать превью до отправки поста на сервер.

Посмотреть на работу блока в действии можно тут.

bem-font-awesome

Опубликовали библиотеку bem-font-awesome, которая позволяет использовать Font Awesome с использованием БЭМ-нотации и не тянуть лишние стили в проект.

Как установить и использовать библиотеку, читайте в README проекта или в посте на форуме.

bem-font-awesome-icons

Опубликовали альтернативный вариант библиотеки bem-font-awesomebem-font-awesome-icons, где распилили шрифт на отдельные SVG-иконки, так что теперь на клиент приедет только то, что реально используется.

Подробности в документации и на форуме.

Новости технологий

bem-express

Обновили версии библиотек bem-core 4.2.0 и bem-components 6.0.0.

project-stub

Обновили версии библиотек bem-core v4.2.0, bem-components v6.0.0 и другие зависимости.

bem-xjst

Выпустили следующие релизы v8.6.0 - v8.6.11.

Основные изменения:

  • Исправлена ошибка: переданные oninit() во время второй и последующих вызовов compile() не вызывались. Теперь это исправлено.
  • Исправлена ошибка, приводящая к утечке памяти.
  • Исправлена ошибка про некорректную работу this.reapply() и depth.
  • Исправлена ошибка с отсутствием i-bem при миксе элемента с js.
  • Исправлена ошибка с applyCtx.
  • Исправлена ошибка в теле шаблона функции и appendContent()/prependContent().
  • Исправлена ошибка при использовании match() без аргументов.
  • BEMTREE и BEMHTML: добавлена возможность подключения сторонних библиотек как глобально, так и для разных модульных систем с помощью опции requires.
  • Размер бандлов BEMHTML и BEMTREE уменьшен (–6%).
  • В теле функции-колбека match можно использовать apply() для вызова любого режима, относящегося к данному узлу.
  • Создан автомигратор, который умеет править код проектных шаблонов так, чтобы он начал соответствовать указанной мажорной версии.
  • Реализован статический линтер, который обеспечивает запуск статической проверки для ваших шаблонов и включает их (наравне с runtime-проверками) в ваш процесс разработки.
  • Подробности в CHANGELOG.

Полезный пост про миграцию проектных шаблонов.

gather-reverse-deps

Появился пакет gather-reverse-deps, позволяющий собирать обратные зависимости.

Новости инструментов

bem-naming

Выпустили пакеты 2.0.0-5 и 2.0.0-6.

Основные изменения:

  • Теперь, если не указан разделитель значения модификатора, он не наследуется от разделителя имени модификатора и возвращается к значению по умолчанию bemNaming.modValDelim.
  • Добавлено поле delims вместоelemDelim, modDelim иmodValDelim для соответствия функции bemNaming.

bem-tools-create

Выпустили bem-tools-create v2.1.0, в которой исправили ряд ошибок и добавили поддержку следующих опций:

  • -f — принудительно перезаписывает существующие файлы;
  • -c — задает содержимое создаваемых файлов не из шаблонов, а вручную из командной строки.

borschik

Выпустили новую версию borschik v1.7.0, где хеш-функция, используемая при фризе статики, была вынесена в отдельный пакет borschik-hash. Прекращена поддержка node 0.8.0

Подробности в CHANGELOG.

Обновили документацию.

Новости БЭМ из мира React

bem-react-core

Выпустили bem-react-core v0.4.2. В новой версии исправлен баг с потерей контекста для вложенных элементов и ряд других ошибок.

Основные изменения:

  • Рендер без CSS-класса (bem:false).
  • Поддержка cls, mix.
  • Доопределение статических полей defaultProps и propTypes.
  • Сокращенный синтаксис декларации модификаторов.
  • Поддержка HOC (redux, flux и других оберток).

Написали подробную документацию – REFERENCE.

Провели ряд мероприятий, посвященных bem-react-core:

bem-react-components

Продолжаем активно развивать bem-react-components — библиотеку блоков для разработки с React по БЭМ-методологии.

create-bem-react-app

Продолжаем создавать реактовый проджект стаб create-bem-react-app, который позволяет одной командой собрать готовое React/БЭМ-приложение с установленными зависимостями и правильной файловой структурой.

Важный приятный пункт — create-bem-react-app не требует никаких предварительных настроек сборки.

webpack-bem-loader

  • Добавили генератор i18n, который обеспечивает возможность локализации компонентов.
  • Появилась возможность конфигурировать каждый уровень сборки отдельно с помощью bem-config.

Новости мероприятий и сообщества

  • Провели целую серию BEMup'ов:
    • Продолжили проводить BEMup'ы для новичков — на этот раз встреча была для тех, кто уже имеет представление о базовых понятиях методологии. Опубликовали скринкаст. Видео с первого BEMup'а для новичков, для тех, кто пропустил начало.
    • Рассказали про сборку БЭМ-проектов с enb и про все новости БЭМ из мира React на BEMup'е в Москве. Конечно, опубликовали видео.
    • Провели Bemup в Екатеринбурге для разработчиков, использующих БЭМ в своих проектах и желающих больше узнать про БЭМ-технологии.
    • Провели мастер-класс, на котором написали проект на основе project-stub. На живых примерах показали, для чего нужны технологии BEMJSON, BEMTREE, BEMHTML, DEPS, и как использовать их вместе. Опубликовали скринкаст.
  • Антон Виноградов провел вебинар «Немного БЭМ в вашем React», где рассказал, как начать использовать bem-react-core — декларативно описывать React-компоненты, гибко их доопределять и использовать уровни переопределения. Скринкаст.
  • Сергей Бережной рассказал, что нового в bem-react-core на React Moscow Meetup #2.
  • Владимир Гриненко выступил на United Dev Conf в Минске с докладом Dependencies in component web done right. Слайды к докладу в keynote.
  • Владимир Гриненко выступил на Web Development Conference.
  • Возродили канал bem.info на Youtube. Теперь все новые видео с докладами и вебинарами вы сможете находить тут. Подписывайтесь!

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

1 - На сколько обязательно писать BEMJSON и использовать инструменты BEM ? то есть суть то какова : я могу писать классы и создавать файловую структуру вручную. Но в таком случае всплывает ряд неудобств : длинные селекторы, долго и не удобно прописывать вручную , в css будет все а не только то что нужно и используется. Получается что самый правильный подход - использовать метод формирования HTML из JSON . Но тут же сложность которая лично меня вводит в ступор : мой мозг напрочь не хочет представлять верстку в виде JSON и сущностей БЭМ . По мимо этого все скрипты придется писать через BEMHTML и это так же немного вводит в ступор ... немного от слова совсем. Возможно есть какой то метод упростить процесс вхождения в БЭМ ?

2 - При попытках работать с тестовым проектом согластно методологии БЭМ сталкиваюсь с тем что у меня длинющий JSON в котором очень просто потеряться. При этом понимаю что по идее, если я верно понимаю методологию и ее идиалогию : я могу создать свою библиотеку блоков, для своего проекта, и уже работая со страницей использовать их (по мимо существующих в репозиториях). В таком случае вопрос : как должен выглядеть отдельный блок ? Это все равно будет один глобальный блок page и в нем мой блок со своей структурой , или же как то иначе ?

3 - Путаница с папками. Я просмотрел множество туториалов по тому как работать с БЭМ и вынес вывод : свои блоки можно класть и в desktop.blocks и в common.blocks . Однако куда же правильно ? в некоторых туториалах файлы блоков , которые создаются в процессе верстки, кладут в desktop в некоторых в common . При этом никто не объясняет как же все же правильно . (интуитивно чую что в desktop , но это не точно :) )

Заранее прошу прощения за вопрос - возможно некоторые , если не все, покажутся глупыми, но это то что не дает мне спать )

Если кому вдруг понадобится: https://github.com/zakaratcha/screen-keyboard

Есть стандартная базовая конфигурация, внешний вид и наборы клавиш для которой позаимствованы с главной страницы Яндекса. Для большинства проектов она будет явно избыточной, поэтому есть пара примеров с реализацией попроще.

Коротко о том, как мы завершили прошлый год и с чем вошли в новый.

Новости документации

Новости сайта

Выкатили раздел БЭМ-библиотек в новом дизайне:

Новости библиотек

bem-core

  • Выпустили bem-core 4.1.0 и 4.1.1. Все изменения, вошедшие в оба релиза, описаны в CHANGELOG.

bem-components

  • Выпустили обещанную в прошлом дайджесте bem-components v4.0.0 с небольшим обновлением дизайна контролов и переходом со Stylus на postCSS.
  • Выпустили долгожданную версию bem-components 5.0.0, которая под капотом использует bem-core 4.1.1. В версию 5.0.0 вошли сразу два набора стилей: исходники на postCSS и скомпилированный CSS на случай, если вы предпочитаете использовать препроцессор.

bem-history

  • Пока не выпустили в релиз, но призываем вас уже посмотреть и пощупать библиотеку в отдельной ветке v4. Эта версия совместима с bem-core v4.
    Главное изменение — переименование блока uri в элемент uri__querystring, который расширяет базовую реализацию одноименного модуля из bem-core классом Uri. Методы класса сохранились без изменений.

Если вы давно этого ждали — самое время попробовать и рассказать о возможных проблемах до того, как мы выпустим версию.

bem-react-core

  • Работаем над BEM React Core — библиотекой для описания React-компонентов в виде деклараций БЭМ-сущностей.
  • Разработали полный пакет документации: README, REFERENCE и CONTRIBUTION GUIDE.

Новости технологий

bem-express

Выпустили очередную партию мажорных обновлений:

  • Обновили bem-core до версии 4.1.1 и bem-components до 5.0.0.
  • Перешли со Stylus к PostCSS. Из коробки поставляется тот же набор плагинов, что и в bem-components.
  • Внедрили опциональный livereload. Подробнее смотри в документации и в README проекта.
  • Добились ускорения сборки за счет прогрева npm-модулей, необходимых для сборки.
  • Отказались от bower для поставки библиотек. Теперь все зависимости ставятся через npm в папку node_modules.

bem-xjst

  • v8.3.1 (v7.4.1)

    • Исправлен баг в режиме extend(). Теперь режим работает как ожидается.
    • Дополнена документация: описание this.extend(o1, o2).
  • v8.4.0 (v7.6.0)

    • Новая опция unquotedAttrs позволяет не выводить двойные кавычки у тех HTML-атрибутов, значения которых позволяют это сделать.
  • v8.4.1 (v7.6.1)

    • Колбек режима extend(function(ctx, json) { … }) теперь принимает такие же аргументы, как и остальные колбеки в других режимах. Первый — ссылка на контекст исполнения шаблона (this), второй — ссылка на узел BEMJSON, на который сматчился шаблон.
  • v8.4.2

    • Функции экранирования теперь возвращают пустую строку, если аргументом был undefined, null или NaN. Раньше вы получали результат приведения к строке, что было исправлено.
  • v8.5.0

    • В BEMTREE добавлены режимы, имеющие отношение к данным: js(), addJs(), mix(), addMix(), mods(), addElemMods(), elemMods(). Остальные режимы, которые имеют отношение только к HTML, доступны в BEMHTML.
  • v8.5.1

    • Исправлен баг с расчетом this.position во время использования режима replace().
  • v8.5.2 (v7.6.4)

    • Исправлен баг в BEMTREE, связанный с рендерингом специального значения поля content { html: '<unescaped value>' }.
    • Обновлена bem-xjst onlinе demo:
      • Добавлен переключатель движков BEMHTML/BEMTREE.
      • Добавлена заглушка для BEM.I18N(), которая возвращает свой второй аргумент. Это удобно для копирования кода из продакшена в песочницу.
    • Обновлен README: описали основные отличия шаблонизатора, фичи и т.д.
    • Силами Михаила Степанова обновлена песочница. Вы тоже можете помочь: у нас есть задачи, помеченные как help wanted.

enb-bemxjst

  • Выпустили новую версию enb-bemxjst v8.5.2 с зависимостью "dependencies": { "bem-xjst": "8.5.2". Однако продолжаем активно поддерживать две ветки: 7.x и 8.x.

Обо всех изменениях читайте в примечаниях к релизу v8.5.2 и v7.6.4. Полный список изменений описан в CHANGELOG.

Новости инструментов

bem-tools

Выпустили bem-tools 2.0.0, где обновили bem-tools-create. Подробности читайте в документации.

bem-walk

Написали полный и понятный README.

project-stub

  • Внедрили новую версию bem-components v5.0.0 с учётом перехода на postCSS и новую версию bem-tools 2.0.0.
  • В качестве эксперимента включили gulp-bem в project-stub.

Новости мероприятий и сообщества

Уважаемая команда разработчиков БЭМ, может проведете вебинар по БЭМ для новичков, где будут рассмотрены такие моменты как:

  1. Использование картинок в css и html;
  2. Подключение и использование шрифтов;
  3. Вынесение логических частей в отдельные файлы: header, footer и т.д.
  4. Подключение и использование сторонних библиотек: как jquery, так и другие библиотеки использующие данный framework: magnific-popup, bx-slider и т.д. Просто на примере одного любого.
  5. Подготовка проекта для production.

Всем привет!

Кратко об основных изменениях и новостях в мире БЭМ за прошедшие 3 месяца с предыдущего дайджеста.

Новости документации

У нас появились два новых и крутых документа по БЭМ:

Кроме этого, многие другие документы исправлены и дописаны.

Новости библиотек

  • Закончили работу над стабильной версией bem-core 4.0.0. Основные изменения:

    • Изменился API блока i-bem
    • Изменился API блока querystring.
    • Из модуля identify удален опциональный параметр onlyGet.
    • Из модуля events удалены все статические методы.
    • В классе Event модуля events удалено поле result.
    • Элемент css блока page больше не поддерживает автоматическое добавление условных комментариев для IE.

    Все подробности можно прочитать в миграционном гайде. А еще лучше — посмотреть выступление @veged: https://events.yandex.ru/lib/talks/3685/ где он подробно рассказывает обо всех изменениях.

  • Заканчиваем работу над новой весрией bem-components — уже на этой неделе планируется релиз v4 с новым дизайном, обязательно расскажем об этом релизе отдельно.
  • Начали работу над bem-react-core. Это новая библиотека, которая позволит писать react-совместимые блоки в bem-терминах.
  • Параллельно с этим работаем над bem-react-components, библиотека будет содержать react-реализацию блоков из bem-components. На данный момент готовы блоки Button, Icon, Link, TextInput, TextArea, Checkbox.

    Новости технологий

  • Выпустили два мажорных, десятки минорных и патчевых релизов bem-xjst. Самая свежая весия — 8.3.0. Основные изменения:

    • Теперь режимы mix(), js(), attrs() заменяют значения BEMJSON.
    • Если выхотите расширить значение BEMJSON используйте applyNext().
    • Вызовы applyNext() во всех режимах по умолчанию возвращают BEMJSON.
    • Если вы захотите добавить mix, js или attrs теперь можно использовать addMix(), addJs() или addAttrs().

    Важно! bem-xjst 8.x пока несовместима с bem-components. Прямо сейчас мы работаем над этим.

  • Кроме bem-xjst 8.0.0 у нас появилась куча новых фич:

    • runtime lint
    • mod()/elemMod() теперь можно использовать без второго аргумента, чтобы сделать подпредикат модификатора с любым значением
    • новые appendContent() и prependContent()
    • функции эскейпинга оптимизированны и работают быстрее, а главное не тормозят если работают в холостую
    • новая опция production с помощью которой страница будет рендерится даже если случились ошибки в отдельных блоках

    Подробнее обо всех изменениях читайте в release-notes.

  • Мы взяли в официальную поддержку заготовку проекта на БЭМ-платформе с серверной частью на express: https://github.com/bem/bem-express.

    Новости инструментов

  • Выпустили ENB 1.4.0, release-notes.
  • Работали над плагинами для enb:
    • enb-bemxjst 8.0.0
    • enb-bem-specs 0.10.0
    • enb-stylus 2.4.0
    • enb-css 1.2.2
  • Мы продолжаем строить инструмент bem-lib-site для автоматической сборки документации для библиотеки блоков/проекта на БЭМ.
  • Кроме этого, идет большая работа в BEM-SDK.

    Новости мероприятий

  • Провели очередной хакатон по БЭМ, продвинулись по:
    • bem-config: доведен до готовности и ума модуль для работы с конфигурациями БЭМ-проектов.
    • bem-tools: создан готовый к использованию плагин bem-tools-create, чтобы его использовать нужно так же установить bem-tools-core.
    • плагины для bem-tools-create к различным IDE: для Atom, IDEA, и Sublime были собраны рабочие прототипы плагинов для запуска команды bem-tools-create.
    • модульной сборке c gulp: взяли gulp-bem-bundle-builder и попытались внедрить в реальные проекты, запустилось, поняли чего не хватает, работаем дальше.
    • по модулям BEM-SDK: доведены до рабочего состояния модули bem-deps, bem-graph для чтения и работы с зависимостями между БЭМ-сущностями, bem-decl для работы с файлами деклараций БЭМ-сущностей, bem-bundle, и другие.
  • Возобновили традицию BEMup'ов — 30 сентября очередной БЭМап для всех желающих прошел в Московском офисе Яндекса
  • Вместе с @zxqfox провели два вебинара про сборку проектов на gulp, если кто-то пропустил — смотрите в записи: сборка проекта с помощью BEM-SDK сборка проекта с помощью gulp.

Привет!

18 августа в 19:00 мы с нашими друзьями из Front-end Science проведем очередной БЭМап в Киеве!

В программе:

  • Последние наработки и новости из мира БЭМ, а также ближайшие планы.
  • bem-sdk: сборка без bem-tools или ENB.
  • БЭМ в динамике: express-приложение с BEMTREE + BEMHTML.
  • Свободное общение: ваш опыт разработки с БЭМ.
  • Ответы на вопросы.

Подробности и форма регистрации здесь.

Awesome списки перечисляют самые лучшие образцы в заданной теме и имеют много посетителей и подписчиков.

Вот возможно неплохой пример такого списка тех. блогов, найденный мною в awesome awesome (список awesome-списков)

https://github.com/kilimchoi/engineering-blogs#y-companies

Конечно такие списки курируют не всегда самые знаменитыи и признанные профессионалы в соответствующих областях и авторитет не всегда является главным и единственным источником правды,

Тем не менее, огорчает отсутсвие Yandex в этом и других списках (мб где-то и есть, но я не интенсивно искал) (в качестве бреда: плохо, что мы называемся на ту же букву, что и Yahoo)

p.s. пишу здесь, т.к. 1) можно начать с блогов фронтендеров 2) я фронтендер и где другие Я.Касты тусуются не знаю

Хотел предложить внести bem в хаб документации devdocs https://github.com/Thibaut/devdocs

пользуюсь им из alfred, так удобнее быстро переходить к описанию методов из API

Но bem выглядит совершенно непопулярным, т.к. количество звёздочек например у https://github.com/bem/bem-core/ сильно меньше 3k У bemhtml и того меньше: https://github.com/bem/bem-xjst

Условия:

  • Source code documentations only (HTML format)
  • Project must be open source (as defined by OSI) and actively maintained
  • License must permit alteration, redistribution and commercial use
  • Project must have >3k stars on GitHub or equivalent

Кажется, с другой стороны, пользовтелей сильно больше 3k, только они не очень активны

Этот показатель хотя и является несерьёзным, всё же используется как ключевой аргумент при переходе на технологию

Может быть сделать цель, увеличить звёздочки? Замотивировать их ставить

Можно в BEM чатик написать прямо, И опосредованно в блогах и на страницах на bem.info Флешмоб на внутреннем семинаре провести + внешние конференции, тоже можно обыграть как-нибудь


Покажи настоящую популярность БЭМ, подари свою ⭐!

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.

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

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

vcard

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

Релиз

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

Команда

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

Что дальше?

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

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

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

Ребята, если вы чувствуете в себе силы помочь нам и дописать технологию enb-css, чтобы она научилась поддерживать произвольные плагины postCSS — приходите в https://github.com/enb/enb-css/issues/9!

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

@blond, сможешь описать API в issue?

Товарисчи! Подскажите где посмотреть последний вебинар про шаблонизаторы.

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

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

Привет! поделитесь пожалуйста ссылками на проекты где используется основная часть технологий bem (i-bem, bem-components, ...), желательно что бы это были следующие типы сайтов: порталы, интернет магазины, корпоративные сайты, целевые страницы.

Всем привет!

Мы тут решили сделать логотип для BEM SDK.

Варианты обсуждаем в задаче https://github.com/bem-sdk/bem-sdk/issues/11.

Не проходите мимо :cat2: поделитесь мнением :smiley_cat:

Всем привет,

Кратко об основных событиях в мире БЭМ за последние 4 месяца с предыдущего дайджеста.

Новости библиотек

  • Выпустили bem-core 4.0.0-rc.1. Подробнее о релизе можно прочитать на форуме bem.info. Основные изменения коснулись усовершенствования i-bem.js. Если вы готовы — этот релиз уже сейчас можно щупать, крутить и внедрять в свои проекты. Стабильная версия выйдет совсем скоро. Не забывайте сообщать нам обо всех найденных ошибках.
  • Выпустили мажорную версию bem-components 3.0.0 которая работает с bem-core 3.0.1. Несмотря на то, что релиз мажорный — переход на него должен быть практически безболезненным. Подробнее о релизе читайте здесь.
  • Выпустили bem-history 3.2.0. Основное изменение — поддержка bem-core 3.x в bower.json. И, конечно, несколько багфиксов в комплекте.
  • Переименовали организацию bem-incubator в bem-contrib. Это название гораздо лучше отражает предназначение организации. Если вы используете (или разрабатываете) какие-либо пакеты, следует обновить пути к репозиторию (какое-то время github поддерживает редиректы автоматически). Можно использовать инструкцию.

Новости технологий

  • Выпустили два мажорных, десятки минорных и патчевых релизов bem-xjst. Самая свежая весия — 6.5.1 Основные изменения:
    • BEMTREE
    • Реализовали поддержку ES6 arrow functions
    • Сделали опциональный эскейпинг контента
    • Поддержали JS-обвязку для элементов
    • Сделали режим для отрисовки HTML без /:
      вместо
    • Удалили часть устаревших методов и функций.

Подробнее обо всех изменениях bem-xjst читайте в release-notes, которые подробно пишутся к каждому релизу: https://github.com/bem/bem-xjst/releases.

Новости инструментов

Активно работали над ENB:

Работали над плагинами для ENB:

Новости сайта

  • Совсем недавно мы частично обновили дизайн сайта bem.info — он стал более современный, быстрый и красивый.
  • Выкатили украинскую версию https://uk.bem.info, впереди переводы и на другие языки.

Новости мероприятий

Интересные темы на форуме

До Яндекса я 9 лет работал веб-разработчиком на C#. Мне всегда очень нравилась идея БЭМ и я очень огорчался, что не могу использовать БЭМ-инструменты в проектах на .NET.

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

Итак...

Задача

По сути, задача состоит из двух относительно независимых частей:

  • сделать сборку БЭМ-бандлов в Visual Studio (т.е. под Windows);
  • сделать серверную шаблонизацию во время работы приложения.

    Сборка

    Простой вариант: запускаем enb.

В мире .NET есть такой сборщик - MsBuild. Именно с помощью него собирается проект, когда вы нажимаете Ctrl + F5 в Visual Studio. По сути, файлы .sln и .csproj, с которыми работает Visual Studio - это конфиги MsBuild. Среди прочего, MsBuild может запускать консольные приложения. Таким образом, мы можем добавить руками в файл проекта вызов enb make и он будет запускаться при сборке. Достоинства: это просто сделать + сборка на enb хорошо работает. Недостатки: нет интеграции с UI => неудобно настраивать и использовать.

Продвинутый вариант: сборка на gulp.

На последнем хакатоне по БЭМ (2-3 апреля 2016) уже был более-менее рабочий пример сборки БЭМ проектов на gulp, а в Visual Studio как раз есть интеграция с gulp с помощью плагина Task Runner Explorer (в последних двух версиях VS этот плагин устанавливается по умолчанию). Достоинства: интеграция с UI + gulp настраивается гибче и удобнее, чем enb + идея с потоками значительно меньше взрывает мозг, чем идея декларативного описания сборки. Ну и gulp намного более распространен. Недостатки: плагины для БЭМ-сборки на gulp еще довольно сырые (об этом ниже).

Что получилось

Файловая структура проекта:

<Project>
├─ Bem
    ├─ desktop.blocks
        ├─ block1
        └─ block2
    └─ desktop.bundles
        ├─ bundle1
            └─ bundle.bemjson.js
        └─ bundle2
├─ Controllers
  ...
└─ gulpfile.js

Сборка шаблонов

var gulp = require('gulp'),
    ...
    bemhtml = require('bem-xjst').bemhtml,
    bem = require('@bem/gulp');

// Создаём хелпер для сборки проекта
var project = bem({
    bemconfig: { ... } // уровни переопределения
});    

// Создаём хелпер для сборки бандла
var bundle = project.bundle({
    path: 'Bem/desktop.bundles/index',
    decl: 'index.bemjson.js'
});

gulp.task('bemhtml', function() {
    return bundle.src({ tech: 'bemhtml', extensions: ['.bemhtml', '.bemhtml.js'] })
        .pipe(concat(bundle.name() + '.bemhtml.js'))
        .pipe(through2(function(file, encoding, callback) {
            var src = file.contents.toString(encoding),
                bundle = bemhtml.generate(src);
            file.contents = new Buffer(bundle, encoding);
            callback(null, file);
        }))
        .pipe(gulp.dest('Bem/desktop.bundles/index'));
});

Вся магия в bundle.src - это как gulp.src, только возвращает файлы из всех уровней переопределения в правильном порядке.

Обнаруженные особенности:

  • если нет файлов deps, то bundle.src падает c неинформативной ошибкой;
  • мне так и не удалось запустить nodejs с поддержкой ES6 из Visual Studio, поэтому не смог воспользоваться нормальным плагином для сборки bemhtml (и написал руками).

Спасибо @tadatuta и @zxqfox за помощь и ответы на глупые вопросы.

Сборка js и стилей - аналогично. Весь код можно посмотреть здесь.

Таким образом, получился проект ASP.NET MVC, с которым мы работаем через Visual Studio. В проекте есть папка с БЭМ блоками и при сборке проекта через VS вместе с компиляцией кода на C# происходит сборка БЭМ-бандлов: серверные шаблоны, клиентский js и стили.

Серверная шаблонизация

Чего хотелось иметь в проекте на .NET:

  • возможность переопределять любые куски шаблонов;
  • возможность использования одних и тех же шаблонов на клиенте и на сервере;
  • возможность реиспользовать инфраструктуру без танцев с бубном в каждом проекте.

Хочется иметь библиотеку, которую можно подключить к проекту из NuGet и чтобы внутри у нее был полноценный шаблонизатор BEMHTML.

Решено было попробовать запустить bemhtml внутри .NET приложения с помощью какой-нибудь .NET обертки над node. Выбрал EDGE.js. Он умеет запускать ноду внутри .NET процесса (на текущий момент, только на .NET 4.5 под Windows, но написано, что будет и поддержка .NET Core). Созданный экземпляр можно кэшировать, чтобы не создавать несколько раз контекст v8.

Сначала провел небольшой эксперимент - отрендерил простой шаблон в консольном приложении.

Output

Основа всего - вот такой класс:

public class Bemhtml
{
    private readonly Func<object, Task<object>> func;

    public Bemhtml(string template)
    {
        this.func = Edge.Func(template + "; return function (data, cb) { cb(null, exports.apply(data));}");
    }

    public async Task<string> Apply(object data) 
    {
        return await func(data) as string;
    }
}

Ему в конструктор нужно передать текст bemhtml-бандла, сгенерированного с помощью bemhtml.generate(...) (это ровно то, что мы делали во время сборки шаблонов). Содержимое бандла примерно такое:

// код шаблонизатора BEMHTML
...

// шаблоны, обернутые в вызов функции compile
var api = new BEMHTML({});
api.compile(function(...) {
    // тут шаблоны, например:
    block('my-block').content()('123');
});

// помещаем скомпилированные шаблоны в переменную exports
api.exportApply(exports);

Далее мы доклеиваем к этому коду возврат функции, которая будет выполняться при вызове шаблонизации из .NET. Она получает данные и callback, шаблонизирует данные и результат передает входным параметром в callback:

return function (data, callback) { callback(null, exports.apply(data));}

Сгенерированный код мы передаем в Edge.Func("сгенерированный код") и получаем экземпляр .NET функции Func<object, Task<object>>, которую можно использовать из программы на C#. Функция - асинхронная (она возвращает Task<object>) и мы вызываем ее через await, либо используем примерно таким образом:

var obj = func(data);     // вызываем функцию
obj.Wait();               // ждем окончания выполнения
Console.Write(obj.Result) // в obj.Result результат шаблонизации

После того, как в консольном приложении шаблонизация отработала успешно, я написал небольшую библиотеку для использования в веб-приложениях ASP.NET MVC. Там есть:

  • класс-обертка над js шаблоном (описанный чуть выше),
  • менеджер шаблонов, отвечающий за создание экземпляров шаблонов и управляющий их кэшированием
  • ActionResult с помощью которго можно передать данные из серверного контроллера в BEMHTML.

    Что получилось

Сейчас есть небольшое ASP.NET MVC приложение, которое состоит из одной странички, отрендеренной с помощью BEMHTML. В приложение подключены bem-core и bem-components. Страничка открывается и, кажется, всё работает.

Посмотреть код можно здесь, а потыкать мышкой (и посмотреть в инспекторе) можно здесь.

Дальнейшие планы

  • параметризация и вынос параметров в конфиг .NET проекта;
  • отладка шаблонов на сервере (вроде EDGE.js это позволяет; идеальный вариант - если в качестве отладчика получится подключить Visual Studio, в которой открыт код проекта);
  • выложить в NuGet библиотеку с классами для ASP.NET MVC;
  • написать более сложный пример (с более сложными серверными данными и шаблонами);
  • потестировать производительность.

Также в планах - адаптировать этот текст для людей, ничего не знающих про БЭМ и запостить на хабр.

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

14 мая на сцене Университета ИТМО в Санкт-Петербурге состоится конференция WebDev Talks&Works.

Среди спикеров Антон Виноградов, который расскажет про дизайн-системы глазами и руками разработчика, организацию работы с дизайнерами и вёрстку уровня ”бог“.

Не пропустите!