17 мая в московском офисе Яндекса прошел очередной BEMup. Однако, несмотря на пятое мероприятие, мы постарались сделать его новым и полезным. К примеру, этот митап впервые прошел в субботу и длился целый день, а практически все доклады на нем были мастер-классами, где разработчики писали код вживую.

Мы рассказали новости последних релизов, запустили новые инструменты, а также в рабочей атмосфере обсудили сложности в использовании БЭМ. В первой половине дня провели большую практическую сессию по написанию проекта на полном стеке БЭМ-технологий — более подробную, чем в прошлый раз в Минске. Больше кода вживую, меньше заготовок. А также попрактиковались в создании приложения с использованием библиотеки bem-mvc. Далее послушали доклады про скафолдинг БЭМ-проектов на yo, тестирование CSS-регрессий в верстке и организацию нового фронтенда в Альфа-Банке. По сложившейся традиции поделились новостями релизов библиотек bem-core и bem-components, поговорили про инструменты фронтендера и отлично пообщались.

Мы были очень рады увидеть вас в зале и получать вопросы в твиттере по хештегам #b_ и #bemup. Мероприятие собрало около 60 человек в зале и 50 на онлайн-трансляции. Нас смотрели ребята из Москвы, Котово, Саранска, Одессы, Минска, Харькова, Оренбурга, Брянска, Воронежа.

Спасибо вам, что в эту субботу вы были с нами и сделали ее незабываемой. Мы смонтировали видео и делимся им с вами!

Программа митапа

Видео выложены в соответствии с программой мероприятия.

• Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека Константинов, Дима Белицкий, Слава Аристов
• Библиотеки блоков bem-core и bem-components — Владимир Гриненко
• Мастер-класс: Организация приложения на основе bem-mvc — Сергей Максимов
• Инструменты БЭМ-разработчика — Антон Виноградов
• Инструменты фронтенд-разработчика — Владимир Гриненко
• Генератор БЭМ-проектов на Yeoman — Евгений Гаврюшин
• Тестирование CSS-регрессий с Gemini — Сергей Татаринцев

Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека Константинов, Дима Белицкий, Слава Аристов

 

 

БЭМ упрощает разработку сайтов, которые нужно быстро создать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться. С обширным арсеналом БЭМ, со всей его модульностью и мощью, вам останется «всего-то» придумать идею и реализовать её. На мастер-классе вы сможете вместе с нами создать то, что мы «только что» придумали. Вы узнаете, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомитесь с готовыми библиотеками блоков и инструментами для автоматизации сборки. Мы покажем, как разные инструменты — например, autoprefixer, CSS-препроцессор roole или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки на БЭМ. На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельная часть мастер-класса будет посвящена декларативным шаблонам BEMHTML и BEMTREE, которые позволяют преобразовывать сырые данные во view-ориентированный BEMJSON. Мы вместе напишем серверную часть приложения в БЭМ-методологии и используем данные от разных социальных и поисковых сервисов (RSS с Яндекс.Фоток, API Twitter и Instagram). В результате получится работающий сайт, а вы — на практике познакомитесь с полным стеком БЭМ-технологий. После мастер-класса мы сможем свободно пообщаться на профессиональные темы. Например, вы расскажете о трудностях, с которыми встретились при реализации проекта на БЭМ, и мы вместе подумаем, как воплотить вашу идею в жизнь.

Скачать презентацию в .pdf

Скачать видео, часть 1 1,21 ГБ, часть 2 1,58 ГБ, часть 3 1,78 ГБ

Библиотеки блоков bem-core и bem-components — Владимир Гриненко

При разработке новых библиотек bem-core и bem-components мы переосмыслили свой подход и предыдущий опыт. Теперь разработка — это честный опенсорс с прозрачным планированием, где каждый может повлиять на результат. Мы сформулировали требования: тотальная автоматизация, Bleeding Edge, оптимизация, разные варианты поставки библиотеки, поддержка нескольких визуальных тем, бережность и кругозор. И определили технологии: анализаторы кода, юнит-тесты, модульность, шаблонизаторы, работа с CSS, зависимости и сборка. В докладе я подробно остановлюсь на каждом из этих вопросов.

Скачать презентацию в .pdf, видео 341,5 МБ

Мастер-класс: Организация приложения на основе bem-mvc — Сергей Максимов

Сейчас на рынке есть множество фронтенд-библиотек, которые так или иначе реализуют MVC-паттерн. По сути, они нужны для облегчения создания и поддержки интерактивных веб-приложений. Для этих же целей и мы разработали библиотеку bem-mvc — она облегчает разработку веб-приложений на существующем БЭМ-стеке. Так, для реализации моделей в bem-mvc используются те же компоненты, что и в библиотеках bem-bl/bem-core. А провязки с представлением осуществляются в БЭМ-терминах для контролов из библиотеки bem-components или произвольных БЭМ-блоков. На прошлых BEMup я уже рассказывал об основных элементах библиотеки bem-mvc и способах их применения. Но то была теория, а на этот раз — меньше слов, больше дела! В прямом эфире мы создадим небольшое приложение для демонстрации возможностей bem-mvc. Пройдем путь от статического макета к действующему приложению. В процессе мы научимся организовывать код приложения, создавать модели, осуществлять провязку моделей и представления и создавать свои типы провязки.

Скачать презентацию в .pdf, видео 1,26 ГБ МБ

Инструменты БЭМ-разработчика — Антон Виноградов

Поговорим об организации нового фронтенда в Альфа-Банке: как подружить шаблонизатор BEMHTML, bem-tools и AngularJS с Yeoman и Gulp. Мы рассмотрим проект, в котором используются все эти инструменты, а также внутренние и опенсорсные библиотеки блоков, и узнаем, как уровни переопределения помогают свести написание стилей для новых проектов к минимуму и почему вообще это нужно.

Скачать презентацию в .pdf, видео 313 МБ

Инструменты фронтенд-разработчика — Владимир Гриненко

Мы поговорим о том, как создать эффективный и надёжный код, переложив всю лишнюю работу на роботов. Решим проблему с разным окружением у разработчиков (vagrant), научимся писать стили удобно (roole, autoprefixer), оптимизируем получившийся CSS (clean-css, CSScomb) и графику (Imagemin, SVGO), проверим js-код (jshint, jshint-groups, jscs), убедимся, что некрасивый код не попадёт в репозиторий (git-hooks), и обсудим, как можно быстро и легко создавать новые инструменты.

Автоматизируем всё, что можно, и подумаем, что и почему — нельзя!

Скачать презентацию в .pdf, видео 295 МБ

Генератор БЭМ-проектов на Yeoman — Евгений Гаврюшин

Начиная БЭМ-проект, разработчик в первую очередь создает конфигурационный файл для сборщика. И для enb, и для bem-tools это довольно трудоемкий процесс, в ходе которого часто возникают ошибки. Для экономии времени и уменьшения порога вхождения в инструменты для сборки мы решили создать генератор конфигурационных файлов, который позволяет конфигурировать сборку без погружения в API инструментов. Я расскажу, как легко и быстро начать БЭМ-проект при помощи генератора. Вы получите основу в считанные минуты, для этого достаточно ответить на несколько наводящих вопросов.

Скачать презентацию в .pdf, видео 343,8 МБ

Тестирование CSS-регрессий с Gemini — Сергей Татаринцев

Каждый разработчик интерфейсов долгоживущих сервисов сталкивается с регрессиями в вёрстке. Мы научились пользоваться инструментами для unit-тестирования js-кода, но до сих пор плохо понимаем, как тестировать на регрессии вёрстку. И ещё хуже понимаем, как делать это автоматически (continuous integration) и при этом писать небольшие и не очень хрупкие тесты. В этом году мы создали Gemini — инструмент для модульного тестирования вёрстки для нашей библиотеки компонентов. Мы используем его для тестирования внутренней библиотеки компонентов Яндекса, которая лежит в основе большинства наших сервисов (например, Поиска и Картинок). На BEMup я расскажу, как использовать этот инструмент — как разрабатывать тесты и запускать их на локальной машине или в уже существующей экосистеме (Travis CI, Sauce Labs).

Скачать презентацию в .pdf, видео 296,8 МБ

Мы также собрали все фотографии в один альбом, он доступен по ссылке и в слайдшоу:

Приятного просмотра, и обязательно приходите на наши будущие мероприятия!

Если вам есть, что сказать нам, посоветовать или покритиковать, спросить или поделиться, пишите на почту info@bem.info круглосуточно и без выходных.

Приятного просмотра и Stay BEMed!