EN
awinogradov
awinogradov
4 апреля 2016

Задача научиться рендерить Virtual DOM из текущих шаблонов на bemhtml

Состав команды: @nik-kor @amel-true @khvostov @voischev @awinogradov. Все супер котаны!)

Результат

  1. Написали движок для рендера bemhtml шаблонов и положили аккуратно в PR https://github.com/bem/bem-xjst/pull/235. Экспортит атрибуты в виде массива вида ['div', {...attrs}, content, ...anotherContent].
  2. Сделали адаптер для React https://github.com/bem-contrib/react-xjst, который использует бандл из шаблонов в bemhtml и инстанс React для создания Virtual DOM , с помощью библиотеки react-dom.
  3. Начали доставлять bem-components в React, используя bemhtml шаблоны и стили. Собирается с помощью Webpack и специального лоадера для него https://github.com/alfa-bank-dev/bem-loader, который резолвит все нужное по депсам через bem-deps. Можно дописывать bemhtml шаблоны на уровне проекта как и раньше;)
  4. Запилили песочницу для bem-xjst с переключателем движков: BEMHTML, BEMTREE, VIDOM – https://github.com/bem/bem-xjst/pull/238. Одни шаблоны на все времена, тестить, сравнивать, все, что душе угодно можно делать.
  5. Так же планировали поработать над интеграцией с Redux. Но так сложилось, что задача решилась автоматически. На уровне React ничего не изменилось, поэтому данные как и раньше доезжают до компонентов, где формируется bemjson для функции рендера.

Превью готовых компонентов http://awinogradov.github.io/react-xjst-example/ и песочницы http://vladkhvo.github.io/.

Далее

Зарелизить react-components – библиотеку, которая использует шаблоны и стили из bem-components, но логику React в БЭМ-терминах.

Ура?;) Теперь мы имеем одни шаблоны и стили для параллельных стеков. Поддерживаем в одном месте и в ус не дуем! Предположительно можно написать подобных адаптеров и для других технологий;)

awinogradov
#awinogradov
4 апреля 2016

Проброс конструкторов React решили сделать экзотически) Положить на уровне React шаблоны для компонентов, в которых написать следующее:

block('button')(
    tag()(function() {
        const Input = require('./input.js'); // react-component
        return <Input />; // constructor instead of string, it's right for React.createElement function
    })
);
zxqfox
#zxqfox
4 апреля 2016

Можно использовать arrow functions...

awinogradov
#awinogradov
4 апреля 2016

А можно и не использовать...

tadatuta
#tadatuta
4 апреля 2016

Можно использовать arrow functions...

в общем коде пока еще нельзя все-таки

zxqfox
#zxqfox
4 апреля 2016

Я там вижу jsx, значит компиляция все равно нужна будет.

awinogradov
#awinogradov
4 апреля 2016

Можно и без него:) но мы уважаем хипстеров:)

Sent from my iPhone

On 05 Apr 2016, at 00:34, Alexej Yaroshevich notifications@github.com wrote:

Я там вижу jsx, значит компиляция все равно нужна будет.


You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

JiLiZART
#JiLiZART
4 апреля 2016

Господи, я дожил до этого дня.

zxqfox
#zxqfox
4 апреля 2016

@JiLiZART не «Господи», а «Боже» ;-)

JiLiZART
#JiLiZART
4 апреля 2016

Теперь как бы придумать, чтобы реиспользовать логику из i-bem реализации компонентов, было бы очень круто.

zxqfox
#zxqfox
4 апреля 2016

реиспользовать логику из i-bem реализации компонентов

@JiLiZART рук не хватает, уже есть идеи.

amel-true
#amel-true
5 апреля 2016

@awinogradov только у меня репозиторий @amel-true :)

nik-kor
#nik-kor
5 апреля 2016

@zxqfox @awinogradov jsx внутри шаблонов не нужен.
Так должно быть ок

block('button')(
    tag()(function() {
        return require('../src/button/button');
    })
);
awinogradov
#awinogradov
5 апреля 2016

Как и обещал создал струтур react-components) приглашаю всех желающих к разработке) https://github.com/awinogradov/react-components

awinogradov
#awinogradov
5 апреля 2016

Все как у взрослых) Стили отдельно, шаблоны отдельно, js отдельно;)

megatolya
#megatolya
6 апреля 2016

bemhtml про генерацию html, но реакт не только про это, он еще и про поведение компонента. Как будет выглядеть шаблон(?) блока, у которого должно быть какое-то js поведение. Например такое: при клике на блок показать alert, как будет выглядеть в ваших блоках?

awinogradov
#awinogradov
6 апреля 2016

@megatolya я бы начал свой рассказ с того, что реакт не про генерацию html впринципе;) А закончил бы его тем, что наши компоненты ровно такие же как и ваши. А все алерты пишутся православно как и принято в js;) вот здесь прям вот видно https://github.com/awinogradov/react-components/blob/master/src/components/button/button.js

megatolya
#megatolya
6 апреля 2016

я бы начал свой рассказ с того, что реакт не про генерацию html впринципе;)

@awinogradov я как раз и написал, что реакт не только про это ;)

увидел, спасибо

tadatuta
#tadatuta
9 апреля 2016

@nik-kor Спасибо!

Можешь, пожалуйста, добавить ссылок на упоминаемые в посте штуки и репостнуть полный текст поста на https://en.bem.info/forum/ ?

nik-kor
#nik-kor
9 апреля 2016
tadatuta
#tadatuta
9 апреля 2016

Круто, спасибо тебе!

kompolom
#kompolom
13 апреля 2016

А как этим пользоваться? Подключил форк @awinogradov на проект. Изменений не заметил. Что то в проекте нужно менять, чтобы использовать VIDOM?

awinogradov
#awinogradov
13 апреля 2016

@kompolom Этим не нужно пользоваться) Это же искусство) :trollface:

А так тебе нужен вот этот пул-руквест https://github.com/bem/bem-xjst/pull/235, вот этот адаптер https://github.com/bem-contrib/react-xjst и можно смотреть примеры вот тут https://github.com/awinogradov/react-bl/tree/master/src

kompolom
#kompolom
13 апреля 2016

@awinogradov А без react?

kompolom
#kompolom
13 апреля 2016

Я правильно понимаю, что существующий проект на bemhml + i-bem.js не получится перевести на virtual DOM?

awinogradov
#awinogradov
13 апреля 2016

@kompolom получится, но i-bem код придется выбросить

JiLiZART
#JiLiZART
13 апреля 2016

@awinogradov распечатаю код, повешаю на стену в рамочку, буду фапать любоваться :)

kompolom
#kompolom
13 апреля 2016

Смотрю на react-bl - не вижу bemjson. Плохо ищу или его нет?

kompolom
#kompolom
13 апреля 2016

А в чем тогда смысл bemhtml шаблонов, если у нас в компоненте все описывается?

awinogradov
#awinogradov
13 апреля 2016

@kompolom не уловил я суть вопроса. Что описывается в компоненте? Можешь вот по этому коду сказать какая будет верстка?

kompolom
#kompolom
13 апреля 2016

Тупанул... Необычно все это, непривычно.

awinogradov
#awinogradov
13 апреля 2016

Ты запусти) Тебе понравится)

apsavin
#apsavin
13 апреля 2016

Кажется, можно представить, что React в данном случае - в том числе некая замена bemtree.

antonazgarovich
#antonazgarovich
23 мая 2016

Круто, мечты сбываются =) Только подумал об этом, и тут вы уже запили =) Спасибо. Это реально классный инструмент.

ol-lo
#ol-lo
8 января 2017

@awinogradov как я понимаю, ты ушел от использования bem-xjst в https://github.com/bem/bem-react-core. Можешь рассказать почему?

awinogradov
#awinogradov
11 января 2017