Визуальный генератор страницы из имеющихся блоков

[pavel06081991]

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

1) не знаю насколько это покажется удобным, но, думаю, по крайне мере это интересно. Представим, что мы разработали библиотеку блоков, реализовали для каждого блока все его технологи(js, css, bemhml и т.д.). Все, библиотека готова. Вспоминая своё детство, помню, как любил играть в конструктор лего, из кучи разных деталек создавать что-угодно, собирая все в одну конструкцию. Вопрос заключается в следующем, может у вас реализован или в планах следующий механизм: открываем страницу в браузере, справа в панельке у нас отображаются визуально все имеющиеся блоки и мы, перетягивая их мышкой на страницу, создаем наш сайт. Перетянув один из блоков на страницу, в октрывшемся окошке мы задаем все нужные параметры для блока. Точно также перетягиваем нужные элементы блока. Затем нажимаем сохранить страницу и у нас автоматом генерится bemjson дерево нашей страницы. Разумеется, все это можно делать и вручную в bemjson файле, но от визуального создания страницы, как игра в лего, чтоли получаешь какое-то удовольствие, как в детстве, играя в лего, ну и плюс bemjson генерировался бы автоматом и люди, которые не особо сильны во всяких json и т.д. смогли бы делать свои странички не погружаясь в дебри bemjson, i-bem и т.д.

2) хочется сделать следующее приложение: загрузилась страница в браузер. Далее после каких-либо пользовательских действий перезагружается какая-либо часть страницы, данные для которой подгружаются ajax-ом. В этих пришедших данных находятся новые блоки, которых не было изначально на странице. Скажите, есть ли у вас механизм, который бы позволил на клиенте отслеживать какие новые блоки нужно вставить в страницу и который бы запрашивал с сервера для этих блоков css, js и bemhtml шаблоны, возвращая все эти данные в одном бандле, например, в json формате, а на клиенте бы эти данные вставлялись бы на страницу и только после этого бы вставлялся html новых блоков на страницу? В этом докладке https://events.yandex.ru/lib/talks/1413/ на 39:26 парень спрашивает именно то, о чем я написал. В ответе прозвучало про технологию, которая у вас есть с участием динамического сервера, но говорится, что она не в опен сорсе. Скажите, за год что-нибудь изменилось в плане этой технологии динамической подгрузки всех технологий блока?

3) уже около месяца в свободное от работы время читаю/изучаю все технологии бэм, плюс пересмотрел не один десяток видео с различных ваших конференций и теперь, имея хорошее представление, наконец готов начать писать свой мини проект ради практики БЭМ, но увидев об анонсе bem-core 3, желание начинать что-то кодить на текущей версии подостыло. Скажите, пожалуйста, когда планируете выпустить версию 3?

4) уже ни раз в различных видео упоминалось о библиотеке bem-components и о том, что люди пишут свои библиотеки, которые можно использовать в своих проектах. Скажите, а где можно скачать/увидеть сторонние, написанные не вами библиотеки блоков? Все старания по поиску таковых в гугле с использованием ключевого запроса "БЭМ библиотеки блоков" ведут сугубо на bem.info и, в частности, на страницы с библиотеками bem-core и bem-components.

[apsavin]

1. Насколько я знаю, работа над подобным редактором не ведется и не планируется.
2. Насколько я знаю, в опенсорсе ничего подобного нет, но оно не то чтобы сильно необходимо. Чтобы был смысл использовать такие штуки, нужно, чтобы на странице был какой-то редко используемый, но при этом очень "тяжелый" функционал. У вас правда так?
3. Нет смысла ждать. Вторая версия bem-core содержит все, что нужно для счастья.) Если сильно захочется bleeding edge, всегда сможете мигрировать на третью.
4. Навскидку: https://github.com/verybigman/bem-grid http://verybigman.github.io/bem-content/promo.pages/index/index.html https://github.com/factorymn/bem-factory

P.S. я не из яндекса и не из bem-team.

[voischev]

1. Кажется тут можно найти что-то еще http://ru.bem.info/built-with-b/ http://ru.bem.info/built-with-b/ ))) например bem-social

   4 дек. 2014 г., в 9:49, Alexander Savin notifications@github.com написал(а):

   Насколько я знаю, работа над подобным редактором не ведется и не планируется. Насколько я знаю, в опенсорсе ничего подобного нет, но оно не то чтобы сильно необходимо. Чтобы был смысл использовать такие штуки, нужно, чтобы на странице был какой-то редко используемый, но при этом очень "тяжелый" функционал. У вас правда так? Нет смысла ждать. Вторая версия bem-core содержит все, что нужно для счастья.) Если сильно захочется bleeding edge, всегда сможете мигрировать на третью. Навскидку: https://github.com/verybigman/bem-grid https://github.com/verybigman/bem-grid http://verybigman.github.io/bem-content/promo.pages/index/index.html http://verybigman.github.io/bem-content/promo.pages/index/index.html https://github.com/factorymn/bem-factory https://github.com/factorymn/bem-factory P.S. я не из яндекса и не из bem-team.

   — Reply to this email directly or view it on GitHub https://github.com/bem/bem-forum-content-ru/issues/129#issuecomment-65544808.

[voischev]

На счет конструктора. У нас есть что-то подобное но для редактирования текста. Такой редактор-конструктор. В опенсорс пока не планируем выкладывать, но реализовывать такое очень круто и удобно с помощью бэм

Reply to this email directly or view it on GitHub https://github.com/bem/bem-forum-content-ru/issues/129.

[alexbaumgertner]

1) Идея интересная, но вроде никто не брался. Для быстрого прототипирования должно быть годная вещь. Хотите заняться?

"наконец готов начать писать свой мини проект ради практики БЭМ" – готов помочь.

[voischev]

Ну мне известно что втеки кто-то да брался :) Да и у нас есть планы на это)

4 дек. 2014 г., в 17:28, Alex Baumgertner notifications@github.com написал(а):

1) Идея интересная, но вроде никто не брался. Для быстрого прототипирования должно быть годная вещь. Хотите заняться?

"наконец готов начать писать свой мини проект ради практики БЭМ" – готов помочь.

— Reply to this email directly or view it on GitHub https://github.com/bem/bem-forum-content-ru/issues/129#issuecomment-65638967.

[ilyar]

Очень близко к описанным фантазиям есть проект SourceJS вот демо проект https://github.com/sourcejs/lego и видео https://www.youtube.com/watch?v=cefy_U5NU4o

Насколько близко и планируется ли поддержать БЭМ-экосистему блоков призываю ответить @operatino

[pavel06081991]

Сегодня был на конференцие в Минске, рассказывали про атомарный дизайн. Его идея заключается в том, что есть атомы(блоки в бэм термина), из которых строятся молекулы(составные блоки в бэм терминах). По-моему сему творению 1,5 года . Отличий от бэма в том, как строятся молекулы и вообще страница из этих молекул, не увидел, по сути плагиат на бэм, а в докладе рассказывали, как о ноу хау. Даже обидно стало. Так вот в презентации показывали, что у них реализована такая фича, что в браузере ты натягиваешь все нужные молекулы(блоки) и вставляешь их внутрь других молекул(блоков).

[ilyar]

@pavel06081991 есть ссылка на конференцию или презентацию доклада?

[pavel06081991]

Да, есть, вот ссылка на ютубе https://www.youtube.com/watch?v=F3tpIoTZmpQ

только вот одна проблема - ютуб залочил аудиодорожку

[vithar]

Первое это логичное продолжение bem-ide (http://yandex.ru/yandsearch?text=bem-ide), но мы с ним особо не продвинулись пока, не хватает своих сил, а больше никто не присоединился.

BEMIDE и визуальный редактор я на доске нарисовал ещё два года назад. Ж)

[vithar]

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

[ilyar]

@vithar хорошая идея поддержать SourceJS, по моему не менее логичного продолжение и еще более логичное продолжение после поддержки БЭМ в SourceJS добавить в него bem-ide

[pavel06081991]

@vithar, извиняюсь, впредь буду писать правильно

[ilyar]

@pavel06081991 в докладе, хоть и не слышно, говориться о Polymer библиотеке которая реализует веб-компоненты которые продвигает W3C. Не помню кто и где сравнивал веб-компоненты и БЭМ, если кто знает дайте ссылку для полноты картины или наверно лучше новую тему начать про это.

[tadatuta]

@ilyar https://events.yandex.ru/lib/talks/2472/ + http://www.slideshare.net/azproduction/components-now-33642522

[pavel06081991]

@ilyar, в докладе 4 темы, тема про атомарный дизайн начинается с 1:48:00

[ilyar]

@tadatuta а точно, спасибо, сразу вспомнился вопрос на который давно хочу получить ответ, автопрефексер поддержали, а автополифилир по какой причине не поддерживаете?

[ilyar]

@pavel06081991 да еще стоит отметить что в рамках проекта Polymer на твои футуристические вопросы так или иначе есть ответ https://www.polymer-project.org/tools/designer/

[tadatuta]

@ilyar на данный момент в этом нет необходимости: мы не используем в библиотеках ничего, что требует полифилов для нашего списка поддерживаемых браузеров. если такая необходимость есть на конкретных проектах, то всегда можно добавить вызов автополифилера в сборку.

[ilyar]

@tadatuta спасибо, точно вспомнил есть enb-autopolyfiller, а enb теперь рулит.

[qfox]

@ilyar нарулило будь здоров. как отсуда будем выезжать уже не ясно ;-)

[ilyar]

@zxqfox да ладно, что не так? топик в студию ))

[qfox]

@ilyar Названия технологий и их апи настолько разные, что убивают многое. У них нет зависимостей других технологий, которые стоило бы запилить, без этого конфиги больших проектов выглядят как какашка (см. bem-components и проекты с хакатона). Технологии жестко завязаны файловую систему и имена технологий — оба не критично, но имхо это не правильно и тоже не дают красиво расти конфигам на больших проектах, и сам конфиг становится отдельным небольшим проектом. И это все не субъективно. Для 80% пользователей это так ;-)

[ilyar]

@zxqfox предложение раскопать эту тему до основания в отдельном топике В чем проблема ENB

Прошу вех присоединяться.

[vlastv]

В докладе "где не слышно", говориться о http://patternlab.io/ Atomic Design

[robhrt7]

@ilyar

Очень близко к описанным фантазиям есть проект SourceJS вот демо проект https://github.com/sourcejs/lego и видео https://www.youtube.com/watch?v=cefy_U5NU4o

Насколько близко и планируется ли поддержать БЭМ-экосистему блоков призываю ответить @operatino

Мы планируем поддерживать совместимость с BEM блоками, это будет как один из примеров использования в рамках доп. расширений для SourceJS и Design-lego.

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

В данный момент Design-lego открыто доступен для всех, в альфа версии - https://github.com/sourcejs/lego. Ближайших планов на его дальнейшее развитие пока нету, инструмент работает на простых юзкейсах и служит больше примером возможностей работы с компонентами в будущем. Приветствую всех желающих поучаствовать в разработке, пишите на r@rhr.me, обсудим.

@vlastv

В докладе "где не слышно", говориться о http://patternlab.io/ Atomic Design

В случае с pattern lab, там нужно самому (в коде) собирать компоненты, движек позволяет их ренделить и предоставляет навигацию. Это же самое в SourceJS можно сделать с любыми технологиями, более гибко, но с чуть более высоким порогом вхождения.

Оригинальный patternlab работает на PHP, но есть много имплементаций, в том числе и на NodeJS.

[qfox]

@operatino попытался влезть в sourcejs — не хватает примеров для быстрого старта, не очень понятно, какую задачу он решает и как его правильно использовать. Не думали над README поработать?

[pavelpower]

@ilyar Названия технологий и их апи настолько разные, что убивают многое. У них нет зависимостей других технологий, которые стоило бы запилить, без этого конфиги больших проектов выглядят как какашка (см. bem-components и проекты с хакатона). Технологии жестко завязаны файловую систему и имена технологий — оба не критично, но имхо это не правильно и тоже не дают красиво расти конфигам на больших проектах, и сам конфиг становится отдельным небольшим проектом. И это все не субъективно. Для 80% пользователей это так ;-)

@zxqfox я вот смотрю, очень часто enb-шники не используют автогенерацию конфигов. Может быть с этим было бы куда меньше. Но именно здаровенные конфиги меня пугают в enb

[qfox]

@pavelpower Большие — не значит плохие, но значит детальные. Думаешь, что enb-шники не пользуются https://github.com/bem/generator-bem-stub ? Сомневаюсь, что никто из них не пользуется ;-)

[robhrt7]

@zxqfox

@operatino попытался влезть в sourcejs — не хватает примеров для быстрого старта, не очень понятно, какую задачу он решает и как его правильно использовать. Не думали над README поработать?

Readme не достаточно, будут видео. Установив можно быстро понять что из себя это представляет, и сам sourcejs.com на этом же движке.

[qfox]

[ilyar]

@zxqfox для быстрого старта попробуй http://sourcejs.com/docs/base/ :

npm install -g yo grunt-cli generator-sourcejs
mkdir sourcejs-folder && cd $_ && yo sourcejs
node app
open http://localhost:8080/

@operatino правильно ли я понимаю, что SourceJS можно сравнить с bem-site-engine т.е. они похожим образом решают одну задачу, а именно собирают интерактивную документацию из отдельных компонентов?

[robhrt7]

@ilyar Да, база одинаковая. Разница в том, что SourceJS не завязан конкретно на BEM и фокусируется больше на процессах разработки интерфейсов, через библиотеку компонентов - отсюда улучшенная навигация, с поиском, скриншотами компонентов, система плагинов для взаимодействия с командой на основе документации, АПИ примеров блоков.

К тому же, мы рассмытриваем SourceJS как платформу для разработки и тестирования компонентов, используя Clarify и подход разработки прямо в документации.

Железная структура BEM позволяет сильно упростить работу с компонентами, в SourceJS мы больше боремся с не столь структурированными компонентами. Но, как я говорил ранее, поддерживать совместимость с BEM будем, так что будет возможность работать из SourceJS с BEM так же, как и с bem-site-engine + дополнительные возможности поверх.

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

[Guria]

@operatino Тоже давно смотрел на SourceJS. Как то мимо прошел релиз 0.4.0, сейчас изучу. Уже сейчас есть хоть какие-то варианты использования его с библиотекой бем блоков?

@tadatuta на bem.info/forum последние коменты не отображаются. Вот и я спросил то, на что по сути уже ответ дан был.

[robhrt7]

@Guria, варианты всегда были, вопрос во времени настройки. Пока не прорабатывал, но это на подходе, сейчас все силы на примеры направлю, без допила новых фич.

[robhrt7]

@tadatuta И кстати да, последних комментарией на сайте https://ru.bem.info/forum/issues/129/ нету, видимо баг.

Я лично просто GH Issues использую.

[tadatuta]

@operatino @Guria похоже, что отображаются первые 30, завел баг, спасибо!

[Drekrosh]

Мое мнение , какой смысл такого "Лего" - все сразу стану ленивыми и просто отпадет смысл в чем либо разбираться и как это работает. И все кругом станут верстальщиками и бэм разработчиками)))

[qfox]

Это потому что ты еще не устал руками это все писать ;-)

[sipayRT]

Мое мнение , какой смысл такого "Лего" - все сразу стану ленивыми и просто отпадет смысл в чем либо разбираться и как это работает. И все кругом станут верстальщиками и бэм разработчиками)))

Да, этого нельзя допускать! Даешь повышение порога вхождения в БЭМ!!! :)