Download to read offline
![var el = $.satisfy('div.list');
data.forEach(i = > {
$.satisfy(
'div.item div.message[innerHTML=“' + i + ‘“"]'
).appendTo(el);
});
.list {
.item {
.userpic {}
&-message {}
}
}
JS “головного мозга”](https://image.slidesharecdn.com/methodologybemmodulesrelationships-161101103844/75/slide-12-2048.jpg)
Uploaded byBadoo Development
Методология: БЭМ, Модули, Отношения
Документ описывает методологию разработки с акцентом на использование BEM (Block Element Modifier) и модульного подхода для создания надежного и эффективного кода. Обсуждаются преимущества и недостатки различных подходов, а также необходимость специализации разработчиков и формирование единой методологии. Будущее разработки предполагает гибкость, код-шаринг и использование компонентов для упрощения процесса и улучшения качества кода.
More Related Content
Similar to Методология: БЭМ, Модули, Отношения
Методология: БЭМ, Модули, Отношения
- 1. Методология: БЭМ, Модули, Отношения КонстантинДзюин 13 октября 2016 года Москва, Badoo
- 2. Привет! Константин Дзюин Мобильный ВебРазработчик (html/css) Badoo, Лондон, Великобритания html/css разработчик - 14 лет Badoo - 3 года 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"> <divclass="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.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. <div class="contact-list"> <div class="contact-item"> <divclass="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.
- 24. • случайные коллизииимён • введение нового разработчика • многабукаф • BEM в Badoo – name convention, а не BEM Components БЭМ: минусы
- 25. CSS Модули и влияние наметодологию
- 26. • Изоляция CSS-кодамодуля • случайные конфликты имен • Безопасное переиспользование • Безопасная разработка нового • Синтаксический сахар CSS модули - плюсы
- 27.
- 28. <div class="contact-list"> <div class="contact-item"> <divclass="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 Модули
- 29. • Ноооо, хотимиз компонента А повлиять на Б • Цена перехода? CSS модули - минусы
- 30.
- 31. Компози́ция — составлениецелого из частей; организующий компонент художественной формы, придающий произведению единство и цельность, соподчиняющий его элементы друг другу и всему замыслу художника. — Wikipedia
- 32. • У всехпо пять, почему бы и нет? • У всех по пять, родитель сбросит • У всех по пять, но не у последнего • Между соседними по пять Отношения компонент
- 33. • Атом –Молекула – Организм • Кирпич – Стена – Дом • Компонент – Компонент – Компонент • Компонент – Композиция – Композиция композиций Как называть?
- 34.
- 35. • Компонент нейтраленвне системы • Отношения определяются в системе Отношения компонент
- 36.
- 37. Итого: 1. БЭМ? Модули?- что удобно 2. Компоненты: железные и резиновые 3. Композиция: отношения компонент
- 38. Прекрасное далёко Использования нейтральных элементов– путь к подвижной системе Среднее время жизни кода позволяет методологии быть подвижной и адаптироваться Как мы можем улучшить систему? Легко!
- 39.
- 40. The original, largestand leading dating network
- 41.