Мы продолжаем серию БЭМапов!
Сергей Бережной проведёт секцию живого программирования и познакомит вас с библиотекой 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 Мы продолжаем серию встреч для новичков!
На этот раз Владимир Гриненко проведет мастер-класс, на котором:
Вас ждет максимум практики и примеров!
Регистрация уже открыта: 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
— не работает.
Не могу найти, как поменять конфигурацию по умолчанию, судя по коду, это захардкожено: 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
Собирается в
Сделал демо 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: Опубликовали видео.
В конце марта мы проведем второй в этом году митап по БЭМ. На этот раз встреча будет особенно актуальна для тех, кто уже использует БЭМ и смежные технологии в своих проектах.
Мы расскажем:
BEMup пройдет в пятницу, 24 марта в московском офисе Яндекса с 19:00 до 22:00.
Регистрация уже открыта: https://events.yandex.ru/events/bemup/24-march-2017/ Присоединяйся!
Stay BEMed!
Внезапно, пятничным вечером мы обновили БЭМ в вашем React.
Состав изменений:
cls, ссылка на PR.defaultProps и propTypes, ссылка на PR.mix, ссылка на PR.this.__base(...arguments), ссылка на PR.И, конечно, мы обновили документацию, где очень подробно про все написали на русском и английском языках ;)
Недавно в библиотеке bem-react-core появилась документация, а на WSD в Москве я сделал быстрый обзорный доклад (начало в 4h30m36s):
До недавнего времени мы работали над возможностью генерации 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.
К сожалению, мы не учли несколько нюансов, и как мы ни пытались их обойти, сделать это эффективно у нас не получилось. А именно:
На самом деле нет. В 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. Нашел пока вот:
Порекомендуйте пожалуйста еще источников.
