Дайджест новостей по БЭМ. Выпуск №15

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

Итак, главные новости полугодия:

БЭМ и React

Антон Виноградов пожелал всем добра и сообщил, что bem-react-corе v3 влита в master и с этого момента становится основной рекомендованной версией библиотеки для работы с БЭМ в React мире. А вот версии v1 и v2 больше поддерживаться не будут, но еще какое-то время будут доступны в ветках.

Репозиторий bem-react-core переименован в bem-react для соответствия с npm неймспейсом @bem-react, где находятся все пакеты библиотеки.

Инструменты

Выпустили @bem-react/* пакеты.
Опубликовали пакет enb-js-browserify в npm. Используйте его, чтобы получить commonJs в своем клиентском коде.

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

Обновили документацию к пакетам bem-sdk с живыми примерами в RunKit:

БЭМ и DESIGN

Опубликовали первую версию дизайн-системы Whitepaper.
Собрали портал http://whitepaper.tools.
Переехали в новую организацию на GitHub https://github.com/whitepapertools.

Все актуальные новости и анонсы ребята публикуют в Telegram канале whitepaper.

Мероприятия

Провели митап по БЭМ, где рассказали о библиотеке bem-react-corе v3, которая помогает работать по БЭМ-методологии в мире React. На простых примерах показали, как использование библиотеки делает ваши React-проекты гибче и проще в поддержке. Для всех, кто пропустил, мы записали видео.
Продолжили эстафету встреч для новичков: на этот раз провели два в дневных интенсива. Видео опубликовано на сайте событий Яндекса. Чтобы не пропустить следующий интенсив, подписывайтесь на новости БЭМ-сообщества.

Видео со всех встреч мы публикуем в канале bem.info на YouTube.

Всех с наступающими и наступившими праздниками! Stay BEMed!

Привет! В этом выпуске мы собрали для вас последние новости из мира БЭМ с начала 2018 года.

Из главных новостей:

Вектор развития БЭМ сместился в сторону React.js. Поэтому в этом выпуске вы ничего не найдете про обновления bem-core или bem-components. Но это не означает, что мы закапываем их в пользу новой библиотеки bem-react-core. Это значит лишь то, что БЭМ-методология еще раз доказала, что она применима к любому проекту: общие принципы сохраняются и помогают сделать любой проект легче и быстрее.
Мы продолжаем развивать БЭМ-инструменты и технологии.
Дизайнеры Яндекс.Денег начали большое дело про то, как БЭМ помогает создавать масштабируемую дизайн-систему. Пока официальное название проекта в разработке, но основные принципы уже определены.

БЭМ и React

bem-react-core

Не успел окончательно выйти bem-react-core@1.0.0, как мы приблизились к выходу bem-react-core@2.0.0.

Состав изменений предстоящего мажора:

полная поддержка TypeScript;
переезд самой библиотеки на TypeScript;
отказ от inherit;
честное наследование средствами языка;
инструментирование кода в базовых блока и модификаторах, честная работа с super;
классовая нотация записи блоков, элементов и модификаторов;
валидация объединенных пропсов базового класса и модификаторов;
отсутствие проблем со статическими свойствами класса;
отказ от изменения названий базовых методов React. Мы вернули component!
снижение веса библиотеки до 2.7KB вместо текущих 4KB;
раздельный релиз для Preact и React версий: bem-preact-core и bem-react-core.

Чтобы быть в курсе всего происходящего, следите за обновлениями.

БЭМ и DESIGN

С конца прошлого года дизайнеры Яндекса активно заговорили и начали публиковать свои наработки в дизайн системе. Пока все материалы собраны в репозитории bemdesign. Но грядут изменения, так что следите за новостями!

В каждом своем выступлении или статье ребята доказывают необходимость системного подхода, который предлагает БЭМ-методология: «Храните систему и система защитит вас от дальнейшего хаоса и направит в нужную сторону» (с.).

Что сделали за начало этого года и конец прошлого:

Сформировали 4-й слой дизайн-системы bem-layouts. Он состоит из двух блоков:
- tpl-layout для реализации общих обвязок/каркасов;
- tpl-grid управляет расположением блоков внутри секций.
Опубликовали статью Прототипирование на продакшн-технологиях.
Провели хакатон по «Тематическая карточная библиотека на основе паттернов/гайдов»
- cкетч на маркете: https://ui8.net/products/kit-bill
- bem-реализация на главной http://bem.design
Михаил Колосков выступил на PiterCSS (в DataArt) и на WDS (в Яндекс) с докладом «Прототипирование на продакшен-технологиях», где представил БЭМ-платформу как основной инструмент дизайнеров для построения интерфейсов. Рассказал про масштабируемую дизайн-систему и визуальную косметику, а также про фундаментальные библиотеки, необходимые для прототипирования.
- слайды: https://www.dropbox.com/s/9nu8ewqqq6xv8gt/pitercss.key?dl=0 (PiterCSS)
- видео: https://www.youtube.com/watch?v=Td18LyX9pRY&list=PLTdS5E3zupkGHuyXfRIZfes3UIffaAyCq&index=1 (PiterCSS)
- слайды: https://www.dropbox.com/s/85peg7rupysv1ur/wsd_16_9.key?dl=0 (WDS)
- видео: https://www.youtube.com/watch?v=YUKHcQJEELw&t=475s (WDS)
Юлия Музафарова на PiterCSS (T-Systems) рассказала про методологию, которая позволяет собирать интерфейс из простых сущностей по заданным принципам на основе OpenSource технологий.
- слайды: https://www.dropbox.com/s/xhzpmpuv7qbjfrp/piterCSS_27.02.18.key?dl=0
- демо Как собрать Spotify на БЭМ библиотеках:

Технологии

bem-express

Выпустили следующие обновления:

Обновили npm-зависимости.
Перешли на ES6.
Добавили поддержку ES7.
Добавили команду bem-create.

project-stub

Обновили project-stub для работы с последней версией bem-xjst. В gulp-bem исправили сборку клиентского BEMHTML.

bem-xjst

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

Из важного:

v8.9.3 — исправили деградации, появившиеся в v8.6.8.
v8.9.2
- добавили опцию singleQuotesInJsAttrs, которая делает HTML-результат шаблонизации data-атрибутов меньше — не экранируются двойные кавычки в JSON. Бонус — человекочитаемость HTML. Подробности в документации.
- Runtime linter: починили вывод стектрейса в случае циклических ссылок в BEMJSON.
v8.9.0 — упростили синтаксис для легких шаблонов. Теперь можно использовать object-like запись:
```
block('link')({
    tag: 'a',
    addMix: 'outer-link'
})
```
Примеры можно смотреть тут.
v8.8.6 — устранили создание HTML-класса i-bem при cls() и bem:false.

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

Инструменты

bem-sdk

Исправили баги в config (#295, #297, #298, #299), import-notation (#264, #289), в тайпингах entity-name (#305), и дропнули ES6 код в naming.entity.stringify — теперь можно безопасно использовать в браузерах

gulp-bem

Объединили gulp-bem пакеты в монорепозиторий. Теперь проще обновлять пакеты, документацию, чинить общие баги, и допиливать хотелки.
Выпустили тестовую версию gulp-bem-src с жестким кешированием интроспекции и графа. Тестирование показало прирост скорости по сравнению с enb на большом количестве деклараций и с распараллеленным gulp-bem-bundle-builder.

bem-tools

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

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

Опубликовали новый документ про то, как быстро попробовать блоки библиотеки bem-components и начать ими пользоваться — Dist bem-components: подключаем блоки на страницу.
Обновили руководство по созданию динамического проекта на bem-express — Создаем динамический БЭМ-проект.
Опубликовали статью по мотивам первого митапа по БЭМ для новичков: БЭМ для начинающих. Очевидные и неочевидные вопросы верстки.
Обновили подборку полезных видео и статей по БЭМ.

Сайт bem.info

Изменили дизайн bem.info:

bem info 2018-02-05 12-32-36

Мероприятия

Провели серию митапов по БЭМ, посвященных bem-react-core.
Опробовали новый формат встреч и провели два интенсива на целый день, на которых Владимир Гриненко рассказал про БЭМ от азов до React.js.
Владимир Гриненко побывал в гостях у Frontend Weekend №38 и рассказал про БЭМ и работу в Симферополе.
Провели хакатон по инструментам БЭМ. Большинство результатов уже включены в этот выпуск дайджеста. Следите за новостями, если хотите принять участие в следующем хакатоне!

Видео со всех встреч мы всегда публикуем в канале bem.info на YouTube.

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-awesome — bem-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-express.
Опубликовали новый документ про то, как описывать зависимости в БЭМ.
Написали спецификацию для DEPS в БЭМ.
Добавили новые документы в разделе Методология:
Переработали FAQ: обновили старые вопросы и добавили новые.
Обновили документы в методологической части сайта.
Обновили раздел с обучающими материалами: добавили подборки с видео и ссылки на БЭМ-проекты и разделили информацию на две группы:
- Проекты — пошаговые инструкции для получения конечного результата.
- Темы — подробные руководства по отдельным технологиям или инструментам.
Систематически пополняем список статей про БЭМ от внешних источников.

Сайт bem.info

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

Мероприятия

2017-12-28 14 13 30

Конференции

FullStack Conference. Владимир Гриненко и Сергей Бережной выступили с докладом BEM — The unknown.
HolyJSconf в Питере. Владимир Гриненко рассказал о зависимостях в компонентном вебе — Зависимости в компонентном вебе, сделанные правильно.
United Dev Conf в Минске. Владимир Гриненко выступил с докладом Dependencies in component web done right. Слайды к докладу в keynote.
Я.Субботник по фронтенду. Сергей Бережной рассказал, как совместить преимущества БЭМ и React.
React Moscow Meetup #2. Сергей Бережной рассказал, что нового в bem-react-core.
DevCon School: Технологии будущего. Дмитрий Андриянов и Антон Виноградов выступили с докладом «Разрабатываем ASP.NET MVC приложение с БЭМ-фронтендом».
Web Development Conference. Владимир Гриненко выступил с докладом Dependencies in component web done right.

Митапы по БЭМ

Провели целую серию 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-компоненты, гибко их доопределять и использовать уровни переопределения.

Разное

Рассказали на форуме об опыте внедрения gulp-bem.
Антон Виноградов ответил на вопросы про bem-xjst и React.
Занялись портированием Animate.CSS на БЭМ. Инструкция по подключению.
Возродили канал bem.info на Youtube. Теперь все новые видео с докладами и вебинарами вы сможете находить тут. Подписывайтесь!

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

Новости библиотек
Новости технологий
Новости инструментов
Новости БЭМ из мира React
Новости документации
Новости сайта bem.info
Новости мероприятий и сообщества

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

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

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

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

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

Большой и полезный туториал по всему БЭМ-стеку: Переходим на сторону сервера с bem-express от Сергея Бочарова уже опубликован в нашем разделе обучающих материалов.
Новые документы в разделе Методология:
Переработанные и обновенные документы:

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

Обновили форум.

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

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

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

Новости документации
Новости библиотек
Новости технологий
Новости инструментов
Новости БЭМ из мира React
Новости мероприятий и сообщества

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

Переработали FAQ: обновили старые вопросы и добавили новые.
Обновили документы в методологической части сайта.

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

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

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

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-awesome — bem-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:

Провели вебинар Немного БЭМ в вашем React.
Рассказали на митапе по БЭМ. Видео доклада Новости БЭМ из мира React.
Рассказали на React Moscow Meetup #2.

bem-react-components

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

create-bem-react-app

Важный приятный пункт — 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. Теперь все новые видео с докладами и вебинарами вы сможете находить тут. Подписывайтесь!

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

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

Полностью обновили документ про сборку БЭМ-проектов. Свежий, красивый и понятный читайте на bem.info.
Опубликовали новый документ про то, как описывать зависимости в БЭМ.
Написали спецификацию для DEPS в БЭМ.
Внесли много мелких правок в методологической части документации.

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

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

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

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.

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

Выступили на DevCon School: Технологии будущего с докладом «Разрабатываем ASP.NET MVC приложение с БЭМ-фронтендом».
Рассказали на форуме об опыте внедрения gulp-bem.
Антон Виноградов ответил на вопросы про bem-xjst и React.
Занялись портированием Animate.CSS на БЭМ. Инструкция по подключению.
Работаем над библиотекой блоков для типографики.
Провели BEMup для новичков, где рассказали про независимые блоки с самого начала — очень понятно и без BEMJSON/BEMHTML/bem-tools. Поговорили про сценарии, когда один проект требуется распараллелить на несколько разработчиков. Для тех, кто пропустил, опубликовали скринкаст с BEMup'а для начинающих.
https://youtu.be/Ai-yt0b8iKE

Всем привет!

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

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

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

Быстрый старт для начинающих знакомиться с БЭМ — он по-настоящему простой, без bem-tools и BEMJSON.

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

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

Закончили работу над стабильной версией 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.

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

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

Выпустили bem-core 2.8.0. Главная тема релиза — интернационализация (i18n) из коробки.
Продолжаем работать над мажорным релизом bem-core, который принесёт множество заметных улучшений в ядро.
Выпустили bem-components 2.4.0. Главная тема релиза — обеспечение доступности (a11y) контролов, теперь они не уступают нативным.
Выпустили bem-history 3.1.0.
Реализовали dist-поставку библиотек bem-core и bem-components: вы можете подключить собранные CSS + JS и использовать блоки, просто копируя HTML из документации на bem.info.
Силами сообщества, выпустили bem-grid 2.2.0 и готовится к выпуску bem-forms 1.0.0.
Новости технологий

Полностью переписали https://github.com/bem/bem-xjst — ядро для BEMHTML и BEMTREE. Оно стало заметно быстрее (как при сборке, так и при выполнении шаблонов), не требует компиляции, позволяет добавлять новые шаблоны в рантайме и вот-вот обзаведется новыми полезными фичами вроде source maps. Попробовать на деле можно здесь.

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

В начале декабря мы провели очередной Хакатон по БЭМ, посвященный разработке инструментов.

По итогам Хакатона появились:

Кроме этого, мы активно работали над ENB:

Выпустили ENB 1.0.0.
Поработали над плагинами ENB:
- enb-bem-techs v2.0.0
- enb-stylus v2.0.0
- enb-bh v1.0.0
- enb-xjst v2.0.0 и enb-bemxjst v2.0.0
- выпустили новый плагин для ENB, который ведет себя, как DefinePlugin для Webpack: ищет в коде бандла плейсхолдеры с названием переменных и заменяет их на соответствующие значения.
  Новости документации

Опубликовали новые документы:

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

Обновили документы:

Как создать свой проект на БЭМ — документ обновлён до новых версий библиотек.
История создания БЭМ.
Новости мероприятий
Провели два вебинара по БЭМ:
- первый про декларативные шаблоны, провел @vitkarpov;
- второй про i-bem.js — @tadatuta.
Организовали большой Хакатон по БЭМ, который был посвящен разработке инструментов для БЭМ. Хакатон был в основном внутренним, снаружи мы пригласили всего трёх человек. Отчеты о хакатоне и реализованных проектах можно прочитать в блоге на bem.info.
@tadatuta рассказал подробный доклад на Субботнике о том, чем bem-components отличается от Bootstrap и в чем его превосходит.
Ещё @tadatuta провел вебинар на GeekWeek про разработку веб-интерфейсов по БЭМ-методологии.
В мире БЭМ
BEM – CSS Code Organization Methodology.
Длинная телега про Бутстрап.
BEM, Sir!.
19 принципов разработки по БЭМ, или что должен знать каждый разработчик библиотек.
Плагин для posthtml будет особенно полезен тем, кто хочет продолжать писать HTML руками.

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