Владимир Варанкин "БЭМ и javascript: Зачем мы написали...
TRANSCRIPT
![Page 1: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/1.jpg)
Я.Субботник, Москва, 8 сентября 2012 года
Разработчик интерфейсов Владимир Варанкин
БЭМ и JavaScript: Зачем мы написали js-‐фреймворк?
![Page 2: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/2.jpg)
Фреймворк (англ. framework, Каркас) — структура программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта
2
![Page 3: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/3.jpg)
фреймворк — каркас
3
![Page 4: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/4.jpg)
„ они заполонили планету “!
4
![Page 5: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/5.jpg)
Решаемые задачи
5
![Page 6: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/6.jpg)
Решаемые задачи
• Нормализация API браузера
6
![Page 7: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/7.jpg)
Решаемые задачи
• Нормализация API браузера
• Готовые наборы виджетов
7
![Page 8: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/8.jpg)
Решаемые задачи
• Нормализация API браузера
• Готовые наборы виджетов
• Rich UI интерфейсы
8
![Page 9: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/9.jpg)
Решаемые задачи
• Нормализация API браузера
• Готовые наборы виджетов
• Rich UI интерфейсы
• Библиотеки написания сложных веб-‐приложений
9
![Page 10: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/10.jpg)
должны помогать
10
![Page 11: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/11.jpg)
11
![Page 12: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/12.jpg)
12
![Page 13: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/13.jpg)
БЭМ!
13
![Page 14: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/14.jpg)
— блоки
— элементы
— модификаторы
БЭМ
14
![Page 15: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/15.jpg)
— блоки
— элементы
— модификаторы
— уровни переопределения
БЭМ
15
![Page 16: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/16.jpg)
Уровни переопределения
16
![Page 17: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/17.jpg)
i-‐bem.js
17
![Page 18: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/18.jpg)
i-‐bem.js
— блок, помогающий делать другие блоки
18
![Page 19: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/19.jpg)
i-‐bem.js
— блок, помогающий делать другие блоки
— реализация блока i-‐bem в технологии JavaScript
19
![Page 20: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/20.jpg)
i-‐bem.js
— блок, помогающий делать другие блоки
— реализация блока i-‐bem в технологии JavaScript
— jQuery для нормализации API браузера
20
![Page 21: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/21.jpg)
Реализация предметной области i-‐bem.js
JavaScript в БЭМ-‐терминах
Оперирует привычными понятиями :-‐)
21
![Page 22: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/22.jpg)
компонент стека разработки проекта в БЭМ-‐методологии
22
![Page 23: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/23.jpg)
hrp://github.com/bem/bem-‐bl
23
![Page 24: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/24.jpg)
It’s Code1me
24
![Page 25: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/25.jpg)
blocks-common/i-bem/i-bem.js!
25
![Page 26: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/26.jpg)
blocks-common/i-bem/i-bem.js!
26
![Page 27: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/27.jpg)
blocks-common/i-bem/i-bem.js!
27
![Page 28: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/28.jpg)
blocks-common/i-bem/i-bem.js!
28
![Page 29: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/29.jpg)
29
![Page 30: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/30.jpg)
HTML
30
![Page 31: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/31.jpg)
<div ! class="myblock i-bem" ! onclick="return { ! myblock: { params: {} }}"> !! <span class="myblock__item"></span> !</div> !!!
31
![Page 32: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/32.jpg)
<div ! class="myblock i-bem" ! onclick="return { ! myblock: { params: {} }}"> !! <span class="myblock__item"></span> !</div> !!!
32
![Page 33: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/33.jpg)
Декларация блока
33
![Page 34: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/34.jpg)
BEM.DOM.decl('myblock', { !! /* собственные свойства экземпляра */ !!}, {!! /* статические свойства */ !!}) !
34
![Page 35: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/35.jpg)
BEM.DOM.decl('myblock', { !! method : function() {!!
// экземпляр5 this! !
// ссылка на класс! this.__self! !
// статический метод класса! this.__self.staticMethod()!!
// super-call! this.__base()!!
} !!
}) !35
![Page 36: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/36.jpg)
BEM.DOM.decl('myblock', { !! method : function() {!!
// экземпляр5 this! !
// ссылка на класс! this.__self! !
// статический метод класса! this.__self.staticMethod()!!
// super-call! this.__base()!!
} !!
}) !36
![Page 37: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/37.jpg)
BEM.DOM.decl('myblock', { !! method : function() {!!
// экземпляр5 this! !
// ссылка на класс! this.__self! !
// статический метод класса! this.__self.staticMethod()!!
// super-call! this.__base()!!
} !!
}) !37
![Page 38: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/38.jpg)
BEM.DOM.decl('myblock', { /* ... */ }, { !! staticMethod : function() { !!
// класс ! this !!
// super-call! this.__base() !! }!!}) !
38
![Page 39: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/39.jpg)
Селекторы блоков
39
![Page 40: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/40.jpg)
// поиск внутри контекста5this.findBlockInside([elem], block)!!// поиск снаружи контекста5this.findBlockOutside([elem], block) !!// поиск на BEM-узле текущего блока5this.findBlockOn([elem], block)!!
40
![Page 41: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/41.jpg)
// поиск внутри контекста5this.findBlocksInside([elem], block)!!// поиск снаружи контекста5this.findBlocksOutside([elem], block) !!// поиск на BEM-узле текущего блока5this.findBlocksOn([elem], block)!!
41
![Page 42: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/42.jpg)
Элементы
42
![Page 43: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/43.jpg)
// кеширующий селектор5this.elem(name,! [modName], [modVal])!!// некеширующий5this.findElem([ctx], name, ! [modName], [modVal])!
43
![Page 44: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/44.jpg)
Модификаторы
44
![Page 45: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/45.jpg)
// значение модификатора блока5this.getMod(modName)!!// значение модификатора элемента5this.getMod(elem, modName) !!!
45
![Page 46: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/46.jpg)
// проверка модификатора5this.hasMod([elem], modName, modVal) !!// установка модификатора 5this.setMod([elem], modName, modVal) !!// удаление модификатора5this.delMod([elem], modName) !!// переключение значений модификатора5this.toggleMod([elem], modName, ! modVal1, modVal2, [condition])!
46
![Page 47: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/47.jpg)
Реакция на изменение модификатора
47
![Page 48: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/48.jpg)
onSetMod : { !! 'mod1' : { ! ! // установка модификатора mod1 в val15 'val1' : function(mod, val, oldVal) { !! } !! }, !! // установка модификатора `mod2` в любое значение5 'mod2' : function(mod, val, oldVal) {!! } !!} !! 48
![Page 49: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/49.jpg)
onElemSetMod : { !!
/* структура, аналогичная блоку */!! 'elem' : { !!
'mod1' : {!!
// дополнительный параметр `elem` 5 'val1' : function(elem, mod, val, oldVal) { !! } !! ... !!} !
49
![Page 50: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/50.jpg)
События
50
![Page 51: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/51.jpg)
// DOM-события5this ! .bindTo([elem], event, fn) ! .unbindFrom([elem], event) !!!// BEM-события5this ! .on(event, [data], fn, [ctx]) ! .un(event, [data], fn, [ctx]) ! .trigger(event, [data]) !!
51
![Page 52: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/52.jpg)
Инициализация блока
52
![Page 53: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/53.jpg)
53
<div ! class="myblock myblock_js_inited i-bem" ! onclick="return { ! myblock: { params: {} }}"> !! <span class="myblock__item"></span> !</div> !!!
![Page 54: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/54.jpg)
onSetMod : { !!
'js' : { ! !
'inited' : function() { !! /* «конструктор блока» */!! } !!
}!!
} !!
54
![Page 55: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/55.jpg)
Не рассказал про
• блоки без DOM-‐представления
• ленивая инициализация блока (live)
• работа со статическими свойствами
• каналы (Pub/Sub)
…и много еще чего интересного
55
![Page 56: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/56.jpg)
„JavaScript-‐реализация блока i-‐bem“ hrp://bem.github.com/bem-‐bl/sets/common-‐desktop/i-‐bem/i-‐bem.ru.html
56
![Page 57: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/57.jpg)
Разработчик интерфейсов
varankinv@yandex-‐team.ru
@tvii
github.com/narqo
Владимир Варанкин
![Page 58: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/58.jpg)
![Page 59: Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"](https://reader034.vdocuments.mx/reader034/viewer/2022052218/557f670fd8b42af1298b49be/html5/thumbnails/59.jpg)
За картинки спасибо:
1. hrp://dan7e87.deviantart.com/art/Iron-‐Man-‐Suit-‐Design-‐W-‐I-‐P-‐194579401
2. hrp://theheroicage.com/invincible-‐iron-‐man-‐armor-‐and-‐glory/
3. hrp://so�-‐h.deviantart.com/art/zombie-‐concept11-‐216439938
4. hrp://spagnolo.deviantart.com/art/Supers-‐Color-‐synthesis-‐2-‐189705274
5. hrp://�ger1313.deviantart.com/art/Push-‐258184965
6. hrp://www.mymodernmet.com/profiles/blogs/11-‐cleverly-‐designed-‐w�
7. hrp://prolificpen.deviantart.com/art/Speedpaint-‐Swords-‐317004863
8. hrp://agoners.wordpress.com/2008/12/04/the-‐curious-‐orange/
9. hrp://hmmgabby.deviantart.com/art/summer-‐2010-‐165667847