Методология: БЭМ, Модули, Отношения

Константин Дзюин13 октября 2016 года

Москва, Badoo

Привет!

Константин Дзюин

Мобильный Веб Разработчик (html/css) Badoo, Лондон, Великобритания

html/css разработчик - 14 летBadoo - 3 года

Twitter: @kdzuin

Методоло́гия — учение о методах, способах и стратегиях исследования предмета.

Практическая методология направлена на решение практических проблем и

целенаправленное преобразование мира.

— Wikipedia

Новые технологии

• Постоянно трансформируют методологию разработки

• легко, весело и интересно

• некоторые вещи упрощаются

• Легко применять для проектов с чистого листа

• А что в реальной жизни?

Desktop Web> 4M активных пользователей в день

> 400 продуктовых задач за год

+недавно перешли на client-side rendering, strict api

= 8 разработчиков> 10 лет кодовой базе

Mobile Web> 2M активных пользователей в день

> 250 продуктовых задач за год

+ full redesign & restyling

= 10 разработчиков> 5 лет кодовой базе

Мобильный веб 2012 – 2015

• java/javascript/html/css разработчики

• отсутствие единой методологии html/css

• высокая цена поддержки и масштабирование

HTML5WAP

Java -> HTML

Мобильный веб – 09/2015точка “пересборки”

• специальзация html/css разработчики

• формирование единой html/css методологии

• снижение цены поддержки и масштабирования

Будущее

• Специализация: html/css разработчики

• Единая методология

• Код шаринг

• библиотека компонент

• styleguide

• Гибкость

Desktop Web

Mobile Web

Эволюция

<div class="list"> <div class="item"> <div class="userpic"> <div class="img"></div> </div> <div class="message"> </div> </div> </div> .list {} .item {} .userpic {} .message {}

“Колхоз”

var el = $.satisfy('div.list'); data.forEach(i = > { $.satisfy( 'div.item div.message[innerHTML=“' + i + ‘“"]' ).appendTo(el); });

.list { .item { .userpic {} &-message {} } }

JS “головного мозга”

Модульность

Безопасность

Безопасность

Из грязи в князи BEM

БЭМ

.block

.block__element

.block--modifier

БЭМ: Блоки

БЭМ: Элементы

БЭМ: Модификаторы

On Air CodePen time

<div class="contact-list"> <div class="contact-item"> <div class="userpic"></div> <div class="contact-item__message"> Lorem ipsum dolor sit amet. </div> </div> </div>

.contact-list {}

.contact-item {}

.contact-item .userpic {}

.contact-item__message {}

Наши дни

Desktop Web

Mobile Web

БЭМ

• случайные коллизии имён

• введение нового разработчика

• многабукаф

• BEM в Badoo – name convention, а не BEM Components

БЭМ: минусы

CSS Модули и влияние на методологию

• Изоляция CSS-кода модуля

• случайные конфликты имен

• Безопасное переиспользование

• Безопасная разработка нового

• Синтаксический сахар

CSS модули - плюсы

On Air CodePen time

<div class="contact-list"> <div class="contact-item"> <div class="userpic"></div> <div class="contact-item__message"> Lorem ipsum dolor sit amet. </div> </div> </div>

.contact-list {}

.contact-item {}

.contact-item .userpic {}

.contact-item__message {}

CSS Модули

• Ноооо, хотим из компонента А повлиять на Б

• Цена перехода?

CSS модули - минусы

Композиция

Компози́ция — составление целого из частей; организующий компонент

художественной формы, придающий произведению единство и цельность,

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

— Wikipedia

• У всех по пять, почему бы и нет?

• У всех по пять, родитель сбросит

• У всех по пять, но не у последнего

• Между соседними по пять

Отношения компонент

• Атом – Молекула – Организм

• Кирпич – Стена – Дом

• Компонент – Компонент – Компонент

• Компонент – Композиция – Композиция композиций

Как называть?

Немного схем

• Компонент нейтрален вне системы

• Отношения определяются в системе

Отношения компонент

On Air CodePen time

Итого:1. БЭМ? Модули? - что удобно

2.Компоненты: железные и резиновые

3.Композиция: отношения компонент

Прекрасное далёкоИспользования нейтральных элементов – путь к подвижной системе

Среднее время жизни кода позволяет методологии быть подвижной и адаптироваться

Как мы можем улучшить систему?

Легко!

Вопросы?

The original, largest and leading dating network

Спасибо!