Привет всем.
Все сообщения клуба не прочитал, дошел только до 3-ей страницы, поэтому возможно какие-то вопросы будут повторятся.
Очень понравилась идея БЭМ, изучаю и читаю про bem-tools второй день, хотя в обычном CSS использую БЭМ нотацию уже давно (правда с синтаксисом модификаторов "block--mod" - там немного нагляднее).
1) Я так понимаю, когда собирается страница (bundle), собирается ее CSS, который потом раздается например NGINX для каждой отдельной страницы
Получается для каждой страницы у нас отдельный CSS файл. Хотя их и можно закешировать надолго, но все равно - когда скажем собирается 1 файл для всего проекта как например в Ruby on Rails Assets Pipeline + на каждой странице подключаются дополнительные файлы - получается как-то более эффективно, потому что основной файл получается закеширован и если он не поменялся, пользователь будет получать все из кеша.
2) Как-то не нашел ничего про локализацию блоков.
Что-то вроде - делаем папку с en_US.js, fr_FR.js, а потом в BEMHTML описываем куда будут вставляться данные в стиле
this.currentLocale['main.string']
А язык определяется глобально на странице?
3) По сути блоки - это функции как в Erlang'е и функциональных языках - делают что-то свое обособлено
Но по-моему сейчас главная задача состоит в компоновке блоков на странице.
- Мы описываем BEMJSON для страницы - для зависимостей и удобства верстки и отладки.
- Получаем данные на сервере или клиенте
- Повторяем BEMJSON страницы уже с данными, чтобы скормить шаблонизатору, чтобы получился HTML?
По сути, есть 2 сущности:
- Статическая - например, логотип, текст в header'е, текст в footer'е - они редко когда меняются.
- Динамическая - она берет данные откуда-то и как-то должна выводится.
Можно как-нибудь выделить этот единый BEMJSON для страницы с уже забитыми статическими данными и биндить данные по селектору?
У нас страница знает уже как нужно отображать блоки, мы это на этапе компиляции сделали. Получается нам нужно только вставить в уже существующий BEMJSON еще много BEMJSON сущностей.
Может какой-нибудь метод сделать, например указать для блока уникальный ID, а потом вставить в этот блок в поле content BEMJSON с данными из API?
Псевдокод:
data = {block: 'news',content: [{elem: 'item',content: 1}]}
page.update('#news_field', data)
V8.run("BEMHTML.apply(#{page})"
-->
HTML <!DOCTYPE><html>...
Лента новостей, список пользователей, горячие предложение - блоки могут быть одни для всех этих типов, а данные разные.
Простой биндинг (найти и заполнить content по сути) на что-то уникальное типа ID по-моему дает хорошую, логическую структуру.
4) Собственно, как отправить .bemhtml.js страницы на... страницу? Просто сделать <script></script> со ссылкой на этот файл, а потом через NGINX раздать?
Спасибо.
1) С помощью команды bem decl можно создавать нужные варианты css файлов, прочитать можно тут: http://ru.bem.info/tools/bem/commands/ - параграф "bem decl"
1)
минимально достаточно одной строки в конфиге nginx, типа:
rewrite ^/([\w-]+)/(\?.*)?$ /pages-desktop/$1/$1.html$2 last;решение в лоб, возможно есть более подходящий метод: можно создать отдельный бандл с нужными вам общими блоками, собрать его, и затем подключать на других страницах используя b-page__css
2)
Про локализацию не в курсе, а для интернационализации есть технология i18n.
3)
мы описываем bundle-name.bemjson.js для формирования html, т.е. для статичного сайта этого может быть достаточно, а, например, для одностраничного приложения все может быть полностью шаблонизировано на клиенте
Повторяем шаблонизацию только для тех блоков, которые изменились, всю страницу заново шаблонизировать при каждом взаимодействии с сервером не надо
да, шаблонизация на клиенте производится так: BEMHTML.apply({BEMJSON}) - возвратит строку из html(вствить которую можно с помощью методов блока i-bem BEM.DOM.*). Для использования BEMHTML вам нужно подключать на странице bundle-name.bemhtml.js + .js(или просто .pub.js, что является конкантенацией этих двух файлов), или декларировать зависимости так
Отличить один блок от другого можно по-разному: добавить различные модификаторы, js параметры блока, ...
Существует bem-mvc, я его не щупал, но помоему это то, о чем вы говорите
1) Можно собирать как специальные бандлы-страницы, где будут нужные зависимости, так и специальный merge бандл, где будут собраны общие файлы для всех бандлов. http://ru.bem.info/tools/bem/customization/
3) bemjson можно использовать для описания блоков, для страниц, как мне кажется, он уже не очень годится. Страницы лучше описывать в bemtree. Таким образом динамический рендеринг html получается следующим: получаем данные(json) накладываем на них bemtree шаблон, получаем bemjson, на котоый накалыдваем bemhtml и на выходе получаем нужный html.
4) По старому, можно при собрке зашить bemhtml в клиентский js, написав простую топрную технологию, в bem-core уже есть технология bemtree+browser.js которая собирает общий js и там уже не весь bemhtml, а только шаблоны нужны блоков, да и по весу сильно снизился.
Я хотел выразить немного другое.
На клиенте все относительно понятно - там уже все готово. Шаблонизатору скармливаешь данные в формате BEMJSON, он по созданному шаблону их превращает в HTML, потом добавляешь в DOM.
Я хотел бы узнать про server-side. Классическое Первичное формирование страницы, чтобы не перекладывать все на клиент (а может быть вообще все рендерить на сервере, потому что сервер - это мощь и cache
Когда у нас пришли данные, мы составили для этих данных BEMJSON - для каждого блока свой. Для ленты новостей, для пользователей, даже если сами блоки одни и те же - например, b-feed.
По текущей логике, я так понимаю нужно взять весь BEMJSON bundle'а со всеми вложенностями
То есть получается надо считать из файла bundle.bemjson.js, найти каким-то образом блок и вставить полученный BEMJSON.
Потом весь этот BEMJSON bundle'а идет в bundle.bemhtml.js, в нем формируется HTML.
По крайней мере мой опыт Server-side так подсказывает, может я чего-то не понимаю
расскажите, пожалуйста, что такое bemtree и как его использовать, или где можно про это почитать?
http://ru.bem.info/blog/2013/08/bemup-talks/ — это всё что я нашел.
К вопросу про "почитать" присоединяюсь.
bemtree тотже bemhtml, только цель не bemjson --> html, а data --> bemjson. Синтаксист тотже, только техналогия сборки другая. http://clubs.ya.ru/bem/3470/3495#reply-bem-3495