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/

2. 2

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
{
block: 'button',
mods: { theme: 'promo' },
content: 'Разместить рекламу'
}
18

19. Отличия БЭМ
— Абстракция над DOM — мыслим в терминах блоков
— Разделение на блоки отражено и на файловой системе
19

20. Файловая система
prj/
blocks/
header/
header.css
header.js
header.tmpl
header.svg
header.md 20

21. Файловая система
prj/
blocks/
header/
_theme/
header_theme_simple.css
header_theme_full.css
__logo/
header__logo.css 21

22. Отличия БЭМ
— Абстракция над DOM — мыслим в терминах блоков
— Разделение на блоки отражено и на файловой системе
— Декларативность во всем
22

23. BEMHTML
block button {
tag: 'input'
attrs: { type: 'button'}
}
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