Привет! В этом выпуске мы собрали для вас последние новости из мира БЭМ с начала 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 на БЭМ библиотеках:
    • https://codepen.io/miocene/pen/wymRWL?editors=0100
    • https://codepen.io/miocene/pen/MQqjyL?editors=0010
    • https://codepen.io/miocene/pen/ddQyMq?editors=0100

Технологии

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

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

Stay BEMed!