Войти с помощью github
Форум /

Задача научиться рендерить 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 в БЭМ-терминах.

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