Мы поговорим о том, как создать эффективный и надёжный код, переложив всю лишнюю работу на роботов. Решим проблему с разным окружением у разработчиков (vagrant), научимся писать стили удобно (roole, autoprefixer), оптимизируем получившийся CSS (clean-css, CSScomb) и графику (Imagemin, SVGO), проверим js-код (jshint, jshint-groups, jscs), убедимся, что некрасивый код не попадёт в репозиторий (git-hooks), и обсудим, как можно быстро и легко создавать новые инструменты. Автоматизируем всё, что можно, и подумаем, что и почему — нельзя!

2. Инструменты
фронтенд-
разработчика
Владимир Гриненко
BEMup в Москве, 17 мая 2014

3. Бытие определяет сознание

4. vagrant
простая установка
работа с файлами из хостовой системы
прозрачная работа инструментов
гарантия консистентности
4

5. Поставка библиотек
bower
bower-npm-install
5

6. Оптимизация
borschik
clean-css
SVGO
6

7. Линтеры и бьютифаеры
jshint
jshint-groups
jscs
csscomb
7

8. Автоматизируй автоматику
git-hooks
8

9. Unit-тесты на всё
mocha (visionmedia.github.io/mocha)
chai (chaijs.com)
sinon (sinonjs.org)
sinon-chai (github.com/domenic/sinon-chai)
phantomjs (phantomjs.org)
mocha-phantomjs
istanbul (gotwarlost.github.io/istanbul)
9

10. Тесты на шаблоны
html-differ (github.com/eGavr/html-differ)
10

11. Тесты на верстку
gemini (ru.bem.info/tools/testing/gemini)
11

12. Автоматизируй автоматику
travis
saucelabs.com
12

13. Модульная система YM
Зачем: habrahabr.ru/post/181536
В чем фишка: habrahabr.ru/post/213627
Где взять: github.com/ymaps/modules
13

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

15. CSS-препроцессор
В чем фишка: roole.org
Где взять: npm i roole --save
15

16. Roole
написан на JS
PEG.js
богат фичами
похож на Stylus и SASS
16

17. Autoprefixer
Где взять: github.com/ai/autoprefixer
Забыли про вендорные префиксы
17

18. ENB: Альтернативная сборка
Что это: аналог bem-tools
Где взять: github.com/enb-make
18

19. Yoman
Генераторы проектов
19

20. node.js
Все инструменты на node.js
package.json можно использовать в
качестве task-runner
20

21. COA
Парсер командной строки
github.com/veged/coa
21

22. COA
цветоной хелп
JS API
автокомплит
валидация
22

23. tpl-cli
volo
npm i -g volo
volo create my-tool arikon/tpl-cli
23

24. bem-naming
bem.info/tools/bem/bem-naming
24

25. Спасибо!

26. 26
clubs.ya.ru/bem
twitter.com/bem_ru
facebook.com/groups/bem.info
bem.info

27. 27
bit.ly/msk-bemup-feedback

28. 28
Владимир Гриненко
Руководитель службы
разработки БЭМ
tadatuta@yandex-team.ru
@tadatuta