![Page 1: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/1.jpg)
Я.Субботник, Москва, 8 сентября 2012 года
Сергей Бережнойруководитель отделаразработки поисковых интерфейсов
Внедрение БЭМв существующие системы
![Page 2: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/2.jpg)
![Page 3: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/3.jpg)
иливнедрение БЭМ
в существующие системы
![Page 4: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/4.jpg)
Существующие системы
4
![Page 5: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/5.jpg)
Существующие системыКакой язык? И другие подробности
![Page 6: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/6.jpg)
6
Внедрение БЭМ
![Page 7: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/7.jpg)
Внедрение БЭМ
7
— использование bem-tools для сборки и разработки
![Page 8: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/8.jpg)
Внедрение БЭМ
8
— использование bem-tools для сборки и разработки
— клиентский JavaScript с помощью i-bem
![Page 9: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/9.jpg)
Внедрение БЭМ
9
— использование bem-tools для сборки и разработки
— клиентский JavaScript с помощью i-bem
— BEMHTML-шаблоны
![Page 10: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/10.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
10
![Page 11: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/11.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
11
— Зачем?
![Page 12: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/12.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
12
— Зачем?
— поддержание файловой структуры
![Page 13: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/13.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
13
— Зачем?
— поддержание файловой структуры
— шаблоны для новых файлов
![Page 14: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/14.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
14
— Зачем?
— поддержание файловой структуры
— шаблоны для новых файлов
— сборка
![Page 15: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/15.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
15
— Зачем?
— поддержание файловой структуры
— шаблоны для новых файлов
— сборка
— сервер
![Page 16: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/16.jpg)
![Page 17: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/17.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
17
— файловая структура
![Page 18: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/18.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
18
— файловая структура
— .bem/level.js
![Page 19: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/19.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
19
— файловая структура
— .bem/level.js
— bem-tools/lib/levels/simple.js
![Page 20: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/20.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
20
— файловая структура
— всё "старое" — один блок
![Page 21: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/21.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
21
— файловая структура
— всё "старое" — один блок
— i-old
![Page 22: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/22.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
22
— файловая структура
— всё "старое" — один блок
— i-old
— ./styles.css ⇒ i-old/i-old.css
![Page 23: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/23.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
23
— файловая структура
— всё "старое" — один блок
— i-old
— ./styles.css ⇒ i-old/i-old.css
— ./scripts.js ⇒ i-old/i-old.js
![Page 24: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/24.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
24
— файловая структура
— всё "старое" — один блок
— можно сохранить разделение технологий по разным папкам
![Page 25: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/25.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
25
— файловая структура
— всё "старое" — один блок
— можно сохранить разделение технологий по разным папкам
— ./blocks-css/
— ./blocks-js/
— ./blocks-img/
![Page 26: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/26.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
26
— файловая структура
— всё "старое" — один блок
— можно сохранить разделение технологий по разным папкам
— ./css/
— ./js/
— ./img/
![Page 27: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/27.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
27
— файловая структура
— всё "старое" — один блок
— можно сохранить разделение технологий по разным папкам
— bem create level css js img --force
![Page 28: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/28.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
28
— файловая структура
— всё "старое" — один блок
— можно сохранить разделение технологий по разным папкам
— сборка
![Page 29: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/29.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
29
— файловая структура
— всё "старое" — один блок
— можно сохранить разделение технологий по разным папкам
— сборка
— свои технологии
![Page 30: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/30.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
30
— файловая структура
— всё "старое" — один блок
— можно сохранить разделение технологий по разным папкам
— сборка
— свои технологии
— совсем произвольные команды
![Page 31: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/31.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
31
— файловая структура
— всё "старое" — один блок
— можно сохранить разделение технологий по разным папкам
— сборка
— bem-tools/README.ru.md
![Page 32: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/32.jpg)
bem-tools для сборки и разработкиВнедрение БЭМ
32
— файловая структура
— всё "старое" — один блок
— можно сохранить разделение технологий по разным папкам
— сборка
— bem-tools/README.ru.md
— bem-tools/issues/213
![Page 33: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/33.jpg)
клиентский JS с помощью i-bemВнедрение БЭМ
33
![Page 34: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/34.jpg)
клиентский JS с помощью i-bemВнедрение БЭМ
34
— Зачем?
![Page 35: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/35.jpg)
клиентский JS с помощью i-bemВнедрение БЭМ
35
— Зачем?
— удобный способ писать клиентский JavaScript
![Page 36: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/36.jpg)
клиентский JS с помощью i-bemВнедрение БЭМ
36
— Зачем?
— удобный способ писать клиентский JavaScript
– даже безотносительно БЭМ:events.yandex.ru/talks/272/
![Page 37: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/37.jpg)
клиентский JS с помощью i-bemВнедрение БЭМ
37
— не i-bem.js скриптыможно подключать вместе с i-bem.js
![Page 38: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/38.jpg)
![Page 39: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/39.jpg)
клиентский JS с помощью i-bemВнедрение БЭМ
39
— не i-bem.js скриптыможно подключать вместе с i-bem.js
— jQuery-плагины ⇒ i-bem.js блоки
![Page 40: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/40.jpg)
— jQuery-плагины ⇒ i-bem.js блоки
клиентский JS с помощью i-bem
$.fn.myPlugin = function() { // code};
$('.myPlugin').myPlugin();
Внедрение БЭМ
40
![Page 41: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/41.jpg)
— jQuery-плагины ⇒ i-bem.js блоки
клиентский JS с помощью i-bem
$.fn.myPlugin = function() { // code};
$('.myPlugin').myPlugin();
Внедрение БЭМ
41
![Page 42: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/42.jpg)
— jQuery-плагины ⇒ i-bem.js блоки
клиентский JS с помощью i-bem
BEM.DOM.decl('myPlugin', { onSetMod: { js: function() { (function() { // code }).call(this.domElem) } }})
Внедрение БЭМ
42
![Page 43: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/43.jpg)
— jQuery-плагины ⇒ i-bem.js блоки
клиентский JS с помощью i-bem
BEM.DOM.decl('myPlugin', { onSetMod: { js: function() { (function() { // code }).call(this.domElem) } }})
Внедрение БЭМ
43
![Page 44: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/44.jpg)
— jQuery-плагины ⇒ i-bem.js блоки
клиентский JS с помощью i-bem
BEM.DOM.decl('myPlugin', { onSetMod: { js: function() { (function() { // code }).call(this.domElem) } }})
Внедрение БЭМ
44
![Page 45: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/45.jpg)
— jQuery-плагины ⇒ i-bem.js блоки
клиентский JS с помощью i-bem
<div class="myPlugin i-bem" onclick="return { myPlugin: {} }">
Внедрение БЭМ
45
![Page 46: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/46.jpg)
— jQuery-плагины ⇒ i-bem.js блоки
клиентский JS с помощью i-bem
<div class="myPlugin i-bem" onclick="return { myPlugin: {} }">
Внедрение БЭМ
46
![Page 47: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/47.jpg)
— jQuery-плагины ⇒ i-bem.js блоки
клиентский JS с помощью i-bem
<div class="myPlugin i-bem" onclick="return { myPlugin: {} }">
Внедрение БЭМ
47
![Page 48: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/48.jpg)
клиентский JS с помощью i-bemВнедрение БЭМ
48
— не i-bem.js скриптыможно подключать вместе с i-bem.js
— jQuery-плагины ⇒ i-bem.js блоки
— зависимость от jQuery
![Page 49: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/49.jpg)
BEMHTML-шаблоныВнедрение БЭМ
49
![Page 50: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/50.jpg)
BEMHTML-шаблоныВнедрение БЭМ
50
— Зачем?
![Page 51: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/51.jpg)
BEMHTML-шаблоныВнедрение БЭМ
51
— Зачем?
— разделение HTML и логики представления
![Page 52: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/52.jpg)
BEMHTML-шаблоныВнедрение БЭМ
52
— Зачем?
— разделение HTML и логики представления
— гибкая библиотека блоков
![Page 53: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/53.jpg)
BEMHTML-шаблоныВнедрение БЭМ
53
— Зачем?
— разделение HTML и логики представления
— гибкая библиотека блоков
— БЭМ
![Page 54: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/54.jpg)
![Page 55: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/55.jpg)
BEMHTML-шаблоныВнедрение БЭМ
55
— js-биндинги
![Page 56: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/56.jpg)
BEMHTML-шаблоныВнедрение БЭМ
56
— js-биндинги
— pyv8
— therubyracer
— perl-v8
— javascriptdotnet
— php-v8
![Page 57: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/57.jpg)
BEMHTML-шаблоныВнедрение БЭМ
57
— js-биндинги
— разделение HTML и логики представления
![Page 58: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/58.jpg)
BEMHTML-шаблоныВнедрение БЭМ
58
— js-биндинги
— разделение HTML и логики представления
— data ⇒ html
![Page 59: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/59.jpg)
BEMHTML-шаблоныВнедрение БЭМ
59
— js-биндинги
— разделение HTML и логики представления
— data ⇒ view ⇒ html
![Page 60: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/60.jpg)
BEMHTML-шаблоныВнедрение БЭМ
60
— js-биндинги
— разделение HTML и логики представления
— data ⤙old↣ BEMJSON ⤙BEMHTML↣ HTML
![Page 61: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/61.jpg)
BEMHTML-шаблоныВнедрение БЭМ
61
— js-биндинги
— разделение HTML и логики представления
— data ⤙old↣ BEMJSON ⤙BEMHTML↣ HTML
— data ⤙JS↣ BEMJSON ⤙BEMHTML↣ HTML
![Page 62: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/62.jpg)
BEMHTML-шаблоныВнедрение БЭМ
62
— js-биндинги
— разделение HTML и логики представления
— постраничная и поблочная миграция
![Page 63: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/63.jpg)
Внедрение БЭМ
63
— использование bem-tools для сборки и разработки
— клиентский JavaScript с помощью i-bem
— BEMHTML-шаблоны
![Page 64: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/64.jpg)
![Page 65: Сергей Бережной "Внедрение БЭМ в существующие системы"](https://reader033.vdocuments.site/reader033/viewer/2022052507/557f37e3d8b42ad4798b5023/html5/thumbnails/65.jpg)
Сергей Бережнойруководитель отделаразработки поисковых интерфейсов[email protected]
@vegedgithub.com/veged