Вместо того чтобы служить роботам, мы пишем код для людей: его приятно писать, удобно читать и легко понимать. При этом нам больше не нужно делать рутинную работу, всё автоматизировано специально разработанными инструментами. Они превращают красивый код в эффективный. Мы заставили роботов работать на разработчика, о чём и хотим рассказать. Кроме того, в докладе прозвучат идеи и советы, как написать свой собственный инструмент, если вам не достает существующего арсенала.

1. Инструменты
фронтенд-
разработчика
Владимир Гриненко
Разработчик интерфейсов
Я.Субботник, Рига, 6 апреля 2013 года

2. Обо мне
tadatuta@yandex-team.ru
@tadatuta
— из Симферополя
— разрабатываю интерфейсы
— занимаюсь bem.info
— помогаю осваивать БЭМ внешним разработчикам
— вне Яндекса не один год разрабатывал сайты и
консультировал команды различного уровня
2

3. Инструменты фронтенд-разработчика
3

4. Инструменты фронтенд-разработчика
4

5. Инструменты фронтенд-разработчика
• Оптимизаторы
• Системы сборки
5

6. Инструменты фронтенд-разработчика
• Оптимизаторы
• Системы сборки
Бонус: как написать свои инструменты
6

7. Инструменты фронтенд-разработчика
• Open source
7

8. Инструменты фронтенд-разработчика
• Open source
• Написаны на JavaScript под node.js
8

9. Инструменты фронтенд-разработчика
• Open source
• Написаны на JavaScript под node.js
• Являются уникальными либо лучшими на рынке
9

10. bem.info/tools
10

11. CSSO

12. CSSO
/* Use shorthand */
.super-box {
margin-top: 9px;
margin-right: 8px;
margin-bottom: 0;
margin-left: 5px;
margin: 9px 8px 0 5px;
}
12

13. CSSO
/* Use shorthand */
.super-box { /* Numeric font-weight */
margin-top: 9px; .about {
margin-right: 8px; font-weight: bold;
margin-bottom: 0; font-weight: 700;
margin-left: 5px; }
margin: 9px 8px 0 5px;
}
12

14. CSSO
/* Use shorthand */
.super-box { /* Numeric font-weight */
margin-top: 9px; .about {
margin-right: 8px; font-weight: bold;
margin-bottom: 0; font-weight: 700;
margin-left: 5px; }
margin: 9px 8px 0 5px; /* Shorter color code */
} .menu {
color: yellow;
color: #FF0;
background-color: #F00;
background-color: red;
}
12

15. CSSO
BEFORE AFTER
.test1 { .test1 {
border: none;
background-color: red; background-color: red;
margin-top: 2em;
margin-left: 4px;
margin: 2em .1em 3px 4px;
margin-bottom:3px; font-weight: 700
margin-right: 0.1em;
font-weight: bold;
}
}
.test2 { .test1, .test2 {
border: none; border: none;
font-weight: normal;
} font-weight: 400
}
.test3 {
margin-top: 2em;
margin-bottom: 2em;
margin-right: 2em;
.test3 {
margin-left: 2em; margin: 2em;
13

16. bem.info/tools/csso
14

17. SVGO

18. SVGO
• Размер
• Скорость парсинга
• Скорость рендеринга
16

19. SVGO
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0,
SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="120px" height="120px" viewBox="0 0 120 120"
enable-background="new 0 0 120 120" xml:space="preserve"
>
<g>
<g>
<circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
</g>
</g>
</svg>
17

20. SVGO
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0,
SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="120px" height="120px" viewBox="0 0 120 120"
enable-background="new 0 0 120 120" xml:space="preserve"
>
<g>
<g>
<circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
</g>
</g>
</svg>
18

21. SVGO
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0,
SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="120px" height="120px" viewBox="0 0 120 120"
enable-background="new 0 0 120 120" xml:space="preserve"
>
<g>
<g>
<circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
</g>
</g>
</svg>
19

22. SVGO
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0,
SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="120px" height="120px" viewBox="0 0 120 120"
enable-background="new 0 0 120 120" xml:space="preserve"
>
<g>
<g>
<circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
</g>
</g>
</svg>
20

23. SVGO
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0,
SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="120px" height="120px" viewBox="0 0 120 120"
enable-background="new 0 0 120 120" xml:space="preserve"
>
<g>
<g>
<circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
</g>
</g>
</svg>
21

24. SVGO
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0,
SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="120px" height="120px" viewBox="0 0 120 120"
enable-background="new 0 0 120 120" xml:space="preserve"
>
<g>
<g>
<circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
</g>
</g>
</svg>
22

25. SVGO
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0,
SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="120px" height="120px" viewBox="0 0 120 120"
enable-background="new 0 0 120 120" xml:space="preserve"
>
<g>
<g>
<circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
</g>
</g>
</svg>
23

26. SVGO
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0,
SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="120px" height="120px" viewBox="0 0 120 120"
enable-background="new 0 0 120 120" xml:space="preserve"
>
<g>
<g>
<circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
</g>
</g>
</svg>
24

27. SVGO
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0,
SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="120px" height="120px" viewBox="0 0 120 120"
enable-background="new 0 0 120 120" xml:space="preserve"
>
<g>
<g>
<circle fill="red" cx="60px" cy="60px" r="50px"/>
</g>
</g>
</svg>
25

28. SVGO
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0,
SVG Export Plug-In. SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="120px" height="120px" viewBox="0 0 120 120"
enable-background="new 0 0 120 120" xml:space="preserve"
>
<g>
<g>
<circle fill="red" cx="60px" cy="60px" r="50px"/>
</g>
</g>
</svg>
26

29. github.com/svg/svgo
27

30. Borschik

31. (с)Борщик
29

32. borschik
blocks/block1/block1.css
.block1 {
background: url(block1.png);
}
30

33. borschik
blocks/block1/block1.css
.block1 {
background: url(block1.png);
}
blocks/block2/block2.css
.block2 {
background: url(block2.png);
}
31

34. borschik
blocks/block1/block1.css
.block1 {
background: url(block1.png);
}
blocks/block2/block2.css
.block2 {
background: url(block2.png);
}
pages/page/page.css
@import url("../../blocks/block1/block1.css");
@import url("../../blocks/block1/block2.css");
32

35. borschik
Собираем
borschik -i page.css -o _page.css -t css
33

36. borschik
Собираем
borschik -i page.css -o _page.css -t css
pages/page/_page.css
/* ../../blocks/block1/block1.css */
.block1 {
background: url(../../blocks/block1/block1.png);
}
/* ../../blocks/block1/block1.css */
/* ../../blocks/block2/block2.css */
.block2 {
background: url(../../blocks/block2/block2.png);
}
/* ../../blocks/block2/block2.css */
34

37. (с)Борщик
35

38. github.com/veged/borschik/
36

39. Setochka

40. Setochka
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8
50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-
stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1e5799',
endColorstr='#7db9e8',GradientType=0 );
38

41. Setochka
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8
50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-
stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1e5799',
endColorstr='#7db9e8',GradientType=0 );
39

42. Setochka
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8
50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-
stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1e5799',
endColorstr='#7db9e8',GradientType=0 );
40

43. 41

44. github.com/afelix/setochka
42

45. BEM tools

46. BEM tools
• Создавать сущности
• Собирать финальный рантайм
• Работать с декларациями сборки
• Поднимать dev-сервер
44

47. Небритый Оккам
Создание сущностей
bem create block1 -T css -T js
45

48. Небритый Оккам
Создание сущностей
bem create block1 -T css -T js
block1/block1.css
.block1
{
}
block1/block1.js
BEM.DOM.decl(‘block1’,
{
onSetMod: {
‘js’: function() {
}
}
});
46

49. BEM tools
Чтобы
понять БЭМ, сначала
нужно понять БЭМ
47

50. Уровни переопределения
lib/blocks/block1/block1.css
.block1 {
font-size: 12px;
background: #ccc;
}
48

51. Уровни переопределения
lib/blocks/block1/block1.css
.block1 {
font-size: 12px;
background: #ccc;
}
project/blocks/block1/block1.css
.block1 {
font-size: 14px;
border: 1px solid;
}
49

52. Уровни переопределения
lib/blocks/block1/block1.css
.block1 {
font-size: 12px;
background: #ccc;
}
project/blocks/block1/block1.css
.block1 {
font-size: 14px;
border: 1px solid;
}
project/pages/page/page.css
@import url("../../../library/blocks/block1/block1.css");
@import url("../../blocks/block1/block1.css");
50

53. Декларация
project/pages/page/page.bemdecl.js
exports.blocks = [
{
block: ‘block1’
}
]
51

54. bem make
project/pages/page/page.bemdecl.js
exports.blocks = [
{
block: ‘block1’
}
]
Presto!
bem make
52

55. bem make
project/pages/page/page.bemdecl.js
exports.blocks = [
{
block: ‘block1’
}
]
Presto!
bem make
Blink
pages/page/page.html
pages/page/page.css
pages/page/page.js
pages/page/_page.css
pages/page/_page.js
53

56. bem make за кадром
bem build
54

57. bem make за кадром
bem build
borschik
55

58. bem make за кадром
bem build
borschik
csso
56

59. bem make за кадром
bem build
borschik
csso
uglifyjs
57

60. bem make за кадром
bem build
borschik
csso
uglifyjs
и еще много всего ;)
58

61. bem server за кадром
bem build
borschik
csso
uglifyjs
и еще много всего ;)
59

62. 60

63. bem decl
bem decl merge
61

64. bem decl
bem decl merge
bem decl intersect
62

65. bem decl
bem decl merge
bem decl intersect
bem decl subtract
63

66. bem.info/tools/bem
64

67. COA

68. COA
• Promises-based асинхронность
• Автогенерация цветного хелпа
• API при использовании в качестве node.js модуля
• Автокомплит для shell
• Валидация
• Создание подкоманд
66

69. COA: быстрый старт с tpl-cli
• Использует volo
• Заготовка на github
• Тесты
• Code coverage отчет
• Интеграция с Travis Continuous Integration
• Заготовки документации
67

70. COA: быстрый старт с tpl-cli
Установка
[sudo] npm install -g volo
volo create my-tool arikon/tpl-cli
68

71. COA
require('coa').Cmd()
.name(process.argv[1])
.title('My awesome command line util')
.helpful()
.opt()
.name('version')
.title('Version')
.short('v')
.long('version')
.flag()
.act(function(opts) {
return
JSON.parse(require('fs').readFileSync(__dirname + '/
package.json'))
.version;
})
.end()
.run(process.argv.slice(2));
69

72. github.com/veged/coa
70

73. Подводя итоги
• CSSO — оптимизатор CSS
• SVGO — оптимизатор SVG
• Borschik — умный сБорщик текстовых файлов
• Setochka — выделение свойств из CSS
• BEM tools — инструменты для работы с БЭМ
Рассмотрели COA для создания собственных инструментов
71

74. bem.info/tools
72

75. Ссылки
• SVGO: оптимизатор SVG
• Новые возможности bem-tools для автоматической сборки
проекта
• БЭМ: практика
73

76. Владимир Гриненко
Разработчик интерфейсов
tadatuta@yandex.ru
@tadatuta