search

vitkarpov / ask-me

:mortar_board: Ask me about JavaScript, programming and technologies (anything actually)
1 stars 0 forks source link

BEMHTML и BEM-XJST: расставим точки под ! #4

Closed xenongattz closed 8 years ago

xenongattz commented 8 years ago

Правильно ли я понимаю, что BEMHTML это просто статичный шаблон, который нужно скомпилировать, а BEM-XJST это штука, позволяющая манипулировать BEMHTML-деревом? Что-то похожее на соотношение простого HTML и JS?

vitkarpov commented 8 years ago

Кажется, немного спутаны понятия.

Попробуем разобраться: есть XJST, есть BEM-XJST.

XJST решает задачу преобразования одного дерева в другое, по аналогии с XSLT, используя декларативные правила преобразования, шаблоны. Если XSLT преобразует XML, то XJST преобразует JSON.

Вообще говоря, XJST не ориентирован на BEM, поэтому существует специальное подмножество BEM-XJST — ориентирован на преобразование не любого JSON, а именно BEMJSON: есть предопределенные матчи для блоков, элементов и модификаторов и моды для тегов, классов, атрибутов и т.д.

Сам же BEM-XJST состоит из двух частей: BEMHTML и BEMTREE. Оба они являются шаблонизаторами с одинаковым синтаксисом шаблонов, а отличие в том что получается на выходе.

В случае BEMHTML — это, как ни трудно догадаться, HTML :) В случае BEMTREE — это BEM-дерево, т.е. полный BEMJSON страницы.

Хотя сами шаблоны являются валидным JavaScript, в рантайме они не выполняются «как есть», вместо этого они компилируются в эффективный, но малопонятный человеку JavaScript.

В случае трехзвенной архитектуры для BEM-проектов как раз BEMTREE принимает на вход сырой JSON от бекенда, преобразует его в полный BEMJSON страницы, на основании шаблонов, после отдает BEMJSON на вход BEMHTML, который на основании других шаблонов, возвращает HTML.

Рассказать подробнее про XJST и BEM-XJST, а так же поправить меня, если я где-то ошибся, может @tadatuta или дать ссылку на соответствующие материалы.

tadatuta commented 8 years ago

Витя, ты описал ситуацию, актуальную на прошлый год.

На текущий момент пакет bem-xjst больше не базируется на xjst и не требует компиляции шаблонов, что дало моментальную сборку по сравнению с тем, что было раньше. На сервере/в браузере выполняется ровно тот код, который написал разработчик. Так что его теперь гораздо легче отлаживать, можно досыпать новые шаблоны в рантайме и все такое.

В остально все верно: bem-xjst из коробки предоставляет два варианта рендеринга: BEMHTML и BEMTREE. Кроме того, существует отдельная реализация движка, отдающего вместо HTML объекты, которые затем можно скормить в Реакт для генерации виртуального DOM-а.

vitkarpov commented 8 years ago

@tadatuta Главное, призвать вовремя нужных людей :) Спасибо за уточнения.