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

Мы продолжаем серию БЭМапов!

Сергей Бережной проведёт секцию живого программирования и познакомит вас с библиотекой bem-react-core. Вы узнаете, как и зачем в одном проекте совмещать React и bem-react-core, как создавать блоки и элементы, работать с модификаторами и использовать уровни переопределения.

Мы приглашаем всех, кто уже знаком с React и хочет привлечь БЭМ к своему проекту! Регистрация открыта!

Stay BEMed!

Всем, привет! Мой вопрос затерялся в телеграмме, поэтому решил продублировать его и здесь. Умеет ли webpack-bem-loader резолвить bem-сущности из ts/tsx-файлов? Если ли у кого-нибудь наработки?

Экспериментируя, удалось запустить минимальный проект только в конфигурации ts+js.

https://github.com/schemelev/simple-bem-react-app/blob/master/src/index.tsx#L9

Привет, подскажите как должен выглядеть блок content() для реализации не что похожего:

Идея своего врапера, который добавляет в эелементы внутри свой класс типа
.Wrapper > content() => children.map.addClass('Wrapper-el)

те имеется блок <Wrapper>, и для всех компонентов внутри (тоже написанные на Бем) к их классам и модификаторам в конце добавить элемент от блока Wrapper.

Еще пример:

<Wrapper>
  <Button />
</Wrapper>

сгенерит, типа:

<div class='Wrapper'>
  <button class='Button Button-checked Wrapper-el' />
</div>

Желательно для react-bem-core.

Спасибо.

UPD: Опубликовали видео: https://www.youtube.com/watch?v=BuKeVrQmVKI&t Мы продолжаем серию встреч для новичков!

На этот раз Владимир Гриненко проведет мастер-класс, на котором:

  • Сверстает макет с нуля по БЭМ-методологии, попутно объясняя ее принципы.
  • Покажет на примере сверстанного макета, как перевести любой БЭМ-проект на React.

Вас ждет максимум практики и примеров!

Регистрация уже открыта: https://events.yandex.ru/events/bemup/02-february-2018/.

Stay BEMed!

Подскажите, как в React-проекте у DOM-элементов сделать css-классы вида <div class=“Button__text_type_submit”>? Пробовал в .bemrc.js — https://github.com/alexbaumgertner/bem-react-example-components/blob/master/.bemrc.js#L7-L24 — не работает.

button

Не могу найти, как поменять конфигурацию по умолчанию, судя по коду, это захардкожено: https://github.com/bem/bem-react-core/blob/master/src/index.js#L10 https://github.com/bem/bem-react-core/blob/master/.bemrc.js#L16

Собирается в brc

Сделал демо https://github.com/alexbaumgertner/bem-react-example-components/pull/1

Всем привет!

Пытаюсь написать примитивный тест на встраивание компонента. Использую Jest. Выглядит он примерно так:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from 'b:Button';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Button />, div);
});

Файл .babelrc

{
  "presets": [
    ["es2015"],
    "stage-1",
    "react"
  ],
  "env": {
    "test": {
      "plugins": [
        ["bem-import", {
          "techs": ["js"]
        }]
      ]
    }
  }
}

Файл .bemrc

module.exports = {
  root: true,
  levels: {
    'blocks': {
      scheme: 'nested',
      shemeOptions: 'react',
      naming: 'react'
    },
    'node_modules/@myBem/typography/blocks': {
      scheme: 'nested',
      shemeOptions: 'react',
      naming: 'react'
    },
    'node_modules/@myBem/icons/blocks': {
      scheme: 'nested',
      shemeOptions: 'react',
      naming: 'react'
    }
  }
}

Запуская тест командой npm test я получаю ошибку

FAIL  blocks/Button/Button.test.js
  ● Test suite failed to run

    Cannot find module 'm:paragraph' from 'Text.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/@myBem/typography/blocks/Text/Text.js:4:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.129s, estimated 3s

Дело в том что блок Button внутри себя делает import другого блока Text из node_modules/@myBem, который в свою очередь делает import модификатора paragraph. И вот тут у меня ощущение что модуль bem-import не заходит так глубого во вложенности блоков. Что мне делать в данном случае или может можно как-то по другому решить проблему? Ударяюсь лбом о стену уже второй день =(

Спасибо!

хочу покрутить с целью принять решение, внедрять или не внедрять. По сборке я правильно понимаю что: Уровни переопределения - это всегда энтрипоинты вебпака? Модификаторы - возможно сделать как чанки вебпака и подгружать асинхронно (будет ли выделено как чанки если сложить там только css вроде темизации)? Переводы - куда упадут собранные по всем сорцам переводы, в энтри или в чанк? Как не пересобирая выебпак перевести на все языки да еще и в разных уровнях переопределения? Где взять пример накрученных переводов (обычные ключи, параметризированные, множественные)?

15 сентября в Екатеринбурге состоится очередная встреча БЭМ-сообщества — BEMup!

Мы ждем вас в уютном офисе Яндекса, где Сергей Бережной проведет мастер-класс по использованию bem-react-core — библиотеки, расширяющей возможности React.

Если вам близка идея БЭМ, приходите! Будем говорить про БЭМ, React и фронтенд в целом.

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

Регистрация открыта!

Stay BEMed!

PS: По традиции вы можете задать вопросы заранее в комментариях к этому посту, а мы постараемся подробно ответить на них во время митапа.

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!

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

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

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

Недавно в библиотеке bem-react-core появилась документация, а на WSD в Москве я сделал быстрый обзорный доклад (начало в 4h30m36s):

https://youtu.be/Z4E2drxNjMk?start=16236

Историческая справка

До недавнего времени мы работали над возможностью генерации Virtual DOM на основе BEMHTML-шаблонов. Мы разработали специальный движок для bem-xjst – xjst-ddsl, который может превращать шаблоны в некий DDSL, который с помощью дополнительного хелпера – ddsl-react превращался в React. Это было сделано для того, чтобы отделить специфику React и сделать закладку на тот случай, если захочется другую реализацию Virtual DOM. Об этом рассказывал я, например, на Я.Субботнике. Мы выдвинули и даже математически доказали гипотезу об эффективности этого метода, поскольку он позволял в 10 раз ускориться на сервере относительно нативного рендеринга на React, ведь на сервере мы можем использовать стандартный рендер в HTML, так как шаблоны одни.

Спустя некоторое время

Все это время мы делали подход в опенсоре – react-bl и внутри на реализацию компонентов для React на BEMHTML-шаблонах. Внутри мы попробовали очень большой объем компонентов, в том числе и составные/сложные с попапами и модальными окнами.

В чем разница открытой версии и внутренней?

В react-bl мы пробовали писать React-код для клиента "сверху" верстки и шаблонов, чтобы не трогать сами шаблоны и пробрасывать биндинги через пропсы компонентов. То есть получался "настоящий" React-компонент, где только разметка генерировалась с помощью BEMHTML. Такой подход нёс в себе несколько проблем. Во-первых, не работали уровни переопределения для клиентского кода, только для верстки в шаблонах. Во-вторых, добавлял иногда большие трудности при пробрасывании пропсов во вложенные элементы, тем более, если они строились динамически и имели вариативность.

Основываясь на этом опыте внутри мы попробовали писать клиентский код прямо в BEMHTML шаблонах. Например так:

block('link')(
   tag()('a'),
   js()(function() {
      return {
        onClick: () => console.log('hi there')
      };
   })
);

Это позволило решить проблемы с уровнями переопределения. И декларацией клиентского кода для вложенных элементов. Но... Нам пришлось добавить немного магии в ddsl-react (тот самый хелпер, что превращает DDSL в React). Мы добавили автоматический биндинг контекста. Ведь клиентский код в шаблонах ничего не знал про инстанс React-компонента и мы сделали это автоматически.

Кроме того, скорее всего вы спросите...

Как же было дело со вложенными компонентами?

Вопрос о том, что если кнопка использует иконку, а иконка тоже компонент? Ведь вызов иконки описан в BEMHTML и это просто BEMJSON, а не какой ни React-component. Мы решили эту проблему полуавтоматически: во время обьявления класса мы используем хелпер (ddsl-react), который первым аргументом принимает обьект с матчингом блоков на React-компоненты. Внутри во время рендера, когда встречается блок из матчинга он подменяется на React-компонент. Ведь разработчик знает, что за блоки используется в составном среди BEMHTML.

Что стало?

К сожалению, мы не учли несколько нюансов, и как мы ни пытались их обойти, сделать это эффективно у нас не получилось. А именно:

  • проблема автоматического биндинга контекста: это очень большая магия и возникают неоднозначности при обращении к элементам из блока или к другим элементам из элемента
  • проблема проставления refs, в 99% случаев все хорошо, но только не когда нужен ref на вложенный элемент в блоке, который вложен в другой блок
  • слишком строгие правила для написания шаблонов чтобы серверный рендер работал действительно быстро. То есть клиентский код должен быть вынесен в другой уровень относительно верстки и это надо учитывать в сборке. В противном случае среди рендера BEMHTML функции React по прежнему выполнялись, что сильно замедляло процесс

Всё прям плохо?

На самом деле нет. В 99% случаев решение работает и работает хорошо. Просто ожидаемый профит показался недостаточным. Нам хотелось быстрый рендер на сервере и удобное написание React-компонентов. Опытным и трезвым умом нам показалось что мы этого не достигли. Тем не менее использовать BEMHTML-шаблоны в React можно, но базировать на этом библиотеку с компонентами не стоит. Если у вас есть желание работать с этим решением, я с радостью помогу разобраться и раздам прав. Мейнетейнеры нынче в цене.

Что дальше?

Мы проверяем новую гипотезу в bem-react-core. Это очень маленькая по обьему библиотека, которая позволяет декларировать React-компоненты в BEMHTML подобном синтаксисе, писать на последнем стандарте, собираться чем угодно(webpack, gulp, rollap, babel), поддерживает уровни переопределения и все все, что мы так любим. В репозитории есть набор примеров, которые можно посмотреть и понять. Мы работаем над новым набором компонентов в bem-react-components. Внутри мы так же попробовали очень много компонентов и кажется все очень хорошо. У нас уже почти готова документация и скоро она появится в репозитории. И так же скоро появится поддержка i18n ;) Приходите с PR и хейтерством. Все что мы запланировали пока, кажется отражено в issues.

Код для привлечения внимания

Хочется в реакт проекте использовать весь браузерный js из bem-core + bem-components this.elem('foo') == что-то такое что реакту понятно

что бы рекваиришь *.browser.js из bem-components и оно работает в реакте

Никто не думал о подобном? Реально ли это? Что нужно предпринять?

UPD: можно попробовать https://github.com/bem/create-bem-react-app

Привет! Хочется попробовать сделать React-компоненты с использованием методологии BEM: разделение на блок-элемент-модификатор и на уровни common, desktop, touch. Нашел пока вот:

Порекомендуйте пожалуйста еще источников.