Хакатон: генерация Virtual DOM из bemhtml шаблонов с помощью движка для bem-xjst

Question

Хакатон: генерация Virtual DOM из bemhtml шаблонов с помощью движка для bem-xjst

awinogradov opened this issue 9 years ago · 37 comments

awinogradov commented 9 years ago

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

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

Результат

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

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

Далее

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

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

Answer 1 · 2016-04-04T20:39:43.000Z

Проброс конструкторов 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
    })
);

Answer 2 · 2016-04-04T20:48:16.000Z

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

Answer 3 · 2016-04-04T20:55:05.000Z

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

Answer 4 · 2016-04-04T21:20:31.000Z

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

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

Answer 5 · 2016-04-04T21:34:31.000Z

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

Answer 6 · 2016-04-04T21:47:19.000Z

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

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

Answer 7 · 2016-04-04T22:33:17.000Z

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

Answer 8 · 2016-04-04T22:34:46.000Z

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

Answer 9 · 2016-04-04T22:34:48.000Z

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

Answer 10 · 2016-04-04T22:35:35.000Z

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

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

Answer 11 · 2016-04-05T08:11:33.000Z

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

Answer 12 · 2016-04-05T09:11:47.000Z

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

block('button')(
    tag()(function() {
        return require('../src/button/button');
    })
);

Answer 13 · 2016-04-05T10:19:53.000Z

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

Answer 14 · 2016-04-05T10:20:32.000Z

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

Answer 15 · 2016-04-06T08:32:47.000Z

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

Answer 16 · 2016-04-06T08:36:09.000Z

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

Answer 17 · 2016-04-06T08:37:55.000Z

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

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

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

Answer 18 · 2016-04-09T19:24:22.000Z

мои впечатления https://github.com/nik-kor/blog/blob/master/hackathon-in-yandex-2016-04-09.md

Answer 19 · 2016-04-09T19:40:51.000Z

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

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

Answer 20 · 2016-04-09T20:00:51.000Z

@tadatuta done https://en.bem.info/forum/32/

Answer 21 · 2016-04-09T20:26:47.000Z

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

Answer 22 · 2016-04-13T05:35:03.000Z

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

Answer 23 · 2016-04-13T07:30:06.000Z

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

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

Answer 24 · 2016-04-13T08:39:35.000Z

@awinogradov А без react?

Answer 25 · 2016-04-13T09:40:39.000Z

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

Answer 26 · 2016-04-13T09:45:58.000Z

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

Answer 27 · 2016-04-13T09:46:12.000Z

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

Answer 28 · 2016-04-13T10:10:17.000Z

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

Answer 29 · 2016-04-13T10:11:32.000Z

Давай вместе смотреть https://github.com/awinogradov/react-bl/blob/master/src/components/button/button.js#L76-L105 ;)

Answer 30 · 2016-04-13T10:27:26.000Z

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

Answer 31 · 2016-04-13T10:28:31.000Z

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

Answer 32 · 2016-04-13T10:35:37.000Z

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

Answer 33 · 2016-04-13T10:45:46.000Z

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

Answer 34 · 2016-04-13T10:47:32.000Z

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

Answer 35 · 2016-05-23T05:24:00.000Z

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

Answer 36 · 2017-01-08T19:22:37.000Z

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

Answer 37 · 2017-01-11T16:07:12.000Z

@OlegErm ответил тут #1212