Автоматизация фронтенда — сегодня и завтра

Родной инструмент

• Низкий порог вхождения
• Бешеная популярность JavaScript
• Огромное сообщество

Автоматизируй все!

1. Производительность
2. Проверка кода
3. Пре/пост-процессинг
4. Тестирование
5. Разработка

Не Грантом едины

• Grunt - это конфиг
• Gulp - API
• Brunch
• Будущее с node-task

Первым делом

1. Компрессия CSS, HTML, JS
2. Спрайты - Smart Sprites, Spritesmith, SVG

Графика

• Imagemin, только по измененным файлам
• SVGO

CSS

• Умные компрессоры, как CSSO
• Объединение Media Query
• Чистка лишнего CSS и JS
• + CSSCSS для проверки дублированных свойств

Как мерять

• Google PageSpeed + Grunt
• Тесты c PhatnomJS или Selenium
• Скриншоты загрузки на медленных соединениях
• Сравнение веса ресурсов

Что еще

Анализируем все

• JS Lint, Hint и сразу таблетка
• CSS Lint
• HTML inspector
• Валидаторы стандартов, Coffee, Less, SCSS, JSON, jQuery

Это еще не все

• Aria linter
• Проверка на WCAG стандарты

Немного помечтаем

• Автопроверка по списку требований
• Набор скриншотов с браузеров
• Проверка code style (частично в html-inspector)

Что у нас есть

• SASS, LESS, Stylus
• Slim, Jade, EJS
• Coffee
• ES6 Shim
• Rework!

Rework

CSS

• Autoprefixer
• Myth — CSS-полифил
• Будущее за постпроцессингом

HTML и JS

• Автоматизация с акцентом на сущности
• Стандартные модули интерфейсов

Тестирование

• Юнит тестирование
• Тестирование производительности
• Функциональное тестирование

Функциональное тестирование

• Selenium
• Веб сервисы
• Dalek.js

Быстрый старт

• Сервер
• Препроцессинг всего и EJS partials
• Билд

Пример проекта с Harp

Harp

• Harp express middleware
• harp.io - хостинг с деплоем из Dropbox
• Быстрой вывод в сеть с Finch (или ngrok)

Скаффолдинг

• На основе Yo, Grunt, Bower
• 600+ готовых генераторов
• Как написать свой генератор

Зависимости

		bower init
		bower install jquery
		bower install https://github.com/foo/bar.git
	

bower.json

		"dependencies": { 
		  "jquery": "~2.1.0",
		  "font-awesome": "~3.1.1"
		}
	

Bower

• Bower + google-cdn
• Обновить зависимости до последней версии

Настройка среды

• Автоустановка NodeJS и зависимостей из NPM
• Vagrant

Vagrant

		vagrant init your-environment
		vagrant up
		vagrant ssh
	

Автоматизация фронтенда

• @operatino
• toHTML.it
• Мастер-класс в Риге — bit.ly/riga-automation

Слайды презентации — rhr.me/pres/automation