bem-tools — это набор инструментов для работы с файлами по БЭМ-методологии. Он позволяет создавать сущности, собирать финальный рантайм, работать с build-декларациями, собирать весь проект командой bem make или запускать сервер разработки на дереве исходников проекта (используя bem server). Один из самых популярных способов расширения возможностей bem-tools — написание модулей технологий. В докладе речь пойдет о том, зачем их писать и как убедиться в том, что все сделано правильно.

1. Написание
технологий для
bem-tools
Татаринцев Сергей, Яндекс
BEMup в Питере, 29 ноября 2013

2. bem-tools
!2

3. bem-tools
• сборщик BEM-проектов
!2

4. bem-tools
• сборщик BEM-проектов
• расширяемый при помощи:
!2

5. bem-tools
• сборщик BEM-проектов
• расширяемый при помощи:
• узлов сборки
!2

6. bem-tools
• сборщик BEM-проектов
• расширяемый при помощи:
• узлов сборки
• подкоманд (в 1.0.0)
!2

7. bem-tools
• сборщик BEM-проектов
• расширяемый при помощи:
• узлов сборки
• подкоманд (в 1.0.0)
• модулей технологий
!2

8. Ссылки
!3

9. Ссылки
• документация: ru.bem.info/tools/bem
!3

10. Ссылки
• документация: ru.bem.info/tools/bem
• принимаем пожелания: github.com/bem/bem-tools/issues
!3

11. Модули технологий
!4

12. Модули технологий
• технологии — средства описания БЭМ-сущностей
!4

13. Модули технологий
• технологии — средства описания БЭМ-сущностей
• модуль технологии — Node.JS модуль для сборки файлов
технологий
!4

14. Пример
!5

15. Пример
• Блок описан в технологиях css, js, bemhtml
/block
block.css
block.js
block.bemhtml
!5

16. Пример
• Блок описан в технологиях css, js, bemhtml
/block
block.css
block.js
block.bemhtml
• css страницы собирается модулем технологии css
!5

17. Технологии в bem-tools
bemdecl
css
deps.js
dir
docs
examples
ie.css
js
js-i
level
level-proto
project
tech-docs
!6

18. Технологии в bem-core
bemhtml
bemtree
html
vanilla.js
node.js
browser.js
browser.js+bemhtml
!7

19. !8
Маловато будет

20. Пишем свою технологию
На примере CoffeeScript

21. Назначение модулей технологий
!10

22. Назначение модулей технологий
• создание файлов по шаблону (bem create)
!10

23. Назначение модулей технологий
• создание файлов по шаблону (bem create)
bem create —l common.block --block my-block —T css
!10

24. Назначение модулей технологий
• создание файлов по шаблону (bem create)
bem create —l common.block --block my-block —T css
• сборка результатов (bem build)
!10

25. Назначение модулей технологий
• создание файлов по шаблону (bem create)
bem create —l common.block --block my-block —T css
• сборка результатов (bem build)
• исходные файлы — внутри блоков
!10

26. Назначение модулей технологий
• создание файлов по шаблону (bem create)
bem create —l common.block --block my-block —T css
• сборка результатов (bem build)
• исходные файлы — внутри блоков
• блоки — внутри уровней переопределения
!10

27. Назначение модулей технологий
• создание файлов по шаблону (bem create)
bem create —l common.block --block my-block —T css
• сборка результатов (bem build)
• исходные файлы — внутри блоков
• блоки — внутри уровней переопределения
• результат — в бандл
!10

28. Сборка
Результат =
префикс + суффиксы + декларация + уровни
!11

29. Префикс и суффикс
Суффикс
/path/to/some/file.tech.js
!
!12
Префикс

30. Декларация
!13

31. Декларация
• список сущностей для сборки
!13

32. Декларация
• список сущностей для сборки
• строится из bemjson.js бандлов и deps.js блоков
!13

33. Декларация - пример
bemjson
block1.deps.js
({
({
block: 'page',
content: [
{block: 'block1'}
]
mustDeps: [
{block: 'block2'}
]
})
})
Декларация
[
{block: 'page'},
{block: 'block2'},
{block: 'block1'}
]
!14

34. Уровни переопределения
!15

35. Уровни переопределения
• папки, содержащие bem-сущности
!15

36. Уровни переопределения
• папки, содержащие bem-сущности
• каждая следующая переопределяет предыдущую
!15

37. Уровни переопределения
• папки, содержащие bem-сущности
• каждая следующая переопределяет предыдущую
• примеры:
• common
• desktop
• touch
!15

38. Let’s code!

39. Заготовка
• используется вторая версия API
• techMixin будет «примешан» к классу TechV2
!
exports.API_VER = 2;!
exports.techMixin = {!
//здесь будет код!
};
!17

40. getBuildSuffixesMap
{!
"что": ["из чего", "из чего еще", …],!
"что еще": […],!
…!
}
!18

41. Наш случай
Собираем js из coffee и js
exports.API_VER = 2;!
exports.techMixin = {!
getBuildSuffixesMap: function() {!
return {"js": ["coffee", "js"]};!
}!
}
!19

42. Процесс сборки
Декларация
Префикс результата
getBuildResults(decl, levels, output, opts);
Уровни
!20
Опции

43. getBuildResults, по умолчанию
!21

44. getBuildResults, по умолчанию
• сканирует все уровни переопределения
!21

45. getBuildResults, по умолчанию
• сканирует все уровни переопределения
• собирает исходные файлы для сущностей из декларации
!21

46. getBuildResults, по умолчанию
• сканирует все уровни переопределения
• собирает исходные файлы для сущностей из декларации
• проверяет, нужна ли пересборка
!21

47. getBuildResults, по умолчанию
•
•
•
•
!21
сканирует все уровни переопределения
собирает исходные файлы для сущностей из декларации
проверяет, нужна ли пересборка
вызывает getBuildResult для каждого выходного файла

48. Пример
•
•
•
•
уровни: common.blocks, desktop.blocks
декларация: [{block: "block1"}, {block: "block2"}]
build suffixes map: {js: ["coffee", "js"]}
файлы:
common.blocks/
block1/
block1.bemhtml
block1.css
block1.coffee
block2/
block2.bemhtml
block2.js
desktop.blocks/
block1/
block1.coffee
block1.css
block2/
block2.js
!22

49. Пример
•
•
•
•
уровни: common.blocks, desktop.blocks
декларация: [{block: "block1"}, {block: "block2"}]
build suffixes map: {js: ["coffee", "js"]}
файлы:
common.blocks/
block1/
block1.bemhtml
block1.css
block1.coffee
block2/
block2.bemhtml
block2.js
desktop.blocks/
block1/
block1.coffee
block1.css
block2/
block2.js
!23

50. Процесс сборки
Исходные
файлы
Префикс
выходного файла
getBuildResult(files, suffix, output, opts);
Выходной
суффикс
!24
Опции

51. Процесс сборки
getBuildResult(files, suffix, output, opts);
Для каждого файла
getBuildResultChunk(relPath, path, suffix)
!25

52. Процесс сборки
абсолютный
путь
getBuildResultChunk(relPath, path, suffix);
относительный
путь
!26
исходный
суффикс

53. Пример
•
•
•
•
•
уровни: common.blocks, desktop.blocks
декларация: [{block: "block1"}, {block: «block2"}]
выходоной префикс: desktop.bundles/example/example
build suffixes map: {js: ["coffee", "js"]}
файлы:
common.blocks/
block1/
block1.bemhtml
block1.css
block1.coffee
block2/
block2.bemhtml
block2.js
desktop.blocks/
block1/
block1.coffee
block1.css
block2/
block2.js
!27
getBuildResultChunk
getBuildResultChunk
desktop.bundles/example/example.js
getBuildResultChunk
getBuildResultChunk

54. Полный процесс
!28

55. Полный процесс
• вызывается getBuildResults(decl, levels, output, opts)
!28

56. Полный процесс
• вызывается getBuildResults(decl, levels, output, opts)
• сканируются уровни
!28

57. Полный процесс
• вызывается getBuildResults(decl, levels, output, opts)
• сканируются уровни
• находятся все исходные файлы БЭМ-сущностей из
декларации
!28

58. Полный процесс
• вызывается getBuildResults(decl, levels, output, opts)
• сканируются уровни
• находятся все исходные файлы БЭМ-сущностей из
декларации
• для каждого выходного файла зовется getBuildResult(files,
suffix, output, opts)
!28

59. Полный процесс
• вызывается getBuildResults(decl, levels, output, opts)
• сканируются уровни
• находятся все исходные файлы БЭМ-сущностей из
декларации
• для каждого выходного файла зовется getBuildResult(files,
suffix, output, opts)
• для кажого исходного файла зовется
getBuildResultChunk(relPath, path, suffix)
!28

60. Полный процесс
• вызывается getBuildResults(decl, levels, output, opts)
• сканируются уровни
• находятся все исходные файлы БЭМ-сущностей из
декларации
• для каждого выходного файла зовется getBuildResult(files,
suffix, output, opts)
• для кажого исходного файла зовется
getBuildResultChunk(relPath, path, suffix)
• результаты склеиваются и записываются на диск
!28

61. Завершим код
var fs = require('fs'),!
coffee = require('coffee-script');!
!
exports.API_VER = 2;!
exports.techMixin = {!
getBuildSuffixesMap: function() {!
return {'js': ['coffee', 'js']};!
},!
!
getBuildResultChunk: function(relPath, path, suffix) {!
var content = fs.readFileSync(path);!
if (suffix === 'coffee') {!
return coffee.compile(content);!
}!
return content;!
}!
};
!29

62. Подключение

63. На уровне блоков
В .bem/levels/blocks.js добавить полный путь к модулю в getTechs:
exports.getTechs = function() {!
return {!
…!
"coffee+js": "/path/to/tech/module.js"!
};!
};
!31

64. В make.js
Добавить в BundleNode#getTechs
registry.decl('BundleNode', {!
getTechs: function() {!
return [!
...!
'coffee+js',!
...!
];!
}!
});
!32

65. Минификация (в 0.6.x и 0.7.x)
Указать в make.js как технология должна оптимизироваться
registry.decl('BundleNode', {!
!
...!
!
'create-coffee+js-optimizer-node': function() {!
this['create-js-optimizer-node'].apply(this,
arguments);!
}!
});
!33

66. Минификация (в 1.0.0)
!34

67. Минификация (в 1.0.0)
• убедиться, что технология min.js включена в сборку
!34

68. Минификация (в 1.0.0)
• убедиться, что технология min.js включена в сборку
– зарегистрирована на уровне бандлов
!34

69. Минификация (в 1.0.0)
• убедиться, что технология min.js включена в сборку
– зарегистрирована на уровне бандлов
– добавлена в BundleNode::getTechs
!34

70. Что дальше?

71. Не рассказано
•
•
•
•
!36
создание шаблонов
bem create в процессе сборки
тестирование
суммарные технологии

72. Ссылки
• Документация — bit.ly/techmod-doc
• Технологии bem-tools — bit.ly/tech-bemtools
• Технологии bem-core — bit.ly/tech-bemcore
!37

73. Татаринцев Сергей
Старший разработчик
sevinf@yandex-team.ru
@SevInf
Спасибо