bem-components — from a methodology to a full stack platform

Talk (in Russian) for RIF-Voronezh 2014, October 3d, 2014

Abstract

More than 10 years Yandex launches various Internet services such as Maps, Mail, Disk, Music, Auto. During this long period of time we have got a lot of experience that could be useful for other web developers. Many real life cases motivated us to create BEM methodology. After 5 years of internal iuse we open sourced it together with tools and block libraries. Today BEM is not only about CSS and a set of tools. It is an open full stack platform that has users far abroad of Yandex and CIS countries.

In this talk we tell a story about BEM evolution from methodology to platform. We will talk about full stack BEM, server JavaScript and automatisation of development. We share our block libraries bem-core and bem-components that allow to create high quality frontend fast like building Lego.

Video (Russian) https://ru.bem.info/talks/rif-voronezh-2014/

Transcript

3. bem-components: от методологии до full stack платформы Владимир Гриненко, Елена Джетпыспаева 3 октября, РИФ-Воронеж 2014 3
4. О нас — Владимир Гриненко — руковожу службой разработки БЭМ — i@tadatuta.com — @tadatuta — github.com/tadatuta 4
5. О нас — Мурся — 3 года в Яндексе — Я.Субботники, YaC, группа собственных мероприятий… — маркетинг технологий, коммуникации, Developer Relations & BEM — mursya@yandex-team.ru — @mursya_ru 5
6. Содержание — История БЭМ: от методологии до платформы — bem-components — готовая библиотека для ваших проектов — Сообщество БЭМ — Пользователям и контрибьюторам 6
7. БЭМ — о чем это вообще — БЭМ — это разделение интерфейсы на блоки — ООП в полный рост — Единая предметная область 7
8. БЭМ позволяет — инкапсулировать реализацию блока 8
9. Нейминг Блок__Элемент_Модификатор 9
10. БЭМ позволяет — инкапсулировать реализацию блока — наследовать блоки друг от друга 10
11. БЭМ позволяет — инкапсулировать реализацию блока — наследовать блоки друг от друга — полиморфизм в терминах модификаторов 11
14. 3 источника, 3 составные части — Методология — Инструменты — Библиотеки готовых блоков 14
15. Преимущества — Уменьшение сложности кода — Упрощение коммуникации — Реиспользование кода — Ускорение разработки 15
16. Как меняется процесс разработки 16
17. Отличия БЭМ — Абстракция над DOM — мыслим в терминах блоков 17
18. BEMJSON { b l o c k : ' b u t t o n ' , m o d s : { t h e m e : ' p r o m o ' } , c o n t e n t : ' Р а з м е с т и т ь р е к л а м у ' } 18
19. Отличия БЭМ — Абстракция над DOM — мыслим в терминах блоков — Разделение на блоки отражено и на файловой системе 19
20. Файловая система p r j / b l o c k s / h e a d e r / h e a d e r . c s s h e a d e r . j s h e a d e r . t m p l h e a d e r . s v g h e a d e r . m d 20
21. Файловая система p r j / b l o c k s / h e a d e r / _ t h e m e / h e a d e r _ t h e m e _ s i m p l e . c s s h e a d e r _ t h e m e _ f u l l . c s s _ _ l o g o / h e a d e r _ _ l o g o . c s s 21
22. Отличия БЭМ — Абстракция над DOM — мыслим в терминах блоков — Разделение на блоки отражено и на файловой системе — Декларативность во всем 22
23. BEMHTML b l o c k b u t t o n { t a g : ' i n p u t ' a t t r s : { t y p e : ' b u t t o n ' } } 23
24. История БЭМ 24
25. История — в Яндексе — под названием АНБ — Виталя Харисов и Серега veged Бережной — bem-bl и bem-tools — bem-core и bem-components — c 2006 и по сей день 25
26. bem-components 26
27. bem-components — готовая библиотека для ваших проектов — Компонентный веб — будущее уже наступило! — 20 блоков и это не предел — Тестируем все и вся — OpenSourced, scaled, delivered — it's yours! 27
28. bem-components / состав — link — button — input — attach — checkbox-group — radio-group — menu — popup — dropdown — icon — image — spin — select — в активной разработке modal 28
30. bem-components / в тренде — компонентный подход — CSS-препроцессор — автопрефиксер 30
31. bem-components / обгоняя тренды — в браузерах еще вчера — уровни переопределения — сборка — декларативность — дизайн опционально 31
32. bem-components / тестирование — ручное — unit-тесты для JS — тесты на шаблоны — тесты на верстку (gemini) — проверка кодстайла — CI 32
33. Как быстро начать разрабатывать на БЭМ 33
34. Quick start — bem.info — git clone https://github.com/bem/project-stub.git — npm i — ./node_modules/.bin/bem server 34
36. Сообщество БЭМ 36
38. «Когда я спросил Харисова на Я.Субботнике в 2009 (я тогда в Яндексе не работал), почему они бесплатно рассказывают и выкладывают наработки, он ответил: „Когда делаешь что-то долго и хорошо, со временем появляется желание поделиться“», — из разговора с одним
 неизвестным БЭМ-разработчиком “ 38
41. Ведь приходилось делать — БЭМ — методологию и технологии — Лего — общепортальную мета-библиотеку блоков Яндекса — разбираться с багами сервисов (Поиска, Картинок, Видео и т.д.) — отвечать на запросы — эвангелизировать — иногда чуть-чуть жить 41
42. Не только методология, но и — библиотеки — инструменты — JS-фреймворк — шаблонизатор — движок для сбора документации и примеров — тесты для блоков — много чего еще 42
45. БЭМ — первый технологический продукт Яндекса 45
46. Кто мы — Служба разработки БЭМ — Лего и разработчики сервисов Яндекса — Разработчики, использующие БЭМ 46
47. Что мы делаем — Служба разработки БЭМ — продукт — Команда Лего — мета-библиотеку Яндекса на этом продукте — Разработчики сервисов — сервисы на Лего или БЭМ и часто свои БЭМ-проекты — Разработчики, использующие БЭМ — проекты на БЭМ, свои БЭМ- инструменты, библиотеки и даже целые новые методологии :) 47
53. Пользователям и контрибьюторам 53
54. Арсенал — Продукт — библиотека bem-components: 20 блоков, тесты, документация, демо (coming), пыщ-пыщ! — Служба разработки продукта — разработчики, тестировщики, документаторы — Проекты и пользователи разного уровня сложности, размера, тп — Онлайн-площадка — bem.info 54
62. Арсенал — Продукт — библиотека bem-components: 20 блоков, тесты, документация, демо (coming), пыщ-пыщ! — Служба разработки продукта — разработчики, тестировщики, документаторы — Проекты и пользователи разного уровня сложности, размера, тп — Онлайн-площадка — bem.info — Оффлайн-площадка: BEMup-ы, хакатоны, конференции и семинары — Мурся, маркетинг, коммьюнити 62
64. Пользователям и контрибьюторам — Помогаем консультациями — Реагируем на фидбек — Отвечаем на фичреквесты — Продвигаем вместе 64
66. БЭМ Блок__Элемент_Модификатор ru.bem.info ru.bem.info/forum info@bem.info @bem_ru #b_ Спасибо! 66