Сергей Бережной — bem-core v1.0.0

62

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 of Сергей Бережной — bem-core v1.0.0

Page 1: Сергей Бережной — bem-core v1.0.0
Page 2: Сергей Бережной — bem-core v1.0.0

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

[email protected]

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

Page 3: Сергей Бережной — bem-core v1.0.0
Page 4: Сергей Бережной — bem-core v1.0.0

bem-bl

Page 5: Сергей Бережной — bem-core v1.0.0

bem-bl

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

:5

Page 6: Сергей Бережной — bem-core v1.0.0
Page 7: Сергей Бережной — bem-core v1.0.0

bem-core

Page 8: Сергей Бережной — bem-core v1.0.0

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

bem-core

Page 9: Сергей Бережной — bem-core v1.0.0

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

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

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

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

:9

Page 10: Сергей Бережной — bem-core v1.0.0

Блоки

bem-core

Page 11: Сергей Бережной — bem-core v1.0.0
Page 12: Сергей Бережной — bem-core v1.0.0

bem-core: Блоки

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

:12

Page 13: Сергей Бережной — bem-core v1.0.0

bem-core: Блоки

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

:13

Page 14: Сергей Бережной — bem-core v1.0.0

bem-core: Блоки

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

:14

Page 15: Сергей Бережной — bem-core v1.0.0

bem-core: Блоки

• jquery — jQuery

:15

Page 16: Сергей Бережной — bem-core v1.0.0

bem-core: Блоки

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

:16

Page 17: Сергей Бережной — bem-core v1.0.0

bem-core: Блоки

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

:17

Page 18: Сергей Бережной — bem-core v1.0.0

bem-core: Блоки

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

:18

Page 19: Сергей Бережной — bem-core v1.0.0

Изменения

bem-core

Page 20: Сергей Бережной — bem-core v1.0.0

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

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

:20

Page 21: Сергей Бережной — bem-core v1.0.0

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

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

:21

Page 22: Сергей Бережной — bem-core v1.0.0

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

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

:22

Page 23: Сергей Бережной — bem-core v1.0.0
Page 24: Сергей Бережной — bem-core v1.0.0

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

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

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

:25

Page 26: Сергей Бережной — bem-core v1.0.0

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

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

:26

Page 27: Сергей Бережной — bem-core v1.0.0

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

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

:27

Page 28: Сергей Бережной — bem-core v1.0.0

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

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

:28

Page 29: Сергей Бережной — bem-core v1.0.0

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

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

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

:29

Page 30: Сергей Бережной — bem-core v1.0.0

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

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

:30

Page 31: Сергей Бережной — bem-core v1.0.0

BEMHTML-синтаксис

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

:31

Page 32: Сергей Бережной — bem-core v1.0.0
Page 33: Сергей Бережной — bem-core v1.0.0

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

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

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

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

:33

Page 34: Сергей Бережной — bem-core v1.0.0

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

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

– gist.github.com/veged/6150760

:34

Page 35: Сергей Бережной — bem-core v1.0.0

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

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

:35

Page 36: Сергей Бережной — bem-core v1.0.0

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
Page 38: Сергей Бережной — bem-core v1.0.0

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

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

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

:38

Page 39: Сергей Бережной — bem-core v1.0.0

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

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

:39

Page 40: Сергей Бережной — bem-core v1.0.0

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

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

:40

Page 41: Сергей Бережной — bem-core v1.0.0
Page 42: Сергей Бережной — bem-core v1.0.0

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

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

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

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

:43

Page 44: Сергей Бережной — bem-core v1.0.0

i-bem

Page 45: Сергей Бережной — bem-core v1.0.0

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

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

:45

Page 46: Сергей Бережной — bem-core v1.0.0

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

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

:46

Page 47: Сергей Бережной — bem-core v1.0.0

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

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

bem-core

Page 49: Сергей Бережной — bem-core v1.0.0

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

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

:49

Page 50: Сергей Бережной — bem-core v1.0.0

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

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

:50

Page 51: Сергей Бережной — bem-core v1.0.0

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

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

:51

Page 52: Сергей Бережной — bem-core v1.0.0

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

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

:52

Page 53: Сергей Бережной — bem-core v1.0.0

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

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

:53

Page 54: Сергей Бережной — bem-core v1.0.0

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

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

:54

Page 55: Сергей Бережной — bem-core v1.0.0

Контрибьют

bem-core

Page 56: Сергей Бережной — bem-core v1.0.0

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

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

:56

Page 57: Сергей Бережной — bem-core v1.0.0
Page 58: Сергей Бережной — bem-core v1.0.0

Планы

bem-core

Page 59: Сергей Бережной — bem-core v1.0.0

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

Page 60: Сергей Бережной — bem-core v1.0.0

bem-core: Планы

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

:60

Page 61: Сергей Бережной — bem-core v1.0.0
Page 62: Сергей Бережной — bem-core v1.0.0

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

[email protected]

Спасибо

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

@veged

veged