Буквально на днях вышла альфа-версия bem-tools 1.0.0-alpha5. Мы расскажем об изменениях, которые войдут в стабильный релиз bem-tools 1.0.0.

1. bem-tools 1.0.0
Сергей Татаринцев
BEMup в рамках YaC 2013, Москва

2. bem-tools
Что это такое?

3. Сборщик проектов БЭМ
3

4. Сборщик проектов БЭМ
Сборка блоков по уровням переопределения
3

5. Сборщик проектов БЭМ
Сборка блоков по уровням переопределения
Сборка страниц из блоков
3

6. Сборщик проектов БЭМ
Сборка блоков по уровням переопределения
Сборка страниц из блоков
Веб-сервер для разработки
3

7. API для кастомизации сборки
4

8. API для кастомизации сборки
модули технологий
4

9. API для кастомизации сборки
модули технологий
узлы сборки
4

10. API для кастомизации сборки
модули технологий
узлы сборки
схемы именования файлов
4

11. API для кастомизации сборки
модули технологий
узлы сборки
схемы именования файлов
команды
4

12. Расширения
5

13. Расширения
bem-gen-doc - генерация сайта с документацией
5

14. Расширения
bem-gen-doc - генерация сайта с документацией
bem-pr и bem-sets - сборка примеров и запуск тестов
5

15. 1.0.0
Что нового?

16. Цели
7

17. Цели
эволюционное развитие версии 0.6.x
7

18. Цели
эволюционное развитие версии 0.6.x
подготовка стабильного API для 1.x
7

19. Цели
эволюционное развитие версии 0.6.x
подготовка стабильного API для 1.x
избавление от legacy-кода
7

20. Цели
эволюционное развитие версии 0.6.x
подготовка стабильного API для 1.x
избавление от legacy-кода
упрощение настройки
7

21. Цели
эволюционное развитие версии 0.6.x
подготовка стабильного API для 1.x
избавление от legacy-кода
упрощение настройки
расширяемость
7

22. Нововведения
8

23. Нововведения
новый формат make.js
8

24. Нововведения
новый формат make.js
менеджер и конструктор уровней
8

25. Нововведения
новый формат make.js
менеджер и конструктор уровней
сборка страниц с плоской схемой именования
8

26. Нововведения
новый формат make.js
менеджер и конструктор уровней
сборка страниц с плоской схемой именования
слабые суффиксы для технологий
8

27. Нововведения
новый формат make.js
менеджер и конструктор уровней
сборка страниц с плоской схемой именования
слабые суффиксы для технологий
автоматическая проверка обновлений
8

28. Нововведения
новый формат make.js
менеджер и конструктор уровней
сборка страниц с плоской схемой именования
слабые суффиксы для технологий
автоматическая проверка обновлений
сбор статистики
8

29. Модули подкоманд
Расширение команды bem

30. Как?
10

31. Как?
npm-пакет с именем вида bem-<подкоманда>
10

32. Как?
npm-пакет с именем вида bem-<подкоманда>
должен быть установлен рядом с bem-tools
10

33. Как?
npm-пакет с именем вида bem-<подкоманда>
должен быть установлен рядом с bem-tools
bem-tools должен быть добавлен в peerDependencies
10

34. Как?
npm-пакет с именем вида bem-<подкоманда>
должен быть установлен рядом с bem-tools
bem-tools должен быть добавлен в peerDependencies
используется COA bit.ly/BEMUP_COA
10

35. Как?
npm-пакет с именем вида bem-<подкоманда>
должен быть установлен рядом с bem-tools
bem-tools должен быть добавлен в peerDependencies
используется COA bit.ly/BEMUP_COA
доступен шаблон проекта. bit.ly/BEMUP_COMMAND
10

36. Пример
Пакет bem-hello
var Q = require('q');
module.exports = function(BEM) {
return this.title('hello world command')
.act(function() {
return Q.resolve('Hello, world!');
});
};
11

37. Запуск
> bem hello
Hello, world!
12

38. Конструктор уровней
Гибкая настройка уровней переопределения

39. До bem-tools 1.0.0
Миксин к классу Level
exports.baseLevelPath = '/path/to/base';
exports.getTechs = function() {
return bemUtil.extend(this.__base() || {}, {
'css': 'v2/css',
'someTech': '/path/to/some/tech'
});
};
14

40. Проблемы
15

41. Проблемы
Базовый уровень = схема именования + список технологий
15

42. Проблемы
Базовый уровень = схема именования + список технологий
Технологии V1 по умолчанию
15

43. Проблемы
Базовый уровень = схема именования + список технологий
Технологии V1 по умолчанию
Полные пути ко всем внешним технологиям
15

44. Проблемы
Базовый уровень = схема именования + список технологий
Технологии V1 по умолчанию
Полные пути ко всем внешним технологиям
Необходимость вызова __base()
15

45. В bem-tools 1.0.0
module.exports = function (BEM) {
return BEM.defineLevel()
.setNamingScheme('simple')
.addTechs('css', 'js', 'someTech')
.createClass();
};
16

46. В bem-tools 1.0.0
Раздельное задание технологий и схемы именования
module.exports = function (BEM) {
return BEM.defineLevel()
.setNamingScheme('simple')
.addTechs('css', 'js', 'someTech')
.createClass();
};
16

47. В bem-tools 1.0.0
Раздельное задание технологий и схемы именования
Автоматический поиск путей к модулям технологий
module.exports = function (BEM) {
return BEM.defineLevel()
.setNamingScheme('simple')
.addTechs('css', 'js', 'someTech')
.createClass();
};
16

48. В bem-tools 1.0.0
Раздельное задание технологий и схемы именования
Автоматический поиск путей к модулям технологий
Только V2 технологии
module.exports = function (BEM) {
return BEM.defineLevel()
.setNamingScheme('simple')
.addTechs('css', 'js', 'someTech')
.createClass();
};
16

49. Поиск путей к технологиям
module.exports = function (BEM) {
return BEM.defineLevel()
.useNpmPackage('bem-techs-core')
.addTechs('project.js', 'css', 'js', 'bemhtml')
.createClass();
};
17

50. Поиск путей к технологиям
В $PROJECT_ROOT/.bem/techs
module.exports = function (BEM) {
return BEM.defineLevel()
.useNpmPackage('bem-techs-core')
.addTechs('project.js', 'css', 'js', 'bemhtml')
.createClass();
};
17

51. Поиск путей к технологиям
В $PROJECT_ROOT/.bem/techs
В npm-пакетах
module.exports = function (BEM) {
return BEM.defineLevel()
.useNpmPackage('bem-techs-core')
.addTechs('project.js', 'css', 'js', 'bemhtml')
.createClass();
};
17

52. Поиск путей к технологиям
В $PROJECT_ROOT/.bem/techs
В npm-пакетах
V2 технологии bem-tools
module.exports = function (BEM) {
return BEM.defineLevel()
.useNpmPackage('bem-techs-core')
.addTechs('project.js', 'css', 'js', 'bemhtml')
.createClass();
};
17

53. Явное задание путей
Все также возможно
module.exports = function (BEM) {
return BEM.defineLevel()
.addTechs({
'css': '/path/to/css',
'js': '/path/to/js'
})
.createClass();
};
18

54. Наследование
Нет необходимости в вызове __base
var BlocksLevel = require('./blocks');
module.exports = function (BEM) {
return BlocksLevel.extend()
.setNamingScheme('simple')
.addTechs('something.js')
.setDefaultTechs('something.js','something.js')
.createClass();
};
19

55. Менеджер уровней
Избавляемся от .bem/level.js

56. .bem/level.js
21

57. .bem/level.js
Есть в каждой папке уровня переопределения
21

58. .bem/level.js
Есть в каждой папке уровня переопределения
Как правило, содержит только ссылку на прототип
21

59. .bem/level.js
Есть в каждой папке уровня переопределения
Как правило, содержит только ссылку на прототип
Как правило, прототип и так очевиден из имени папки
21

60. .bem/level.js
Есть в каждой папке уровня переопределения
Как правило, содержит только ссылку на прототип
Как правило, прототип и так очевиден из имени папки
Конфигурация размазана по множеству файлов
21

61. LevelManager
module.exports = function () {
var levelManager = BEM.LevelManager.get();
levelManager.setLevelClass('*.blocks', BlocksLevel);
levelManager.setLevelClass('*.bundles', BundlesLevel);
};
22

62. LevelManager
Настраивается в make.js;
module.exports = function () {
var levelManager = BEM.LevelManager.get();
levelManager.setLevelClass('*.blocks', BlocksLevel);
levelManager.setLevelClass('*.bundles', BundlesLevel);
};
22

63. LevelManager
Настраивается в make.js;
Позволяет настроить несколько уровней сразу;
module.exports = function () {
var levelManager = BEM.LevelManager.get();
levelManager.setLevelClass('*.blocks', BlocksLevel);
levelManager.setLevelClass('*.bundles', BundlesLevel);
};
22

64. LevelManager+LevelBuilder
Наглядная настройка всех уровней проекта
module.exports = function (make) {
make.levels(function (levels) {
levels
.addLevel('*.blocks')
.addTechs(...)
.addLevel('*.bundles', {extends: '*.blocks'})
});
};
23

65. Миграция
Как перейти на 1.x

66. Миграция
25

67. Миграция
bower-npm-install вместо bem make libs
25

68. Миграция
bower-npm-install вместо bem make libs
небольшие отличия в make.js
25

69. Миграция
bower-npm-install вместо bem make libs
небольшие отличия в make.js
bem bench в отдельном пакете
25

70. Миграция
bower-npm-install вместо bem make libs
небольшие отличия в make.js
bem bench в отдельном пакете
удалены Legacy-технологии
25

71. Сергей Татаринцев
Разработчик
sevinf@yandex-team.ru
28
26

72. Спасибо!