Сергей Бережной — bem-core v1.0.0
-
Upload
yandex -
Category
Technology
-
view
796 -
download
4
description
Transcript of Сергей Бережной — bem-core v1.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
veged