На предыдущих вебинарах мы говорили о декларативных возможностях CSS и BEMHTML, используемых в методологии БЭМ, а также о специальном фреймворке JavaScript для БЭМ.

В этот раз мы расскажем об open-source библиотеке БЭМ-блоков bem-components, используемой в Яндексе. Она вобрала в себя весь накопленный опыт и учитывает множество тонких нюансов от пуленепробиваемости благодаря БЭМ методологии и полному покрытию тестами, до соответствия высоким требованиям доступности (a11y).

Мы разработали её таким образом, что вы легко сможете внедрить её в свой проект, изменить визуальную тему или расширить.

Это вебинар для тех, кто уже немного знаком с БЭМ, знает HTML и CSS хотя бы на базовом уровне, понимает общие процессы веб-разработки и умеет пользоваться командной строкой. Также пригодятся знания, полученные на прошлых вебинарах. Для выполнения заданий понадобится терминал с установленными git, node.js и npm.

Обратите внимание, трансляция начнется в 17:00 16 марта на отдельной странице.

Важно! В этот раз мы хотим поэкспериментировать с Hangouts, так что трансляция будет выглядеть по-новому и предварительная регистрация не нужна.

Давно не пользовался bemhtml и bemtree. Подскажите, как в bemtree пробросить переменную, например тему, чтобы она была доступна во вложенных шаблонах? В bh это было ctx.tParam(). Как в bemtree? Также, хотелось бы узнать пару хороших практик в bemtree

Всем привет и доброго дня! Читаю документацию и пробую поймать элементарное событие с потомка. Получается чуть менее, чем никак(((

Делаю так:

Кусок bemjson

{
    block : 'test',
    js : true,
    content : {
        block : 'test2',
        js : true,
        content : 'test2 content'
    }
}

Модули:

modules.define('test', ['i-bem__dom', 'test2'], function(provide, BEMDOM, test2) {
    BEMDOM.decl('test', {
        onSetMod : {
            'js': {
                'inited' : function() {
                    test2.on(this.domElem, 'click', this._onClick);
                }
            }
        },
        _onClick : function(e) {
            console.log('hi test');
        }
    });

    provide(BEMDOM);
});

modules.define('test2', ['i-bem__dom'], function(provide, BEMDOM) {
    BEMDOM.decl('test2', {
        onSetMod : {
            'js' : {
                'inited': function() {
                    this.bindTo('click', this._onClick);
                }
            }
        },
        _onClick : function(e) {
            this.emit('click');
            console.log('hi test2');
        }
    });

    provide(BEMDOM);
});

Депсы

test2.deps.js

[{
    mustDeps : [
        { block : 'i-bem', elem : 'dom' },
        { block : 'test2' }
    ]
}]

test.deps.js

[{
    mustDeps : [
        { block : 'i-bem', elem : 'dom' }
    ]
}]

Блоки инциализируются. Ошибок нет. При клике на блоке test2 в консоль падает только 'hi test2'.

Второе. Пробовал через this.findBlockInside('child').on('click', this._onFilterClick, this) задействует только первый дочерний блок... Это правильное его поведение?

Третье. Что это за штука такая: BEMDOM.blocks['blockname'].on(......... Можно где по ней найти документацию? Она поддерживается?

Четвёртое. В коментах тут встречал, что есть ещё каналы. Почитал про них здесь: https://ru.bem.info/libs/bem-core/v2.8.0/desktop/events/#Элемент-channels-блока-events

Это вроде замены findBlockOutside(???).on() или можно использовать повсеместно? Или я вообще неправильно понял назначение каналов?

Читал форум, наткнулся на несколько ответов о responsive, что можно писать стили для разных размеров браузера прямо в файле блока, так и делаю. А как быть, например с кнопками, селектами из bem-components? Какое нибудь есть решение или нужно дописывать media запросы для этих блоков?

Есть ли возможность сделать так, чтобы на выходе html файл не был сжать, имею ввиду чтобы сохранялась разметка.

Сейчас, у нас, если блок имеет логику на priv его можно встроить только в priv'ах же

Предлагаемое решение: регистрировать декларации блоков в неком хранилище в BEMPRIV, а вызываться они должны автоматически неявно на этапе XJST В этих привах не должно создаваться BEMJSON'а, только маппинги данных и какая-нибудь хитрая логика.

XJT/BEMS - Xtendable (almost)-json RawData --> BEMJSON Transformation based on Block Elem Mod State concept (BEMS — not BEViS, 42th BEM concept fork)

https://gist.github.com/a-x-/39242cb6ee00231900f0

Всем привет!

Надо сверстать блок "О компании", вот кусок моего варианта реализации:

HTML:

<div class="about">
    <div class="about-advantage">
        <div class="about-advantage__item">
            <div class="about-advantage__wrap">
                <img class="about-advantage__img">
                <p class="about-advantage__text"></p>
            </div>
        </div>
        <div class="about-advantage__item">
            <div class="about-advantage__wrap">
                <img class="about-advantage__img">
                <p class="about-advantage__text"></p>
            </div>
        </div>
    </div>
</div>

SCSS:

.about{
  &-advantage{
    &__item{
    }

    &__img{
    }

    &__wrap{
    }

    &__text{
    }
  }
}

Вопросы:

1. Как показать в имени блока то, что он является дочерним блоком? Его надо именовать как элемент about__advantage? Или создавать микс about__advantage about-advantage?
2. about-advantage__item и about-advantage__wrap являются элементами блока about__advantage, но в то же время содержат в себе другие элементы, а значит, они являются блоками - как их правильно именовать?

P.S. Буду очень рад примерам хорошей верстки :)

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

Начал разбираться с БЭМ библиотеками для PHP, имею знание о существовании библиотек =)

1. bh-php
2. bem-core-php
3. bem-components-php

Мне удалось установить лишь первую библиотеку через composer(очень удобно), но если верно всё понимаю - ничего не будет работать как минимум без второй.

Вот тут в обсуждении мне подсказали, что есть библиотеки, используемые Node.js, а есть для PHP. Сам пока предпочитаю использовать голый PHP 5.6.

Второй и третьей библиотеки в composer не нашёл, в руководствах по использованию дано указание для установки использовать bower. Если верно понимаю, то composer это менеджер пакетов для PHP, а bower это менеджер пакетов для Node.js Возник диссонанс - зачем мне устанавливать что-то для PHP через bower? Наводит на мысль что делаю что-то неправильно. Вопрос может быть некорректным с высоты опыта опытных=), но хочу ликбеза.

По ссылке выложил свои действия по установке и пробе примеров указанных тут. Номер картинки - это шаг, номер действия. PHP Storm выругался на рисунках 4, 5 и 7, что удалось мне частично исправить на рисунках 8,9. Ну а результат сами видите.

Вопросы: 1) Какие библиотеки мне надо ещё установить и как не бояться bower, если он для работы с php тоже помогает? 2) Возможно это касается настроек самого PHP Storm, но по возможности хотелось бы знать, почему ваши примеры заставляют его ругаться?

Первый вариант nginx -> node.js -> Laravel (php framework) минусы

• много логики надо писать на node.js(express.js/js framework) по сути надо заного писать функциональность которая есть в Laravel (php framework)
• зачем тогда Laravel =)
• очень сложно для не подготовленных
• дольше реализация проект

плюсы

• набраться опыта писать все функции фреймворков для веб приложений =)

Второй вариант nginx -> Laravel (php framework) -> node.js -> Laravel (php framework) -> nginx

минусы

• как бы усложнение за счет дополнительной серверной части на node.js
• Laravel (php framework) отдав данные в node.js будет ожидать от него ответ. И потом строку передавать через себя что кажется оверхедом

плюсы

• используем все прелести трехзвенной шаблонизации
• работает очень быстро

Третий вариант nginx -> node.js -> Laravel (php framework) -> node.js -> nginx

нравится больше всего))

работает так

• nginx работает только с node.js
• node.js поднимает laravel и передает ему данные как есть, проксирует
• laravel отдает массив json node.js
• node.js отдает отрендереную строку html nginx и заголовки которые сформировал laravel (php framework)

плюсы:

• Laravel (php framework) выполнил работу отдал данные и ушел спать
• можно усовершенствовать node.js
• можно использовать node.js кеширование если допустим Laravel (php framework) слишком занят

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

К сожалению не разбирал крайний i-bem, может он уже "умеет".

redux - такая штука которая работает с иммутабельным состоянием. В БЭМ модификтор - это состояние, а т.к. в большенстве своем это css, то и состояние модификатора не меняется.

А что если сделать timline как у redux для управления состояниями блоков aka модификаторами? А там и тему с состояниями развить до того, что заполнение данных в форму блока это тоже изменение состояния блока...

Как мне сейчас кажется, BEMTREE — это BEMHTML с другим расширением файлов для описания комбинация блоков в отличии от BEMHTML, который должен описывать независимые блоки

В нашем проекте он не используется и не понятно нужен ли

Кто каким пользуется? И у какого больше переспективы на существование, поддержку, развитие )))

давайте свои за и против))))

Добрый день всем! Планирую делать проект на БЭМ и джанго, и вместо стандартного JSON опробовать обмен данными посредством сокетов(WAMP). Кто-нибудь пробовал подобное с БЭМом? И как бы лучше это все подружить?

Народ поделитесь конфигами для работы с БЭМ сейчас использую доработанный https://github.com/miripiruni/vimi все круто, но всегда кажется что чего то не донастроил =)

Привет. У нас есть несколько вещей, которые мы хотим сначала объявить deprecated, а затем оторвать в одной из следующих версий. Если вы не встречались ни с одной из этих вещей, я не буду удивлен, и посчитаю это подтверждением правильности наших действий.

once()

Выпиливаем по двум причинам.

1. once не работает так как ожидается. По названию можно подумать, что шаблон применится один раз в рамках узла. Но по факту он применится один раз в рамках всего прохода apply().
2. Очевидно once никому не нужен, так как этот баг даже не замечали до недавнего времени.

Есть важный момент про сохранение обратной совместимости с bem-xjst 1.x и мы про него помним. Поэтому once будет объявлен deprecated, но оторван только тогда, когда пользователей bem-xjst 1.x совсем не останется.

this.isArray()

Рекомендуем использовать Array.isArray.

this.isSimple()

1. Есть ощущение, что метод никому не нужен.
2. Метод слегка отстал от текущей спецификации:

this.isSimple(Symbol('foo')); // Вернет false, хотя символ это примитив.

local()

Метод не нужен и мы не видим для него никакого практического применения. Мы решили объявить его deprecated, чтобы не путать вас и не мучать догадками зачем же оно нужно.

Итого

Есть по перечисленным методам есть замечания или возражения — пишите.

https://github.com/tadatuta/bem-express/blob/master/common.blocks/root/root.bemtree.js В bemtree шаблоне явно указывается index.css и index.js Если бандлов будет несколько как поставить правильные ссылки на статику? Или, например, в зависимости от типа страницы - нам нужно указать модификатор и тему блоку page?

Пакет есть во всех либах. Нужен ли он как зависимость в моем проекте?

Планирую написать сайт на БЭМ и django. Взаимодействие будет реализовано как написал Владимир тут https://ru.bem.info/forum/483/#comment-120414533

1. Наружу торчит какой-нибудь балансер (например, nginx).
2. За ним стоит node.js сервер, который ходит в джангу за данными (rowData). Это может быть как один запрос так и агрегация нескольких запросов по http или через unix-socket. Помимо Django нода может собирать данные из любых других необходимых источников (сторонних API, etc). Соответственно Django ничего не знает про view-часть и служит универсальным источником данных для десктопа, телефонной веб-версии или мобильного приложения.
3. Полученный от Django ответ rowData отдается первому слою преобразования (например, с помощью BEMTREE и на выходе получается BEMJSON — т.е. это по-прежнему данные, но уже знающие про view.
4. Далее BEMJSON передается в BEMHTML/BH и на выходе получается HTML.

Но я не хочу переносить какую-либо бизнес логику в nodejs. Nodejs будет лишь принимать запросы и проксировать их в django. Django будет возвращать данные только в JSON. При этом помимо самих данных бэкенд будет предоставлять дополнительные данные для БЭМ стека. Например, имя бандла, который должен принять эти данные и сформировать HTML.

Таким образом, можно будет воспользоваться всеми преимущесвами построения интерфейса на БЭМ, но при этом оставить всю бизнес-логику в django, не дублировать логику (DRY)

На стороне django будут реализованы все необходимые урлы, вьюхи. Вьюхи полагаю будут в основном на django-rest-framework + доп. данные для БЭМ. А вот на стороне nodejs будет простейший proxy сервер на express. Proxy сервер будет принимать запросы от браузера, проксировать их в django и получать в ответ JSON-данные. В этих данных будут дополнительные поля для БЭМ (возможно лучше передавать эти данные в заголовках ответа), например, имя бандла. А далее эти данные передаем в BEMTREE шаблон нужного бандла, получаем bemjson, далее этот bemjson передаем в BEMHTML шаблон и на выходе получаем html-код страницы, которуый передаем в браузер.

Это все в теории, хотелось бы услышать комментарии по данной реализации. Какие подводные камни могут ожидать?

Еще хотелось бы помощи в реализации proxy-сервера на nodejs. Пробовал использовать https://www.npmjs.com/package/http-proxy но так и не понял как его доработать, чтоб возвращать в браузер не json-ответ от django, а подменять его сформированным в БЭМ html. Может у кого есть примеры подобных реализаций? Поделитесь опытом.

Уже как то заходила речь о там что было бы круто выполнять bemtree в php. Это бы позволило сильно упростить написание шаблонов и код почище бы стал.

Можете что-то посоветовать, как организовать шаблонизацию не имея bemtree и не усложняя шаблоны блоков?

Добрый день.

1. Как можно настроить make.js, чтобы он в бандл: html файлы, css файлы и js файлы складывал в разные папки с группировкой по этим типам?
2. Не нашел, есть ли возможность штатными средствами прикрутить css препроцессор (sass/less) ?

Парни поделитесь удачным на ваш взгляд клиент-сервер решением обработки ошибок форм? Ajax+js или все на сервере удобнее? @voischev https://twitter.com/voischev/status/703501615681179650

Идеально Model -> JSON Schema -> BEMTREE -> BEMJSON в качестве JSON Schema хорошо подойдет OpenAPI-Specification. Потрогать ее можно тут editor.swagger.io (без БЭМ терминов).

Важное из того что я хотел сказать, что первичная реализация валидации должна быть на серверной стороне, используя спецификацию (хорошо подходит OpenAPI Specification лучшего решения не знаю, может есть еще?) мы можем сообщить браузеру о необходимых проверках. Такой подход позволит всегда держать фронтенд в курсе необходимых проверок модели. Единственная зависимость это клиентская реализация валидаторов которые будут описаны в JSON Schema модели которую сообщит сервер.

Это мое личное мнение, хочется узнать опыт сообщества.

Не пропустите два доклада про БЭМ на сегодняшнем Я.Субботнике.

В 17:30 @miripiruni расскажет про только-только вышедшую версию bem-xjst. А сразу после него я расскажу про новости из мира БЭМ и постараюсь ответить на все ваши вопросы.

PS: Остальные доклады тоже обязательно посмотрите! ;)

В процессе установки получил вот что http://cl.ly/2Y0Z022J151M Хотя до этого, стянут из GitHub основной пак БЕМ и все было хорошо. Подскажите пожалуйста, что я упустил.

Если у кого то уже есть реализация - просьба поделиться.

Есть планы сделать такой редактор. Хотелось бы спросить у сообщества, как вы видите удобный редактор для людей не знающих БЭМ. Основная идея - сделать максимально просто для непосвященного пользователя, и в то же время дать продвинутые возможности тем кто разбирается в БЭМ.

Для начала, как думаете, в каком формате лучше хранить контент: markdown, json, html?

В основе каждой страницы сайта лежит блок page. Как можно дополнить этот блок, чтоб добавить для него дополнительные теги?

Интересует возможность добавить ряд статичных meta-тегов в head, прописать favicon (может быть еще что то). Идея в том, чтобы задать все это в одном месте, а не прописывать в bemjson-е каждого бандла. Подобные вещи реализуются в BEMHTML-шаблонах. Но блок page уже имеет свой шаблон и нужно как то его дополнить, но при этом не сломать. Хотелось бы пример подобной реализации.

Спасибо!