Войти с помощью 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!

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

В прошлый раз участники жаловались, что сложно выбраться в рабочий день. Мы вас услышали и теперь проводим мероприятие в воскресение, 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!

Встречайте обновленный bem.info! Мы изменили дизайн и улучшили навигацию. Пользуйтесь и пишите ваши отзывы и предложения!

Stay BEMed! bem info 2018-02-05 12-32-36

Опубликовали новую статью по мотивам первого БЭМпа для новичков! Материал будет полезен всем, кто только начинает знакомство с БЭМ и версткой в целом.

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-express.

Если вы еще до конца не разобрались, как внутри него все устроено, то для вас мы написали tutorial: «Переходим на сторону сервера с bem-express».

API bem-express

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.info!
Мы обновили часть старых документов и опубликовали новые:

To be continued...

UPD: Опубликовали скринкаст митапа!

30 июня в московском офисе Яндекса пройдет очередная встреча БЭМ-сообщества.

В этот раз мы решили последовать общему реактовому тренду и ответить на ваши вопросы про разработку на БЭМ и React. Мы расскажем про нашу библиотеку bem-react-core и про всё, что успели сделать в этом направлении, ответим на ваши вопросы про React/БЭМ и не только.

По традиции на БЭМапе мы ответим на все вопросы, которые вы зададите в комментариях к этому анонсу.

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

https://www.youtube.com/watch?v=ztDWggzH8W4

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

Может кому будет интересно.

Написал модуль enb-markdown для enb. Он содержит две технологии:

  • markdown — собирает файлы Markdown с уровней в бандл
  • markdown-to-html — конвертирует бандл Markdown в HTML

markdown-to-html — это обёртка над пакетом markdown-bemjson, который позволяет задавать свои правила конвертации в BEMJSON. В markdown-to-html добавлена возможность пробрасывать пользовательские данные из пользовательских правил конвертации в ctx базового блока.

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

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

Часть 1 https://www.youtube.com/watch?v=4QblH4SKeIg

Часть 2 https://www.youtube.com/watch?v=MFlqi5maFX8

Роль сборки в БЭМ-проектах, сборка БЭМ-проектов с помощью Gulp

Спикер Дима Андриянов. https://www.youtube.com/watch?v=n0iF2zxa3DY

21 апреля в московском офисе Яндекса мы проведем третий митап по БЭМ в этом году. Первая встреча была для тех, кто только знакомится с БЭМ. На второй — мы рассказали, как собирать БЭМ-проект и как подружить БЭМ с React-компонентами. На этот раз мы приготовили для вас мастер-класс, чтобы показать БЭМ на живом примере.

Видео с предыдущих встреч можно найти на нашем форуме.

В рамках мастер-класса:

  • Напишем БЭМ-проект на основе project-stub.
  • На примерах покажем, для чего нужны технологии BEMJSON, BEMTREE, BEMHTML, DEPS, и как использовать их вместе.
  • По традиции ответим на все вопросы, которые вы зададите в комментариях к этому анонсу.
  • Вопросы, которые возникнут во время мастер-класса, конечно, тоже не оставим без ответов :)

Митап пройдет в пятницу, 21 апреля в московском офисе Яндекса с 19:00 до 22:00.

Участие, как всегда, бесплатно, но количество мест в зале ограничено, так что успейте зарегистрироваться!

Stay BEMed!

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

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

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

BEMup пройдет в четверг, 13 апреля в екатеринбургском офисе Яндекса с 19:00 до 22:00. Участие, как всегда, бесплатно, но количество мест в зале ограничено, так что успейте зарегистрироваться!

Stay BEMed!

Привет!

Мы работаем над новой версией этого форума и в процессе родилась библиотека bem-textarea-editor с блоком editor, позволяющим писать текст на маркдауне с удобной панелью инструментов (примерно как на github) и получать превью до отправки поста на сервер.

Получилось хорошо, поэтому мы решили опубликовать библиотеку в open source. Вдруг вам тоже пригодится? :)

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

Привет!

Мы, наконец, выпустили новые версии bem-core и bem-components!

bem-core 4.2.0

Версия полностью обратносовместимая, так что обновление должно быть совершенно «бесплатным».

Главным изменением является совместимость с bem-xjst 8.x. Кроме того в версию вошла большая работа по переводу документации на английский и, конечно же, исправления ошибок и мелкие улучшения. Подробности читайте в changelog.

bem-components 5.1.0

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

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

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

bem-components 6.0.0

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

При переходе вам может пригодиться автоматический мигратор шаблонов: https://github.com/bem/bem-xjst/tree/master/migration#migration-tool-for-templates

Кроме новых шаблонов версия ничем не отличается от 5.1.0.

Где попробовать

Свежие bem-core 4.2.0 и bem-components 6.0.0 уже внедрены в project-stub.

Если при обновлении у вас возникнут какие-либо проблемы — пишите, мы постараемся помочь.

Вебинар по БЭМ Немного БЭМ в вашем React переносится на 29 марта. Теперь вам не придется выбирать между двумя интересными событиями:

Stay BEMed!

Буквально на днях мы анонсировали библиотечку bem-font-awersome, которая предоставляет возможность использовать Font Awesome с использованием БЭМ-нотации и без необходимости тянуть лишние стили.

На этот раз мы пошли дальше и распилили шрифт на отдельные SVG-иконки, так что теперь на клиент приедет только то, что реально используется.

Новую библиотеку назвали bem-font-awesome-icons. Она предоставляет иконки в виде модификаторов блока icon в двух вариантах: как фоновая картинка (модификатор bg) и инлайном через шаблоны BEMHTML и BH, чтобы иконки можно было стилизовать через CSS (через модификатор glyph).

Поставляется библиотека через npm или bower.

Подробности см. в документации: https://github.com/tadatuta/bem-font-awesome-icons

UPD: Опубликовали видео.

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

Мы расскажем:

  • О новостях БЭМ из мира React. О том как развивается библиотека bem-react-core, которая позволяет декларативно работать с React-компонентами в рамках БЭМ-методологии. Спикер Антон Виноградов.
  • О сборке веб-приложений из блоков в общем и о сборке БЭМ-проектов с помощью Gulp (а, возможно, и ENB) в частности. Спикер Дима Андриянов.

BEMup пройдет в пятницу, 24 марта в московском офисе Яндекса с 19:00 до 22:00.

Регистрация уже открыта: https://events.yandex.ru/events/bemup/24-march-2017/ Присоединяйся!

Stay BEMed!

UPD: Опубликовали альтернативный вариант, см. https://ru.bem.info/forum/1274

Привет!

Мы написали скрипт, который нарезает стили Font Awesome на отдельные файлы и раскладывает их по БЭМ методологии:

fa/
    fa.css # общие стили
    _icon/
        fa_icon_500px.css
        fa_icon_address-book-o.css
        fa_icon_address-book.css
        fa_icon_adjust.css
        fa_icon_adn.css

Соответственно использование в BEMJSON выглядит так:

{ block: 'fa', mods: { icon: '500px' } }

А в HTML:

<div class="fa fa_icon_500px"></div>

Результат выполнения скрипта опубликовали в npm, так что теперь вы тоже можете сэкономить несколько десятков килобайт при использовании ограниченного набора иконок.

Для это потребуется установить библиотечку к себе на проект: npm i bem-font-awesome --save и добавить ее в сборку в качестве уровня переопределения.

Исходники лежат тут: https://github.com/tadatuta/bem-font-awesome

UPD: Изменилась дата проведения вебинара: 29 марта, 18:00. Ссылка на трансляцию обновлена.

29 марта, Антон Виноградов расскажет про новую для БЭМ-сообщества библиотеку bem-react-core, которая позволяет разрабатывать веб-приложения с использованием React и БЭМ-методологии.

Если вы уже знакомы с методологией и библиотекой от Facebook, то самое время начать использовать bem-react-core — декларативно описывать React-компоненты, гибко их доопределять и использовать уровни переопределения.

В рамках вебинара:

  • рассмотрим внутреннее устройство библиотеки;
  • расскажем основные принципы работы;
  • разработаем веб-приложение на основе create-bem-react-app-генератора.

Трансляция начнется 29 марта в 18:00 на отдельной странице. https://www.youtube.com/watch?v=UeqPPkGXmbE

Как мы уже писали, в конце месяца мы проведем очередной BEMup.

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

  • поддержка HOC;
  • сокращенный синтаксис модификаторов;
  • тесты;
  • create-bem-react-app;
  • поставка дистрибуционного пакета;
    • целая пачка мелких улучшений и фиксов.

Задавай свои вопросы в комментариях к посту, и спикер постарается ответить на них в своём выступлении.

Уже в конце месяца мы проведём очередной BEMup. В этот раз мы решили рассказать про спикеров и доклады ещё до официального анонса и открытия регистрации.

Дима Андриянов расскажет всё про сборку веб-приложений из БЭМ-блоков с помощью Gulp и, возможно, ENB.

Если у тебя есть вопросы по этой теме, можешь писать их в комментариях к этому посту. Тогда докладчик ответит на них во время своего выступления.

Привет!

Мы, наконец, выпустили bem-history v4.0.0. История изменений.