Сергей Бережной — bem-core v1.0.0
DESCRIPTION
В конце октября мы анонсировали первый релиз библиотеки bem-core v1.0.0, о которой вы уже не раз слышали на BEMup'ах, а кое-кто даже успел ей воспользоваться. Это базовая библиотека блоков для разработки веб-интерфейсов, в которой собран только необходимый минимум для разработки клиентского JS и HTML-шаблонов. С этим релизом мы перешли на модульную систему, удалили из i-bem и i-bem__dom все deprecated-методы, добавили технологии BEMTREE, vanilla.js, browser.js, Node.js. Ядро i-bem стало независимым от jQuery, а BEMHTML-шаблоны теперь можно писать с использованием JS-синтаксиса.TRANSCRIPT
![Page 1: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/1.jpg)
![Page 3: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/3.jpg)
![Page 4: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/4.jpg)
bem-bl
![Page 5: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/5.jpg)
bem-bl
• блоки-хелперы • визуальные блоки
:5
![Page 6: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/6.jpg)
![Page 7: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/7.jpg)
bem-core
![Page 8: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/8.jpg)
Уровни переопределения
bem-core
![Page 9: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/9.jpg)
bem-core: Уровни переопределения
• common.blocksпредназначен для любых устройств и браузеров
• desktop.blocks следует использовать для всех десктопных браузеров
• touch.blocks реализует некоторую специфику для тач-платформ
:9
![Page 10: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/10.jpg)
Блоки
bem-core
![Page 11: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/11.jpg)
![Page 12: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/12.jpg)
bem-core: Блоки
• i-bem — базовый блок с хелперами для JS и HTML
:12
![Page 13: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/13.jpg)
bem-core: Блоки
• ecma — некоторые ES5-полифилы • strings — хелперы для JS-строк • objects — хелперы для JS-объектов • functions — хелперы для JS-функций • events — JS-события
:13
![Page 14: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/14.jpg)
bem-core: Блоки
• inherit — ООП-хелперы
:14
![Page 15: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/15.jpg)
bem-core: Блоки
• jquery — jQuery
:15
![Page 16: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/16.jpg)
bem-core: Блоки
• tick — глобальный таймер • idle — IDLE-событие • next-tick — полифил: nextTick/setTimeout(0,/setImmediate
:16
![Page 17: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/17.jpg)
bem-core: Блоки
• identify — идентификация JS-объектов • clearfix — CSS-трюк clearfix • querystring — работа со строкой запроса • loader — загрузчик для JS-файлов • cookie — хелперы для работы с браузерными куками • vow — реализация Promises/A+
:17
![Page 18: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/18.jpg)
bem-core: Блоки
• dom — хелперы для работы с DOM • pointer-events — кроссплатформенные события • ua — определение возможностей браузера • page — скелет для html/head/body
:18
![Page 19: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/19.jpg)
Изменения
bem-core
![Page 20: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/20.jpg)
bem-core: Изменения
• Переход на модульную систему github.com/ymaps/modules
:20
![Page 21: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/21.jpg)
Модульная система
• Асинхронный require модулей • Асинхронный provide модулей • Возможность передекларации/додекларации модуля
:21
![Page 22: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/22.jpg)
Модульная система
• Асинхронный require модулей • Асинхронный provide модулей • Возможность передекларации/додекларации модуля
:22
![Page 23: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/23.jpg)
![Page 24: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/24.jpg)
modules.define( 'flare', ['candle', 'cord'], function(provide, CANDLE, CORD) { var flare = new CORD( new CANDLE(), new CANDLE(), new CANDLE() ); provide(flare); });
Модульная система
:24
![Page 25: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/25.jpg)
modules.define('cord', function(provide) { provide({/* … */}); });
Модульная система
:25
![Page 26: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/26.jpg)
modules.define( 'candle', ['cord'], function(provide, CORD) { provide({/* …CORD… */}); });
Модульная система
:26
![Page 27: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/27.jpg)
modules.define( 'flare', ['zippo'], function(provide, ZIPPO, prevFLARE) { var newFLARE = /* …ZIPPO…prevFLARE… */; provide(newFLARE); });
Модульная система
:27
![Page 28: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/28.jpg)
modules.require(['flare'], function(FLARE) { var f = new FLARE(); /* … */ });
Модульная система
:28
![Page 29: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/29.jpg)
bem-core: Изменения
• Из i-bem, i-bem__dom убраны все deprecated-методы • i-bem больше не зависит от jQuery
(i-bem__dom продолжает зависеть от jQuery)
:29
![Page 30: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/30.jpg)
bem-core: Изменения
• BEMHTML-шаблоны можно писать с использованием JS-синтаксиса
:30
![Page 31: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/31.jpg)
BEMHTML-синтаксис
• нет поддержки в редакторах • не все пользуется преимуществами • требует компиляции • затруднена отладка
:31
![Page 32: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/32.jpg)
![Page 33: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/33.jpg)
bem-core: Изменения
• BEMHTML-шаблоны можно писать с использованием JS-синтаксиса
– поддержка в редакторах
– (почти) без компиляции (в дев режиме)
:33
![Page 34: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/34.jpg)
bem-core: Изменения
• BEMHTML-шаблоны можно писать с использованием JS-синтаксиса
– gist.github.com/veged/6150760
:34
![Page 35: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/35.jpg)
bem-core: Изменения
• bemtree (на базе bem-xjst): для описания процесса динамического построения БЭМ-дерева
:35
![Page 36: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/36.jpg)
bem-core: Изменения
• bemtree (на базе bem-xjst): для описания процесса динамического построения БЭМ-дерева
– bit.ly/bemtree-post
– bit.ly/bemtree-code
– bit.ly/bemtree-talk
:36
![Page 37: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/37.jpg)
![Page 38: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/38.jpg)
bem-core: Изменения
• vanilla.js: JS-реализация модулей, не зависящая от конкретного JS-движка
• browser.js и node.js: JS-реализация блоков в соответствующих движках
:38
![Page 39: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/39.jpg)
bem-core: Изменения
• Система модульного тестирования и примеров для блоков
:39
![Page 40: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/40.jpg)
bem-core: Изменения
• i-bem и BEMHTML: простые модификаторы (модификаторы без значений)
:40
![Page 41: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/41.jpg)
![Page 42: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/42.jpg)
Простые модификаторы
• файлы: bemer_happy_yes.css → bemer_happy.css
• CSS: .bemer_happy_yes { … } → .bemer_happy { … }
• i-bem.js: this.setMod('happy')
• BEMJSON: { block: 'bemer', mods: { happy: true } }
:42
![Page 43: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/43.jpg)
bem-core: Изменения
• Все блоки-модули избавились от префиксов
:43
![Page 44: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/44.jpg)
i-bem
![Page 45: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/45.jpg)
bem-core: Изменения
• Все блоки-модули, кроме i-bem, избавились от префиксов
:45
![Page 46: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/46.jpg)
github.com/bem/bem-core/blob/v1/CHANGELOG.md
bem-core: Изменения
:46
![Page 47: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/47.jpg)
github.com/bem/bem-core/blob/v1/CHANGELOG.md github.com/bem/bem-core/blob/v1/MIGRATION.md
bem-core: Изменения
:47
![Page 48: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/48.jpg)
Версионирование
bem-core
![Page 49: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/49.jpg)
bem-core: Версионирование
• x.y.Z — багфиксы
:49
![Page 50: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/50.jpg)
bem-core: Версионирование
• x.y.Z — багфиксы
:50
![Page 51: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/51.jpg)
bem-core: Версионирование
• x.y.Z — багфиксы • x.Y.z — совместимые изменения
:51
![Page 52: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/52.jpg)
bem-core: Версионирование
• x.y.Z — багфиксы • x.Y.z — совместимые изменения
:52
![Page 53: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/53.jpg)
bem-core: Версионирование
• x.y.Z — багфиксы • x.Y.z — совместимые изменения • X.y.z — не совместимые изменения
:53
![Page 54: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/54.jpg)
bem-core: Версионирование
• x.y.Z — багфиксы • x.Y.z — совместимые изменения • X.y.z — не совместимые изменения
:54
![Page 55: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/55.jpg)
Контрибьют
bem-core
![Page 56: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/56.jpg)
bem-core: Контрибьют
• Рабочая рабочая копия • Правила для заведения задач, веток и пулл-реквестов • Тесты и примеры
:56
![Page 57: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/57.jpg)
![Page 58: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/58.jpg)
Планы
bem-core
![Page 59: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/59.jpg)
РАЗГЛАСИТЬ ПЛАНЫ
![Page 60: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/60.jpg)
bem-core: Планы
• bem-components • инфраструктура
:60
![Page 61: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/61.jpg)
![Page 62: Сергей Бережной — bem-core v1.0.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/557fbbc9d8b42a40118b4c02/html5/thumbnails/62.jpg)
руководитель отдела разработки поисковых интерфейсов
Спасибо
Сергей Бережной
@veged
veged