руководитель отдела разработки поисковых интерфейсов

bem-core@1.0.0

Сергей Бережной

bem-bl

bem-bl

• блоки-хелперы • визуальные блоки

:5

bem-core

Уровни переопределения

bem-core

bem-core: Уровни переопределения

• common.blocksпредназначен для любых устройств и браузеров

• desktop.blocks следует использовать для всех десктопных браузеров

• touch.blocks реализует некоторую специфику для тач-платформ

:9

Блоки

bem-core

bem-core: Блоки

• i-bem — базовый блок с хелперами для JS и HTML

:12

bem-core: Блоки

• ecma — некоторые ES5-полифилы • strings — хелперы для JS-строк • objects — хелперы для JS-объектов • functions — хелперы для JS-функций • events — JS-события

:13

bem-core: Блоки

• inherit — ООП-хелперы

:14

bem-core: Блоки

• jquery — jQuery

:15

bem-core: Блоки

• tick — глобальный таймер • idle — IDLE-событие • next-tick — полифил: nextTick/setTimeout(0,/setImmediate

:16

bem-core: Блоки

• identify — идентификация JS-объектов • clearfix — CSS-трюк clearfix • querystring — работа со строкой запроса • loader — загрузчик для JS-файлов • cookie — хелперы для работы с браузерными куками • vow — реализация Promises/A+

:17

bem-core: Блоки

• dom — хелперы для работы с DOM • pointer-events — кроссплатформенные события • ua — определение возможностей браузера • page — скелет для html/head/body

:18

Изменения

bem-core

bem-core: Изменения

• Переход на модульную систему github.com/ymaps/modules

:20

Модульная система

• Асинхронный require модулей • Асинхронный provide модулей • Возможность передекларации/додекларации модуля

:21

Модульная система

• Асинхронный require модулей • Асинхронный provide модулей • Возможность передекларации/додекларации модуля

:22

modules.define( 'flare', ['candle', 'cord'], function(provide, CANDLE, CORD) { var flare = new CORD( new CANDLE(), new CANDLE(), new CANDLE() ); provide(flare); });

Модульная система

:24

modules.define('cord', function(provide) { provide({/* … */}); });

Модульная система

:25

modules.define( 'candle', ['cord'], function(provide, CORD) { provide({/* …CORD… */}); });

Модульная система

:26

modules.define( 'flare', ['zippo'], function(provide, ZIPPO, prevFLARE) { var newFLARE = /* …ZIPPO…prevFLARE… */; provide(newFLARE); });

Модульная система

:27

modules.require(['flare'], function(FLARE) { var f = new FLARE(); /* … */ });

Модульная система

:28

bem-core: Изменения

• Из i-bem, i-bem__dom убраны все deprecated-методы • i-bem больше не зависит от jQuery

(i-bem__dom продолжает зависеть от jQuery)

:29

bem-core: Изменения

• BEMHTML-шаблоны можно писать с использованием JS-синтаксиса

:30

BEMHTML-синтаксис

• нет поддержки в редакторах • не все пользуется преимуществами • требует компиляции • затруднена отладка

:31

bem-core: Изменения

• BEMHTML-шаблоны можно писать с использованием JS-синтаксиса

– поддержка в редакторах

– (почти) без компиляции (в дев режиме)

:33

bem-core: Изменения

• BEMHTML-шаблоны можно писать с использованием JS-синтаксиса

– gist.github.com/veged/6150760

:34

bem-core: Изменения

• bemtree (на базе bem-xjst): для описания процесса динамического построения БЭМ-дерева

:35

bem-core: Изменения

• bemtree (на базе bem-xjst): для описания процесса динамического построения БЭМ-дерева

– bit.ly/bemtree-post

– bit.ly/bemtree-code

– bit.ly/bemtree-talk

:36

bem-core: Изменения

• vanilla.js: JS-реализация модулей, не зависящая от конкретного JS-движка

• browser.js и node.js: JS-реализация блоков в соответствующих движках

:38

bem-core: Изменения

• Система модульного тестирования и примеров для блоков

:39

bem-core: Изменения

• i-bem и BEMHTML: простые модификаторы (модификаторы без значений)

:40

Простые модификаторы

• файлы: 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

bem-core: Изменения

• Все блоки-модули избавились от префиксов

:43

i-bem

bem-core: Изменения

• Все блоки-модули, кроме i-bem, избавились от префиксов

:45

github.com/bem/bem-core/blob/v1/CHANGELOG.md

bem-core: Изменения

:46

github.com/bem/bem-core/blob/v1/CHANGELOG.md github.com/bem/bem-core/blob/v1/MIGRATION.md

bem-core: Изменения

:47

Версионирование

bem-core

bem-core: Версионирование

• x.y.Z — багфиксы

:49

bem-core: Версионирование

• x.y.Z — багфиксы

:50

bem-core: Версионирование

• x.y.Z — багфиксы • x.Y.z — совместимые изменения

:51

bem-core: Версионирование

• x.y.Z — багфиксы • x.Y.z — совместимые изменения

:52

bem-core: Версионирование

• x.y.Z — багфиксы • x.Y.z — совместимые изменения • X.y.z — не совместимые изменения

:53

bem-core: Версионирование

• x.y.Z — багфиксы • x.Y.z — совместимые изменения • X.y.z — не совместимые изменения

:54

Контрибьют

bem-core

bem-core: Контрибьют

• Рабочая рабочая копия • Правила для заведения задач, веток и пулл-реквестов • Тесты и примеры

:56

Планы

bem-core

РАЗГЛАСИТЬ ПЛАНЫ

bem-core: Планы

• bem-components • инфраструктура

:60

руководитель отдела разработки поисковых интерфейсов

veged@yandex-team.ru

Спасибо

Сергей Бережной

@veged

veged