Что вы думаете о заворачивании bemjson в immutables?

Форум /

Суть: получить виртуальное BEM-дерево в виде Immutable BEMJSON, из которого получать реальный (а может виртуальный) DOM тогда, когда меняется BEMJSON.

Например, с помощью этого: https://github.com/facebook/immutable-js

Цель: Получить виртуальный слой в памяти с деревянной структурой ради оптимизации отрисовки и в привычном окружении (аля реакт, но в бэм терминах).

Pros/cons?

upd: Реализация может быть такой:

На морду вместе с HTML выгружаем каким-то образом BEMJSON вместе с HTML (например, в data-bemjson как есть или более разумно подготавливая атрибуты для каждой дом ноды c сущностью — трехпроходная шаблонизация?);
На морде при инициализации восстанавливаем BEMJSON дерево, используя этот атрибут;
Восстановленое дерево засовываем в Immutable.Map(restoredBemjson);
Все изменения состояний и контента делаем через i-bem и через этот объект;
~~Отрисовываем~~ Пушим изменения в DOM, если объект поменялся (если a.set('key', 'newvalue') !== a — https://github.com/facebook/immutable-js#the-case-for-immutability);
...
PROFIT!!!11

Что-то упустил?

9 years ago

Guria

:fire: очень хочу такое

9 years ago

qfox

Добавил примерный способ реализации

9 years ago

tadatuta

cc @veged

9 years ago

veged

а как строится первоначальный BEMJSON и как потом в нём происходят изменения?

9 years ago

qfox

@veged Вот что-то, а такого вопроса от тебя не ожидал. Либо руками пишется, либо priv.js, либо bemtree, etc.

Потом — через i-bem.js, например.

9 years ago

veged

это важно, т.к. я пока не понимаю флоу использования этой штуки — как именно через i-bem.js потом можно менять BEMJSON? почему эти будущие возможные изменения не описываются там же, где процесс генерации первоначального BEMJSON?

9 years ago

qfox

@veged Ты сейчас смотришь на BEMJSON как нечто на сервере один раз собранное и использованное для формирования HTML. Я смотрю на него, как на структуру приложения уже на фронте. Может быть в этом дело?

Т.е. я предлагаю не терять эту информацию на клиенте и работать там с теми же блоками, и хранить не в HTML (или не только в HTML), но и в неком BEMJSON. i-bem.js сейчас реализует это все через HTML и API браузера, но если поднятся над реализацией — то он ищет в BEMJSON нужные экземпляры описанных блоков.

Процесс генерации же для меня — это сугубо серверная часть. На клиенте — либо загрузка уже сгенерированного и отданного с сервера дерева, либо восстановление BEMJSON из HTML (с расставленными метками-биндингами-как угодно).

А далее — i-bem.js уже работает с HTML в терминах блоков и элементов, не вижу никаких проблем работать не напрямую с HTML, а с прослойкой в виде иммутабл BEMJSON.

9 years ago

veged

я пока так ничего конкретного и не понял :-( можешь набросать прототип? я не понимаю, как i-bem.js будет работать с BEMJSON (ещё и immutable, для меня это означает, что его весьма сложно модифицировать)

9 years ago

qfox

@veged Смысл не в том, что сложно модифицировать. Смысл в copy-on-write.

Ок, проще набросать ;)

9 years ago

awinogradov

Почему бы напрямую не выбросить объект в js c bemjson? Еще как вариант пробрасывать свои атрибуты на блок и элемент и по ним восстанавливать.

9 years ago

qfox

@verybigman Есть ряд проблем:

i-bem.js не умеет работать с бэм-сущностями (парадокс), только с HTML, возможно что-то изменится в v3, хотя врядли;
.apply у BH и BEMHTML возвращает строку с HTML (с которой дальше работает i-bem.js);

У BH есть processBemjson, которая возвращает полный BEMJSON, который можно завернуть в Immutable Map и дальше строить HTML при изменениях. В этом случае появляется тот самый Virtual BEM. Но надо еще BEMHTML научить возвращать полный BEMJSON, и c i-bem куча вопросов.

8 years ago

pavelpower

@zxqfox класс, а ведь есть еще и PostHTML

Ну и круг замкнется BEMJSON -> DOM -> HTML -> BEMJSON -> DOM для всяких там тестов классно. И immutableMap строить на BEMJSON как собственно ты говоришь.

Только медленно...

8 years ago

qfox

@pavelpower Что именно медленно?) Развернешь свою мысль?

8 years ago

voischev

@zxqfox что для нас быстро для @pavelpower обычно медленно ;)

8 years ago

DimitryDushkin

Идея отличная. Получилось что-нибудь?

Сам начал над таким задумываться, когда понял важность обладания единым состоянием интерфейса.

8 years ago

qfox

@DimitryDushkin можем голосом обсудить)

Чтобы оставлять комментарии, необходимо авторизоваться.