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