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

Привет! В этом выпуске мы собрали для вас последние новости из мира БЭМ с начала 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. Но грядут изменения, так что следите за новостями!

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

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

Технологии

bem-express

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

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

Разное

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

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

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

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

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

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

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

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

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.

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

Всем привет!

Кратко об основных изменениях и новостях в мире БЭМ за прошедшие 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.

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

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

  • Выпустили 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:

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

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

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

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