Задача научиться рендерить Virtual DOM из текущих шаблонов на bemhtml
Состав команды: @nik-kor @amel-true @khvostov @voischev @awinogradov. Все супер котаны!)
Результат
- Написали движок для рендера
bemhtml
шаблонов и положили аккуратно в PR https://github.com/bem/bem-xjst/pull/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 – https://github.com/bem/bem-xjst/pull/238. Одни шаблоны на все времена, тестить, сравнивать, все, что душе угодно можно делать. - Так же планировали поработать над интеграцией с
Redux
. Но так сложилось, что задача решилась автоматически. На уровне React ничего не изменилось, поэтому данные как и раньше доезжают до компонентов, где формируетсяbemjson
для функции рендера.
Превью готовых компонентов http://awinogradov.github.io/react-xjst-example/ и песочницы http://vladkhvo.github.io/.
Далее
Зарелизить react-components
– библиотеку, которая использует шаблоны и стили из bem-components
, но логику React
в БЭМ-терминах.
Ура?;) Теперь мы имеем одни шаблоны и стили для параллельных стеков. Поддерживаем в одном месте и в ус не дуем! Предположительно можно написать подобных адаптеров и для других технологий;)
Проброс конструкторов React решили сделать экзотически) Положить на уровне React шаблоны для компонентов, в которых написать следующее:
Можно использовать arrow functions...
А можно и не использовать...
в общем коде пока еще нельзя все-таки
Я там вижу jsx, значит компиляция все равно нужна будет.
Можно и без него:) но мы уважаем хипстеров:)
Sent from my iPhone
Господи, я дожил до этого дня.
@JiLiZART не «Господи», а «Боже» ;-)
Теперь как бы придумать, чтобы реиспользовать логику из i-bem реализации компонентов, было бы очень круто.
@JiLiZART рук не хватает, уже есть идеи.
@awinogradov только у меня репозиторий @amel-true :)
@zxqfox @awinogradov jsx внутри шаблонов не нужен. Так должно быть ок
Как и обещал создал струтур react-components) приглашаю всех желающих к разработке) https://github.com/awinogradov/react-components
Все как у взрослых) Стили отдельно, шаблоны отдельно, js отдельно;)
bemhtml про генерацию html, но реакт не только про это, он еще и про поведение компонента. Как будет выглядеть шаблон(?) блока, у которого должно быть какое-то js поведение. Например такое: при клике на блок показать alert, как будет выглядеть в ваших блоках?
@megatolya я бы начал свой рассказ с того, что реакт не про генерацию html впринципе;) А закончил бы его тем, что наши компоненты ровно такие же как и ваши. А все алерты пишутся православно как и принято в js;) вот здесь прям вот видно https://github.com/awinogradov/react-components/blob/master/src/components/button/button.js
@awinogradov я как раз и написал, что реакт не только про это ;)
увидел, спасибо
мои впечатления https://github.com/nik-kor/blog/blob/master/hackathon-in-yandex-2016-04-09.md
@nik-kor Спасибо!
Можешь, пожалуйста, добавить ссылок на упоминаемые в посте штуки и репостнуть полный текст поста на https://en.bem.info/forum/ ?
@tadatuta done https://en.bem.info/forum/32/
Круто, спасибо тебе!
А как этим пользоваться? Подключил форк @awinogradov на проект. Изменений не заметил. Что то в проекте нужно менять, чтобы использовать VIDOM?
@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
@awinogradov А без react?
Я правильно понимаю, что существующий проект на bemhml + i-bem.js не получится перевести на virtual DOM?
@kompolom получится, но i-bem код придется выбросить
@awinogradov распечатаю код, повешаю на стену в рамочку, буду
фапатьлюбоваться :)Смотрю на react-bl - не вижу bemjson. Плохо ищу или его нет?
Давай вместе смотреть https://github.com/awinogradov/react-bl/blob/master/src/components/button/button.js#L76-L105 ;)
А в чем тогда смысл bemhtml шаблонов, если у нас в компоненте все описывается?