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

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

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

Transcript

1. Методология: БЭМ, Модули, Отношения Константин Дзюин 13 октября 2016 года
 Москва, Badoo
2. Привет! Константин Дзюин Мобильный Веб Разработчик (html/css)
 Badoo, Лондон, Великобритания html/css разработчик - c 2002 года
 Badoo - с 2013 года Twitter: @kdzuin
3. Методоло́гия — учение о методах, способах и стратегиях исследования предмета. Практическая методология направлена на решение практических проблем и целенаправленное преобразование мира. — Wikipedia
4. Новые технологии • Постоянно трансформируют методологию разработки • легко, весело и интересно • некоторые вещи упрощаются • Легко применять для проектов с чистого листа • А что в реальной жизни?
5. Desktop Web > 4M активных пользователей в день > 400 продуктовых задач за год +недавно перешли на
 client-side rendering, strict api = 8 разработчиков
 > 10 лет кодовой базе
6. Mobile Web > 2M активных пользователей в день > 250 продуктовых задач за год + full redesign & restyling = 10 разработчиков
 > 5 лет кодовой базе
7. Мобильный веб 2012 – 2015 • java/javascript/html/css разработчики • отсутствие единой методологии html/css • высокая цена поддержки и масштабирование HTML5 WAP
 Java -> HTML
8. Мобильный веб – 09/2015
 точка “пересборки” • специальзация 
 html/css разработчики • формирование единой html/css методологии • снижение цены поддержки и масштабирования
9. Будущее • Специализация: html/css разработчики • Единая методология • Код шаринг • библиотека компонент • styleguide • Гибкость Desktop Web Mobile Web
10. Эволюция
11. <div class="list">
 <div class="item">
 <div class="userpic">
 <div class="img"></div>
 </div>
 <div class="message">
 </div>
 </div>
 </div>
 .list {}
 .item {}
 .userpic {}
 .message {} “Колхоз”
12. var el = $.satisfy('div.list'); data.forEach(i = > { $.satisfy( 'div.item div.message[innerHTML=“' + i + ‘“"]' ).appendTo(el); }); .list {
 .item {
 .userpic {}
 &-message {}
 }
 } JS “головного мозга”
13. Модульность
14. Безопасность
15. Безопасность
16. Из грязи в князи BEM
17. БЭМ .block .block__element .block--modifier
18. БЭМ: Блоки
19. БЭМ: Элементы
20. БЭМ: Модификаторы
21. On Air CodePen time
22. <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 {} Наши дни
23. Desktop Web Mobile Web БЭМ
24. • случайные коллизии имён • введение нового разработчика • многабукаф • BEM в Badoo – name convention, а не BEM Components БЭМ: минусы
25. CSS Модули и влияние на методологию
26. • Изоляция CSS-кода модуля • случайные конфликты имен • Безопасное переиспользование • Безопасная разработка нового • Синтаксический сахар CSS модули - плюсы
27. On Air CodePen time
28. <div class="list">
 <div class="item">
 <div class="userpic"></div>
 <div class="message">
 Lorem ipsum dolor sit amet.
 </div>
 </div>
 </div> .list {} → .list_hash {}
 .item {} → .item_hash {}
 .userpic {} → .userpic_hash {}
 .message {} → .message_hash {} CSS Модули
29. • Ноооо, хотим из компонента А повлиять на Б • Цена перехода? CSS модули - минусы
30. Композиция
31. Компози́ция — составление целого из частей; организующий компонент художественной формы, придающий произведению единство и цельность, соподчиняющий его элементы друг другу и всему замыслу художника. — Wikipedia
32. • У всех по 5px, почему бы и нет? • У всех по 5px, родитель сбросит • У всех по 5px, но не у последнего • Между соседними по 5px Отношения компонент
33. • Атом – Молекула – Организм • Кирпич – Стена – Дом • Компонент – Компонент – Компонент • Компонент – Композиция – Композиция композиций Как называть?
34. Немного схем
35. • Компонент нейтрален вне системы • Отношения определяются в системе Отношения компонент
36. On Air CodePen time
37. Итого: 1. БЭМ? Модули? - что удобно 2. Компоненты: железные и резиновые 3. Композиция: отношения компонент
38. Прекрасное далёко Использования нейтральных элементов – путь к подвижной системе Среднее время жизни кода позволяет методологии быть подвижной и адаптироваться Как мы можем улучшить систему? Легко!
39. Вопросы?
40. The original, largest and leading dating network
41. Спасибо!