Привет!

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

По просьбе в нашем Телеграмм-чатике опубликовали мини-библиотечку bem-calendar с календарем на основе bem-components.

Выглядит он вот так:

Пользуйтесь на здоровье!

Недавно пришлось пописать на PUGJS... долго не смог это терпеть. Пришлось запилить 100 строчек кода, что бы писать нормальные шаблоны на BEMHTML в ExpressJS.

Код доступен как модуль https://www.npmjs.com/package/express-bem-xjst

Он умеет правильно работать с уровнями, кешируется и даже ничего не портит. Пробовал подключать bem-components — шаблонизирует все правильно.

Приятного использования тем, кто больше не может использовать ничего кроме BEM-XJST в шаблонах 😉

Внезапно, пятничным вечером мы обновили БЭМ в вашем React.

Состав изменений:

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

И, конечно, мы обновили документацию, где очень подробно про все написали на русском и английском языках ;)

https://youtu.be/cDLhO3Psygc

Привет!

Уже в эту пятницу, 27 января в московском офисе Яндекса пройдет очередной митап по БЭМ для новичков.

Мы продолжим обсуждать темы, которые затронули на предыдущей встрече. Кстати, если вы ее не посетили и еще не успели посмотреть записать — сейчас самое время!

https://www.youtube.com/watch?v=Ai-yt0b8iKE

Кроме того, в программе:

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

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

До встрече на BEMup-е :)

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

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

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

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

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

• bem-components
• bem-core

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

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

Привет!

Сегодня в bem-history появилась веточка v4, совместимая с bem-core v4.

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

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

Приятного использования!

Привет!

Только что bem-express получил очередную партию мажорных обновлений:

1. Обновление bem-core до версии ^4.1.1 и bem-components до ^5.0.0.
2. Переход со Stylus к PostCSS, из коробки поставляется тот же набор плагинов, что и в bem-components.
3. Внедрение опционального livereload. Подробнее см. https://github.com/bem/bem-express/blob/master/development.blocks/livereload/livereload.md и в README проекта.
4. Ускорение сборки за счет прогрева npm-модулей, необходимых для сборки. Теперь обновление стилей у меня на ноутбуке занимает ~300мс и не требует перезагрузки браузера.
5. Отказ от bower для поставки библиотек. Теперь все зависимости ставятся через npm в папку node_modules.

Приятных вам апдейтов в новом году!

Привет, друзья!

Мы наконец-то выпустили долгожданную версию bem-components 5.0.0! Это там самая версия, которая под капотом использует bem-core 4.1.1. Как и в bem-components 4.0.0, в версию вошли сразу 2 набора стилей: исходники на postCSS и скомпилированный CSS на случай, если вы предпочитаете использовать какой-нибудь препроцессор.

В ближайшее время на bem.info появится документация на эту версию.

Кстати, вы обратили внимание, как круто она выглядит в новом дизайне?

https://youtu.be/Ai-yt0b8iKE

Всем привет!

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

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

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

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

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

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

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

Привет, дорогой друг. Я хочу поделиться историей развития сборки в БЭМ.

Если ты из тех, кто совсем не любит читать большие тексты, то знай «Собирать проекты на БЭМ проще, чем скушать пирожок».

Заинтригован? Приходи на BEMup.

А теперь суровые подробности.

Первый кусочек пирога

В первом подходе мы решили проверить, возможно ли собрать самый простой БЭМ проект на чём-то, кроме ENB.

Под роль самого простого проекта лучше всего подходит project-stub: один бандл, минимум зависимостей, минимум кода.

В качестве чего-то, кроме ENB, мы выбрали Gulp. Как минимум это один из самых популярных инструментов для сборки с богатой «экосистемой» плагинов. Кроме того, Gulp не является готовым инструментом в отличии от большинства конкуретнов, это фреймворк для написания своих систем сборок. Такие его особенности дают определённую гибкость.

Так появился пакет gulp-bem. Что он умеет делать? Правильно, собирать project-stub и ничего больше.

Мы тогда даже не ленились и написали постик об этом.

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

Второй кусочек пирога и бутылка рома

Во втором подходе мы решили, что важно проверить ещё одну гипотезу. Состоит она из двух частей:

1. Можно ли собирать реальный проект? Посложнее, чем project-stub.
2. Можно ли собирать примеры, тесты и документаци?

Стандартные двухдневные посиделки привели нас к ряду идей.

Идея атомарного модуля для получения исходников

Модуль: gulp-bem-src.

Почти как gulp.src(), только bem.src().

Ну вы же знаете, что слово БЭМ делает любой модуль как минимум в 2 раза лучше, а тут даже в 3 раза получилось.

Идея о создании бандлов из чего угодно

Модули: gulp-bem-bundler-fs, gulp-bem-bundler-examples.

Бандлы, они как алкоголь, их можно добыть из чего угодно, даже из других бандлов.

Идея об универсальной сборке бандлов

Модуль: gulp-bem-bundle-builder.

Один раз придумали, как собирать ваш CSS и собирайте его так хоть для документации, хоть для вашей бабушки.

Хелперы

Заодно появились хелперы для сборки шаблонов: gulp-bem-xjst, gulp-bh.

В этот раз постик мы не написали. Но пирожок всё равно заслужили, правда-правда!

Пирожок SDK

Между делом появился замечательный BEM SDK — набор атомарных модулей. Каждый модуль решает одну задачу.

В третьем подходе мы делали всё, чтобы наш малыш (BEM SDK) совсем повзрослел. И кажется, ещё совсем чуть-чуть и он отправится в мир похоти и разврата (ENB в живых сервисах).

Вот только некоторые крепыши: bem-naming, bem-walk, bem-decl, bem-graph, bem-deps, bem-bundle.

Пока пирожок не заветрил

Чтобы всё произошло, осталось не так уж и много:

1. Начать использовать BEM SDK в сервисах.
2. Дописать недостающие хелперы для i18n, borschik, и т.д.
3. Написать генераторы бандлов для тестов, примеров и документации.

1-2 октября мы соберёмся, чтобы совершить ещё один подход к снаряду под номером четыре.

О том, что получилось обязательно расскажем.

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

Очередной BEMup пройдет в пятницу 30 сентября в московском офисе Яндекса c 19:00 до 22:00. В теплой и дружеской атмосфере команда БЭМ поделится планами и идеями на ближайшее будущее.

Предварительная программа:

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

Если у вас есть непреодолимое желание выступить на BEMup со своим докладом — пишите нам на info@bem.info.

Форма регистрации: https://events.yandex.ru/events/bemup/30-september-2016/. Присоединяйтесь!

Всем привет!

29 сентября в 19:00 Алексей @zxqfox Ярошевич проведет вебинар про сборку проектов с помощью gulp.

На вебинаре вы научитесь собирать с помощью gulp и модулей любые БЭМ-проекты: как простые статичные HTML-странички для верстки по макету, так и сложные сервисы на node.js, генерирующие BEMJSON в рантайме.

Запись трансляции 19:00 29 сентября доступна по ссылке: https://youtu.be/l1G425VcUUg

Привет. Наверное, стоит отдельно попиарить, что теперь в bem-xjst есть опция runtimeLint. С помощью неё вы сможете получать предупреждения о нежелательных или опасных местах в ваших шаблонах и входных данных (BEMJSON-е). Включить опцию можно начиная с версии 7.2.0 вот так. Предупреждения можно будет поймать в STDERR.

Вот краткое описание какого рода проверки выполняются уже сейчас.

Булевы атрибуты

Актуально для тех, чей проект раньше использовал шаблонизатор версии ниже чем v4.x. Пример BEMJSON-а: { tag: 'input', attrs: { disabled: true } } Результат с v4.3.2: <input disabled=“true”/> Результат с v4.3.3: <input disabled/>

Подробнее об изменениях в описании к релизу: https://github.com/bem/bem-xjst/releases/tag/v4.3.3

elemMods вместе с block вместо mods

В 5.0.0 был исправлен баг который приводил к неверному трактованию полей mods и elemMods. Подробности есть в описании релиза. Сейчас если вы попытаетесь передать в BEMJSON что-то типа { block: 'b', elemMods: { … } }, то получите warning.

Изменения this.ctx.mods через шаблоны

Такие фокусы будут награждены предупреждением, потому что хороший шаблон не должен иметь сайдэффектов, и не должен изменять входной узел BEMJSON-а. Чтобы изменить модификаторы вы должны использовать this.mods.

Атрибуты class или data-bem созданные через BEMJSON-поле attrs или шаблон режима attrs()

Для генерации HTML-класса используйте режим cls(). Для генерации параметров для клиентского JS используйте режим js(). Иначе будет вываливаться предупреждение.

Проверки нейминга

Имена блоков, элементов, модификаторов, а так же значения модификаторов не должны содержать разделителей имени элемента (обычно это __) и разделителей модификаторов (_).

Миксы модификаторов к таким же модификаторам

Всевозможная акробатика вида { block: 'b', mix: [ { mods: { type: 'test' } }, { mods: { type: 'shmest' } } ] }, будет награждена предупреждением.

---

Если у вас есть идеи какие проверки можно добавить еще — пишите мне. Спасибо.

Продолжение следует.

Настоящим постом хочу продемонстрировать вам как будет выглядет API bem-xjst v8.x. Все пока на стадии RC, поэтому хочу выслушать ваше мнение по поводу всего этого.

Изменения, которые войдут в v8.x

• Все режимы теперь ведут себя одинаково: переопределяют значение из BEMJSON. (major)
• Добавлены недостающие режимы: mods() и elemMods() для установки модификаторов. (minor)
• Добавлены шорткаты режимов для добавления: addMix(), addAttrs(), addMods(), addElemMods(), addJs(). (minor)
• Добавлены шорткаты для добавления content: appendContent() и prependContent(). (minor)

TLDR; Песочница bem-xjst v8.x RC: https://goo.gl/ZeY4xL, в которой можно попробовать все эти вкусности…

Технические подробности

1. Все режимы теперь ведут себя одинаково: переопределяют значение из BEMJSON. (major)

Сейчас значение из шаблона режима content(), bem(), cls(), tag() переопределяет значение указанное в BEMJSON. Если вам нужно расширить значение из BEMJSON в шаблоне нужно использовать applyNext() и this.extend()/concat().

Однако режимы mix(), js(), attrs() сейчас расширяют значение из BEMJSON.

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

В v8.x мы привели все режимы к одинаковому явному поведению: переопределение значения из BEMJSON. Если вам нужно добавить что-либо, то теперь это можно будет сделать в явном виде — см п.3.

2. Добавлены недостающие режимы: mods() и elemMods() для установки модификаторов. (minor)

Под капотом эти режимы просто шорткаты к уже привычным всем конструкциям:

// mods()({something: myValue})
def()(function() {
    this.mods = {something: myValue};
    return applyNext();
});

и

// elemMods()({something: myValue})
def()(function() {
    this.elemMods = {something: myValue};
    return applyNext();
});

Как видно из примеров режимы mods() и elemMods() не имеют своей собственно очереди шаблонов, а добавляют шаблоны в стек к режиму def().

По умолчанию mods() и elemMods() возвратят вам значения из this.mods и this.elemMods соответственно.

Пример:

// BEMJSON
{ block: 'b' }

//Шаблоны
block('b').def()(function() {
  return JSON.stringify(apply('mods'));
});

//Результатом будет:
[]

3. Добавлены шорткаты режимов для добавления: addMix(), addAttrs(), addMods(), addElemMods(), addJs().

Так как все режимы теперь переопределяют значение, то чтобы компенсировать необходимость писать applyNext() для накапливания результата были введены шорткаты для уже существующих режимов add*().

Под капотом addJs()({ somekey: someval }) это

js()(function() {
  return this.extend(applyNext(), { somekey: someval });
});

Под капотом addMix()({block: 'mixed' }) это

mix()(function() {
  var res = applyNext();
  if (!Array.isArray(res)) res = [ res ];

  return res.push({block: 'mixed' })
})

Для остальных режимов аналогично. Как видно из примера шорткаты add*() не имеют своего стека шаблонов, а просто добавляют шаблон в стек соответствующего режима.

И, естественно, вы можете накапливать результат:

// Шаблоны
block('b')(
   addJs()({ a: 1 })
   addJs()({ b: 2 })
   addJs()({ c: 3 })
);

// BEMJSON
{ block: 'b' }

// Результат:
<div class="b b_type_awesome i-bem" data-bem='{"b":{"a":1,"b":2,"c":3}}'></div>

4. Добавлены шорткаты для добавления content: appendContent() и prependContent().

// Шаблоны:
block('b')(
    appendContent()(', templates!'),
    appendContent()('!!1'),
    prependContent()('(〜￣▽￣)〜 ')
);

// BEMJSON
{ block: 'b', content: 'Hello' }

// Результат:
<div class="b">(〜￣▽￣)〜 Hello, templates!!!1</div>

Как вы уже наверное догадались, это тоже шорткаты и они добавляют шаблоны в стек режима content(). Пример:

// appendContent()(', templates!') это тоже самое что и:
content()(function() {
  return [
    applyNext(),
    ', templates!'
  ];
});

Привет!

Мы приготовили для вас демо-проект на ASP.NET MVC, иллюстрирующий решение типовых задач с помощью БЭМ-инструментов.

• Исходный код на github.com
• Live demo

В readme подробно описано, как всё работает. Вы можете не только посмотреть исходный код, но и запустить демо-приложение на своем компьютере, чтобы попробовать в действии!

Завтра буду рассказывать про БЭМ и ASP.NET на Я.Субботнике. Подключайтесь к трансляции!

Привет!

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

В программе:

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

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

Как и обещал, выпустил Pobem@v1.

Список изменений (от версии 0.3.2)

Убрано : в декларациях блоков

Было

:block(block)

Стало

block(block)

Более чистый синтаксис

Больше не нужно для "каскадных" деклараций блоков (block, elem, mod) использовать &. Плагин сам склеивает и разбивает где нужно.

Было

:block(block) {
  &:elem(elem) {}
  &:mod(mod val) {
    width: 100px;
    &:mod(active) {
      &:elem(elem5) {}
    }
  }
  &:elem(elem1) {}
  &:elem(elem3) {}
}

Стало

block(block) {
  elem(elem) {}
  mod(mod val) {
    width: 100px;
    mod(active) {
      elem(elem5) {}
    }
  }
  elem(elem1) {}
  elem(elem3) {}
}

Переименовал Pobems -> Pobem

Такое название прощё запоминается

Синтаксис в виде цепочек (по аналогии с BEMHTML/BEMTREE)

Было

:block(block):elem(elem):mod(mod val)

Стало

block(block).elem(elem).mod(mod val)

Также сохранено

В качестве разделителя между mod val могут служить:

• пробел -
• запятая - ,
• стрелка - ->

Названия блоков могут быть как в кавычках, так и без.

block(block).mod(mod val) === block('block').mod('mod', 'val')

репозиторий NPM репозиторий GitHub

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

На вебинаре мы расскажем вам:

• Про проблемные места в имеющихся инструментах сборки и удобство модульного подхода.
• О целях организаций bem-sdk и gulp-bem на GitHub.
• Про интроспекцию своими руками по файлам компонентов ваших проектов и библиотек с помощью библиотеки bem-walk.
• О построении и использовании графа зависимостей и вычислении требуемых для сборки сущностей в различных технологиях (js, css, шаблоны) с помощью библиотеки bem-graph.
• О построении списка итоговых файлов компонент по .deps.js-файлам компонент с помощью bem-deps и bem-walk.
• Про сборку итоговых файлов для браузера из списка файлов компонент, полученных на предыдущем шаге, с помощью библиотек gulp-bem-*.

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

Трансляция начнется в 19:00 28 июля на отдельной странице. Ведущий вебинара — @zxqfox.

От создателей легендарного bemmet очередная штука, позволяющая писать меньше букв — bem-indent-syntax.

Demo вместо тысячи слов.

PS: Если наберется 10 звезд на github, сделаю плагин для Sublime ;)

Всем привет,

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

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

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

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

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

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

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

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

• Выпустили ENB 1.3

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

• enb-bemxjst 6.5.0
• enb-bem-examples 1.0.2
• enb-stylus 2.3.3
• enb-bh 1.2.0
• enb-bem-techs 2.2.1
• enb-bem-i18n 1.1.1

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

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

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

• Силами tadatuta@ провели вебинар о трехзвенной архитектуре сервисов на bem-xjst
• Сделали два доклада на Я.Субботнике по фронтенду https://events.yandex.ru/events/yasubbotnik/27-feb-2016/
• Провели очередной хакатон по БЭМ, продвинулись по модульной сборке и придумали способ подружить BEMHTML-шаблоны с React-ом.

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

• bemark: блог на БЭМ-технологиях
• БЭМ-технологии и Реакт
• БЭМ-технологии и .NET
• Учим IDE понимать код на i-bem.js.

2 года назад) некий @tadatuta на хакатоне написал тулзу для блогов из маркдауна и бэм-стека. Так вот после 2х лет забвения понадобилась мне тулза подобная чтобы на один манер собирать доки, блог, просто странички и тд. В общем случился форк, перерождение и отличный швейцарский нож для статики на bem-xjst и makrdown. https://github.com/awinogradov/bemark

Всем привет!

Сегодня мы зарелизили bem-core@v4.0.0-rc.1.

Это релиз-кандидат большого релиза bem-core@v4.0.0, который появится совсем скоро.

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

Уже доступен миграционный гайд и обновлённая документация на i-bem.js. Если вы не используете bem-components, то можно начинать изучать, крутить, вертеть и подключать к своим проектам новую версию bem-core.

Что нового и важного:

• Значительно упрощено и унифицировано API работы со всеми видами событий:

  this._domEvents().on('click', this._onClick);
  this._events(this.findChildBlock('button')).on('click', this._onButtonClick);
  

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

• Экземпляры для элементов перенесены в блоки i-bem и i-bem-dom и стали частью ядра. Теперь с элементами работать так же удобно, как с блоками:

this.findChildElem('button').setMod('disabled');

Подробнее в миграционном гайде.

• Функциональность элемента collection блока i-bem перестала быть опциональной. Все методы, возвращавшие несколько БЭМ-сущностей, теперь возвращают коллекции:

  this.findChildBlocks('control').setMod('disabled');
  

  Подробнее в миграционном гайде.

• Ленивая инициализация (поле live) разделена на две отдельные части — поле lazyInit и метод onInit(). Более явные названия без смешивания в одном месте двух вещей. Подробнее в миграционном гайде.
• Удалены и переименованы множество методов — API стало чище и понятнее.

Все подробности о миграции на новую версию читайте в миграционном гайде. А документация на i-bem.js уже содержит полностью обновлённую информацию.

Мы просим вас писать нам любой фидбек о найденных ошибках и проблемах на форум или сразу в тикеты, чтобы мы могли сделать обратно несовместимые исправления до полного релиза bem-core@v4.0.0.

P. S. Релиз-кандидат bem-components с bem-core@v4 внутри будет в ближайшее время. Также мы ещё допишем английскую версию документации, чейнджлог и миграционный гайд.

Выкатили украинскую версию

https://uk.bem.info

Будут ещё переводы на другие языки. Если хотите помочь или заметили ошибку — пишите.

Привет!

Только что вышел релиз bem-history 3.2.0.

Основное изменение — поддержка bem-core 3.x в bower.json. И, конечно, несколько багфиксов в комплекте.

Предполагается «бесплатное» обновление.

Привет!

Мы под покровом ночи выпустили bem-components 3.0.0!

Несмотря на мажорную версию, обновление должно быть «бесплатным»: просто обновите версию в bower.json и пересоберите проект.

Тогда почему мажор? Потому что:

• обновили зависимость от библиотеки bem-core до версии 3.0.1, где оторвали FastClick в пользу собственного решения для iOS
• отказались от поддержки древних версий bem-xjst (вы ведь уже давно обновились?)
• переименовали *.bemhtml в *.bemhtml.js (даешь подсветку синтаксиса!)
• и еще по мелочи.

Теперь версия публикуется с предкомпилированным CSS, так что больше нет необходимости использовать Stylus для сборки (вреда однако ж тоже никакого ;)

Кроме того, версия теперь публикуется еще и в npm.

И как всегда, помимо основного варианта поставки в виде исходников, доступна не требующая сборки dist-поставка для локальной установки в проект и для прямого подключения с CDN.

Подробно со списком изменений можно ознакомиться здесь.

Приятного обновления!

PS: project-stub уже обновлен.

Новый вебинар по БЭМ совсем скоро!

17 мая в 19:00 мы поговорим об использовании BEMHTML и BEMTREE. Расскажем, как все это можно использовать с любыми источниками данных (файловой системой, базой данных, HTTP API или бэкендом на любом языке).

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

Затронем работу как на сервере, так и на клиенте.

Обратите внимание, трансляция начнется в 19:00 17 мая на отдельной странице.