Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
2
bem-components: от методологии
до full stack платформы
Владимир Гриненко, Елена Джетпыспаева
3 октября, РИФ-Воронеж 2014
3
О нас
— Владимир Гриненко
— руковожу службой разработки БЭМ
— i@tadatuta.com
— @tadatuta
— github.com/tadatuta
4
О нас
— Мурся
— 3 года в Яндексе
— Я.Субботники, YaC, группа собственных мероприятий…
— маркетинг технологий, коммуникации...
Содержание
— История БЭМ: от методологии до платформы
— bem-components — готовая библиотека для ваших проектов
— Сообществ...
БЭМ — о чем это вообще
— БЭМ — это разделение интерфейсы на блоки
— ООП в полный рост
— Единая предметная область
7
БЭМ позволяет
— инкапсулировать реализацию блока
8
Нейминг
Блок__Элемент_Модификатор
9
БЭМ позволяет
— инкапсулировать реализацию блока
— наследовать блоки друг от друга
10
БЭМ позволяет
— инкапсулировать реализацию блока
— наследовать блоки друг от друга
— полиморфизм в терминах модификаторов
...
3 источника, 3 составные части
— Методология
— Инструменты
— Библиотеки готовых блоков
14
Преимущества
— Уменьшение сложности кода
— Упрощение коммуникации
— Реиспользование кода
— Ускорение разработки
15
Как меняется процесс разработки
16
Отличия БЭМ
— Абстракция над DOM — мыслим в терминах блоков
17
BEMJSON
{
block: 'button',
mods: { theme: 'promo' },
content: 'Разместить рекламу'
}
18
Отличия БЭМ
— Абстракция над DOM — мыслим в терминах блоков
— Разделение на блоки отражено и на файловой системе
19
Файловая система
prj/
blocks/
header/
header.css
header.js
header.tmpl
header.svg
header.md 20
Файловая система
prj/
blocks/
header/
_theme/
header_theme_simple.css
header_theme_full.css
__logo/
header__logo.css 21
Отличия БЭМ
— Абстракция над DOM — мыслим в терминах блоков
— Разделение на блоки отражено и на файловой системе
— Деклара...
BEMHTML
block button {
tag: 'input'
attrs: { type: 'button'}
}
23
История БЭМ
24
История
— в Яндексе
— под названием АНБ
— Виталя Харисов и Серега veged Бережной
— bem-bl и bem-tools
— bem-core и bem-com...
bem-components
26
bem-components — готовая библиотека
для ваших проектов
— Компонентный веб — будущее уже наступило!
— 20 блоков и это не пр...
bem-components / состав
— link
— button
— input
— attach
— checkbox-group
— radio-group
— menu
— popup
— dropdown
— icon
—...
bem-components / в тренде
— компонентный подход
— CSS-препроцессор
— автопрефиксер
30
bem-components / обгоняя тренды
— в браузерах еще вчера
— уровни переопределения
— сборка
— декларативность
— дизайн опцио...
bem-components / тестирование
— ручное
— unit-тесты для JS
— тесты на шаблоны
— тесты на верстку (gemini)
— проверка кодст...
Как быстро начать разрабатывать на БЭМ
33
Quick start
— bem.info
— git clone https://github.com/bem/project-stub.git
— npm i
— ./node_modules/.bin/bem server
34
Сообщество БЭМ
36
«Когда я спросил Харисова на Я.Субботнике в
2009 (я тогда в Яндексе не работал), почему они
бесплатно рассказывают и выкла...
Ведь приходилось делать
— БЭМ — методологию и технологии
— Лего — общепортальную мета-библиотеку блоков Яндекса
— разбират...
Не только методология, но и
— библиотеки
— инструменты
— JS-фреймворк
— шаблонизатор
— движок для сбора документации и при...
БЭМ — первый технологический продукт
Яндекса
45
Кто мы
— Служба разработки БЭМ
— Лего и разработчики сервисов Яндекса
— Разработчики, использующие БЭМ
46
Что мы делаем
— Служба разработки БЭМ — продукт
— Команда Лего — мета-библиотеку Яндекса на этом продукте
— Разработчики с...
Пользователям и контрибьюторам
53
Арсенал
— Продукт — библиотека bem-components: 20 блоков, тесты,
документация, демо (coming), пыщ-пыщ!
— Служба разработки...
Арсенал
— Продукт — библиотека bem-components: 20 блоков, тесты,
документация, демо (coming), пыщ-пыщ!
— Служба разработки...
Пользователям и контрибьюторам
— Помогаем консультациями
— Реагируем на фидбек
— Отвечаем на фичреквесты
— Продвигаем вмес...
БЭМ
Блок__Элемент_Модификатор
ru.bem.info
ru.bem.info/forum
info@bem.info
@bem_ru #b_ Спасибо!
66
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
bem-components — from a methodology to a full stack platform
Nächste SlideShare
Wird geladen in …5
×

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/

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

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

  1. 1. 2
  2. 2. bem-components: от методологии до full stack платформы Владимир Гриненко, Елена Джетпыспаева 3 октября, РИФ-Воронеж 2014 3
  3. 3. О нас — Владимир Гриненко — руковожу службой разработки БЭМ — i@tadatuta.com — @tadatuta — github.com/tadatuta 4
  4. 4. О нас — Мурся — 3 года в Яндексе — Я.Субботники, YaC, группа собственных мероприятий… — маркетинг технологий, коммуникации, Developer Relations & BEM — mursya@yandex-team.ru — @mursya_ru 5
  5. 5. Содержание — История БЭМ: от методологии до платформы — bem-components — готовая библиотека для ваших проектов — Сообщество БЭМ — Пользователям и контрибьюторам 6
  6. 6. БЭМ — о чем это вообще — БЭМ — это разделение интерфейсы на блоки — ООП в полный рост — Единая предметная область 7
  7. 7. БЭМ позволяет — инкапсулировать реализацию блока 8
  8. 8. Нейминг Блок__Элемент_Модификатор 9
  9. 9. БЭМ позволяет — инкапсулировать реализацию блока — наследовать блоки друг от друга 10
  10. 10. БЭМ позволяет — инкапсулировать реализацию блока — наследовать блоки друг от друга — полиморфизм в терминах модификаторов 11
  11. 11. 3 источника, 3 составные части — Методология — Инструменты — Библиотеки готовых блоков 14
  12. 12. Преимущества — Уменьшение сложности кода — Упрощение коммуникации — Реиспользование кода — Ускорение разработки 15
  13. 13. Как меняется процесс разработки 16
  14. 14. Отличия БЭМ — Абстракция над DOM — мыслим в терминах блоков 17
  15. 15. BEMJSON { block: 'button', mods: { theme: 'promo' }, content: 'Разместить рекламу' } 18
  16. 16. Отличия БЭМ — Абстракция над DOM — мыслим в терминах блоков — Разделение на блоки отражено и на файловой системе 19
  17. 17. Файловая система prj/ blocks/ header/ header.css header.js header.tmpl header.svg header.md 20
  18. 18. Файловая система prj/ blocks/ header/ _theme/ header_theme_simple.css header_theme_full.css __logo/ header__logo.css 21
  19. 19. Отличия БЭМ — Абстракция над DOM — мыслим в терминах блоков — Разделение на блоки отражено и на файловой системе — Декларативность во всем 22
  20. 20. BEMHTML block button { tag: 'input' attrs: { type: 'button'} } 23
  21. 21. История БЭМ 24
  22. 22. История — в Яндексе — под названием АНБ — Виталя Харисов и Серега veged Бережной — bem-bl и bem-tools — bem-core и bem-components — c 2006 и по сей день 25
  23. 23. bem-components 26
  24. 24. bem-components — готовая библиотека для ваших проектов — Компонентный веб — будущее уже наступило! — 20 блоков и это не предел — Тестируем все и вся — OpenSourced, scaled, delivered — it's yours! 27
  25. 25. bem-components / состав — link — button — input — attach — checkbox-group — radio-group — menu — popup — dropdown — icon — image — spin — select — в активной разработке modal 28
  26. 26. bem-components / в тренде — компонентный подход — CSS-препроцессор — автопрефиксер 30
  27. 27. bem-components / обгоняя тренды — в браузерах еще вчера — уровни переопределения — сборка — декларативность — дизайн опционально 31
  28. 28. bem-components / тестирование — ручное — unit-тесты для JS — тесты на шаблоны — тесты на верстку (gemini) — проверка кодстайла — CI 32
  29. 29. Как быстро начать разрабатывать на БЭМ 33
  30. 30. Quick start — bem.info — git clone https://github.com/bem/project-stub.git — npm i — ./node_modules/.bin/bem server 34
  31. 31. Сообщество БЭМ 36
  32. 32. «Когда я спросил Харисова на Я.Субботнике в 2009 (я тогда в Яндексе не работал), почему они бесплатно рассказывают и выкладывают наработки, он ответил: „Когда делаешь что-то долго и хорошо, со временем появляется желание поделиться“», — из разговора с одним
неизвестным БЭМ-разработчиком “ 38
  33. 33. Ведь приходилось делать — БЭМ — методологию и технологии — Лего — общепортальную мета-библиотеку блоков Яндекса — разбираться с багами сервисов (Поиска, Картинок, Видео и т.д.) — отвечать на запросы — эвангелизировать — иногда чуть-чуть жить 41
  34. 34. Не только методология, но и — библиотеки — инструменты — JS-фреймворк — шаблонизатор — движок для сбора документации и примеров — тесты для блоков — много чего еще 42
  35. 35. БЭМ — первый технологический продукт Яндекса 45
  36. 36. Кто мы — Служба разработки БЭМ — Лего и разработчики сервисов Яндекса — Разработчики, использующие БЭМ 46
  37. 37. Что мы делаем — Служба разработки БЭМ — продукт — Команда Лего — мета-библиотеку Яндекса на этом продукте — Разработчики сервисов — сервисы на Лего или БЭМ и часто свои БЭМ-проекты — Разработчики, использующие БЭМ — проекты на БЭМ, свои БЭМ- инструменты, библиотеки и даже целые новые методологии :) 47
  38. 38. Пользователям и контрибьюторам 53
  39. 39. Арсенал — Продукт — библиотека bem-components: 20 блоков, тесты, документация, демо (coming), пыщ-пыщ! — Служба разработки продукта — разработчики, тестировщики, документаторы — Проекты и пользователи разного уровня сложности, размера, тп — Онлайн-площадка — bem.info 54
  40. 40. Арсенал — Продукт — библиотека bem-components: 20 блоков, тесты, документация, демо (coming), пыщ-пыщ! — Служба разработки продукта — разработчики, тестировщики, документаторы — Проекты и пользователи разного уровня сложности, размера, тп — Онлайн-площадка — bem.info — Оффлайн-площадка: BEMup-ы, хакатоны, конференции и семинары — Мурся, маркетинг, коммьюнити 62
  41. 41. Пользователям и контрибьюторам — Помогаем консультациями — Реагируем на фидбек — Отвечаем на фичреквесты — Продвигаем вместе 64
  42. 42. БЭМ Блок__Элемент_Модификатор ru.bem.info ru.bem.info/forum info@bem.info @bem_ru #b_ Спасибо! 66

×