БЭМ-разработчики,привет!

Если вы помните, после вебинара, который мы провели совместно с проектом LoftBlog в январе 2015, где мы верстали Яндекс.Музыку, мы объявили о небольшом конкурсе по разработке своего проекта на БЭМ. По заданию конкурса нужно было познакомиться с БЭМ-технологиями и разработать свой проект, используя по максимуму стек технологий БЭМ.

В течении месяца вы писали код, а мы были в ожидании ваших проектов. Дедлайн конкурса был 23 февраля 2015 года и он подошел к концу.

Давайте подведем итоги. Мы получили 7 проектов, код которых мы собираемся оценить, подготовить ревью, а лучшим разработчикам работ вручить памятные и полезные призы.

Проекты, которые участвуют в конкурсе:

• Набор карточек в стиле гуглового «material» дизайна https://github.com/phamap/bem-card-world
• Верстка «лендинг» шаблона Halcyon Days https://github.com/oozywaters/Halcyon
• Альтернативный вариант главной страницы bem.info в виде «лендинга» https://github.com/1vank1n/bem-landing/
• БЭМ-библиотека для подключения шрифтовых иконок Font Awesome https://github.com/1vank1n/bem-fa
• Аналог jQuery UI slider в виде БЭМ блока https://github.com/kuflash/bem-range
• Компонент выезжающего двухуровневого меню в виде БЭМ-библиотеки из нескольких составных блоков https://github.com/Guria/bem-drawer-menu
• Верстка макета Velo Dashboard на базе заготовки БЭМ-проектов project-stub https://github.com/gcor/bem-testpage

Мы оценим каждый присланный проект. Главными критериями будут соблюдение методологии БЭМ и использование БЭМ-стека (project-stub, bemjson, bemhtml, bh, i-bem.js).

Результаты конкурса планируем опубликовать после 17 марта 2015 года.

Спасибо Вам за участие и Stay BEMed!

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

Для получения данных для блока bemtree используется следующий подход:

{
    block  : 'some-block',
    data-a : {
        controller : 'controller-a',
        action     : 'action-a',
        // ...
        // Data for action and models...
    },
    data-b : {
        controller : 'controller-b',
        action     : 'action-b',
        // ...
        // Data for action and models...
    }
}

Все эти данные, асинхронные или нет, обрабатываются до попадания в BEMTREE.apply.

Далее в блоке some-block имеются необходимые данные data-a и data-b - полученных из соответствующих контроллеров выполняющих необходимые действия.

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

Вопрос наверное больше к тимам и профи, что думаете? Возможно имеется другая схема, интересно послушать. Данный пример - это очень похоже на MVC и она нравится, хочется послушать критику и альтернативы.

Спасибо за внимание!

Возможно ли использование компонентов реализованных как bem блоки на проектах ничего не знающих о bem? Если да, то как именно?

Добрый вечер. Хочу попробовать внедрение методологии БЭМ в документировании принципов сборки приложения на основе общих высокоуровневых блоков (заголовок приложения, навигация, система уведомлений, справочники, компоненты и т.д.).

Что ожидаю получить:

• актуальная документация которую легко поддерживать
• общая терминология для всех участников процесса создания продуктов
• UX-проектировщик упорядочивает свои решения и формирует библиотеку общих решений
• UX-проектировщик занят актуальными проблемами вместо перерисовки устаревающих макетов
• менеджеры проектов пользуются документацией и применяют описанные решения
• менеджеры проектов дают обратную связь и участвуют в развитии общей документации
• менеджеры проектов совместно с UX-проектировщиком доопределяют документацию согласно требованиям своего проекта
• программисты пользуются документацией
• программисты понимают где собрана вся документация по определённому блоку
• программисты понимают, что пытался донести UX-проектировщик
• менеджеры проектов и программисты имеют доступ к примерам как стоит и не стоит использовать блоки
• продукты компании выполнены в общем стиле и с единым подходом к навигации, структуре контента и т.д.

Что потребуется:

• Терминология, принципы именования и размещения на файловой системе - заимствуются у БЭМ
• Выбор технологий для описаний, макетов, примеров
• Инструменты и технологии сборки
• Технология публикации артефактов и документации (сайт)
• Упоротость и удача
• Преодоление множества "подводных граблей" на пути к мечте

Данный пост можно рассматривать:

• попытку определить и упорядочить цели и задачи
• сбособ получить критику, замечания и напутствия от сообщества

Всем привет!

Мы хотим порадовать вас и подарить вам немного БЭМа к новому году!

Однако подарков немного, и чтобы никому не было обидно, мы раздадим их тем, кто активно поучаствовал в жизни сообщества.

Если вы считаете, что помогли нам и всем БЭМ-разработчикам, напишите, пожалуйста, под этим постом ответы на следующие вопросы:

• кто вы, где работаете и чем занимаетесь?
• и
• какие проекты на БЭМ вы сделали или делаете?
• какие сайты на БЭМ вы запустили или запустите?
• какие доклады или статьи про БЭМ вы сделали?
• если есть что-то еще, добавляйте :)

К ответам приложите, пожалуйста, ссылки на проекты.

Призы мы пришлем почтой, для чего свяжемся с вами.

Начинать можно прямо сейчас!

Удачи и Stay BEMed!

Эти выходные с BEMup'ом в Питере были просто чудесны! Не говоря про погоду, которая просто была сказочной, программа митапа была насыщенной, а многие приехали в Питер аж из Москвы посмотреть и пообщаться с нами. Спасибо, мы тронуты!! А еще нас много просили показать мастер-класс не самим, а сделать так, чтобы пришедшие участники могли писать код. А это ой как не просто! Почти 2 месяца подготовки заданий и написания тестов, сто раз проигранные в мозгу планы, трансляция, видео, зал, как все это соединить воедино, плюс тестирование на --котиках-- коллегах, и вот он долгожданный день! Это был урок, проверка, и круто, что все получилось! Даже коллеги не из службы БЭМ подходили и говорили: «Круто! Я сделал что-то сам на bem-core!» И да, нам есть, что теперь оттачивать дальше, к ноябрю А вы это, не расслабляйтесь! https://tech.yandex.ru/events/bemup/ :) Видео как всегда через 2 недели в разделе «Выступления», фото уже тут https://www.facebook.com/media/set/?set=a.825215090831947.1073741904.122612334425563&type=1, вопросы к нам можно писать в форум и помечать 2-мя метками — продукт и asktheteam

Наш постоянный фронтендер собрался в отпуск, а проект, кровь из носу, надо пилить. Необходимо разработать фронтенд для многошаговой регистрации с заполнением большого количества полей профиля. На вход будут предоставлен аккуратный psd-макет, консультации дизайнера и проджект-менеджера. На выходе мы ждем фронтенд, который будет сделан максимально приближенно к тому, что мы обычно делаем: БЭМ, LESS, jQuery, немного Knockout. Причем аккуратно, с любовью.