Инструменты
фронтенд-
разработчика
Владимир Гриненко
BEMup в Москве, 17 мая 2014
Бытие определяет сознание
vagrant
простая установка
работа с файлами из хостовой системы
прозрачная работа инструментов
гарантия консистентности
4
Поставка библиотек
bower
bower-npm-install
5
Оптимизация
borschik
clean-css
SVGO
6
Линтеры и бьютифаеры
jshint
jshint-groups
jscs
csscomb
7
Автоматизируй автоматику
git-hooks
8
Unit-тесты на всё
mocha (visionmedia.github.io/mocha)
chai (chaijs.com)
sinon (sinonjs.org)
sinon-chai (github.com/domenic...
Тесты на шаблоны
html-differ (github.com/eGavr/html-differ)
10
Тесты на верстку
gemini (ru.bem.info/tools/testing/gemini)
11
Автоматизируй автоматику
travis
saucelabs.com
12
Модульная система YM
Зачем: habrahabr.ru/post/181536
В чем фишка: habrahabr.ru/post/213627
Где взять: github.com/ymaps/mod...
Модульная система YM
Асинхронный require модулей
Асинхронный provide модулей
Возможность передекларации/
додекларации моду...
CSS-препроцессор
В чем фишка: roole.org
Где взять: npm i roole --save
15
Roole
написан на JS
PEG.js
богат фичами
похож на Stylus и SASS
16
Autoprefixer
Где взять: github.com/ai/autoprefixer
Забыли про вендорные префиксы
17
ENB: Альтернативная сборка
Что это: аналог bem-tools
Где взять: github.com/enb-make
18
Yoman
Генераторы проектов
19
node.js
Все инструменты на node.js
package.json можно использовать в
качестве task-runner
20
COA
Парсер командной строки
github.com/veged/coa
21
COA
цветоной хелп
JS API
автокомплит
валидация
22
tpl-cli
volo
npm i -g volo
volo create my-tool arikon/tpl-cli
23
bem-naming
bem.info/tools/bem/bem-naming
24
Спасибо!
26
clubs.ya.ru/bem
twitter.com/bem_ru
facebook.com/groups/bem.info
bem.info
27
bit.ly/msk-bemup-feedback
28
Владимир Гриненко
Руководитель службы
разработки БЭМ
tadatuta@yandex-team.ru
@tadatuta
Владимир Гриненко —Инструменты фронтенд-разработчика
Upcoming SlideShare
Loading in …5
×

Владимир Гриненко —Инструменты фронтенд-разработчика

1,003
-1

Published on

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

Автоматизируем всё, что можно, и подумаем, что и почему — нельзя!

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,003
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Владимир Гриненко —Инструменты фронтенд-разработчика

  1. 1. Инструменты фронтенд- разработчика Владимир Гриненко BEMup в Москве, 17 мая 2014
  2. 2. Бытие определяет сознание
  3. 3. vagrant простая установка работа с файлами из хостовой системы прозрачная работа инструментов гарантия консистентности 4
  4. 4. Поставка библиотек bower bower-npm-install 5
  5. 5. Оптимизация borschik clean-css SVGO 6
  6. 6. Линтеры и бьютифаеры jshint jshint-groups jscs csscomb 7
  7. 7. Автоматизируй автоматику git-hooks 8
  8. 8. 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
  9. 9. Тесты на шаблоны html-differ (github.com/eGavr/html-differ) 10
  10. 10. Тесты на верстку gemini (ru.bem.info/tools/testing/gemini) 11
  11. 11. Автоматизируй автоматику travis saucelabs.com 12
  12. 12. Модульная система YM Зачем: habrahabr.ru/post/181536 В чем фишка: habrahabr.ru/post/213627 Где взять: github.com/ymaps/modules 13
  13. 13. Модульная система YM Асинхронный require модулей Асинхронный provide модулей Возможность передекларации/ додекларации модуля 14
  14. 14. CSS-препроцессор В чем фишка: roole.org Где взять: npm i roole --save 15
  15. 15. Roole написан на JS PEG.js богат фичами похож на Stylus и SASS 16
  16. 16. Autoprefixer Где взять: github.com/ai/autoprefixer Забыли про вендорные префиксы 17
  17. 17. ENB: Альтернативная сборка Что это: аналог bem-tools Где взять: github.com/enb-make 18
  18. 18. Yoman Генераторы проектов 19
  19. 19. node.js Все инструменты на node.js package.json можно использовать в качестве task-runner 20
  20. 20. COA Парсер командной строки github.com/veged/coa 21
  21. 21. COA цветоной хелп JS API автокомплит валидация 22
  22. 22. tpl-cli volo npm i -g volo volo create my-tool arikon/tpl-cli 23
  23. 23. bem-naming bem.info/tools/bem/bem-naming 24
  24. 24. Спасибо!
  25. 25. 26 clubs.ya.ru/bem twitter.com/bem_ru facebook.com/groups/bem.info bem.info
  26. 26. 27 bit.ly/msk-bemup-feedback
  27. 27. 28 Владимир Гриненко Руководитель службы разработки БЭМ tadatuta@yandex-team.ru @tadatuta

×