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

Роберт Харитонов, Одноклассники

Front-end Dev Conf, Минск, 2014 (видео).

Web Standards Days, Рига, Питер 2014.

Front-end DevClub, Рига, 2014.

На основе доклада: 8 часовой мастер-класс по автоматизации в Риге, Киеве и Питере.

Fork me on GitHub

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

Спасибо,

NodeJS

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

Шутка о .js

источник

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

  1. Быстродействие

Машины должны
страдать!

Пока мы строим веб

захватывающий веб

Grunt JS

grunt

И его 3500+ плагинов

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

Task Runners
Все уже сделано за вас,
берите и используйте.

Быстродействие

пустая страница

Первым делом

  1. Сжатие CSS, HTML, JS

Графика

CSS

Как мерить

Помимо статистики пользователей:
Grunt Google PageSpeed
Grunt dev-perf

Что еще

Анализ используемых модулей и предзагрузка
Шутка о .js

источник

Проверка кода

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

Это еще не все

Проверяем доступность:

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

Приемочные чеклисты

*-процессинг

Что у нас есть

Гибкий процессинг

CSS парсер

CSS постпроцессоры

Вдохновленные Rework'ом

HTML и JS

Full stack технологии

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

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

Демонстрация работы Dalek.js

Что бы посмотреть видео, откройте, пожалуйста, презентацию в браузере с поддержкой .mp4 или .webm.

Monkey testing

Monkey testing

gremlins.js

Разработка

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

Harp

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

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

Harp

Автоматизация автоматизации

Настройка рабочего окружения за вас:

Стартовые заготовки

Свои заготовки c Грантом

Grunt для начинающих

Скаффолдинг

Yeoman

Демонстрация работы yo

Что бы посмотреть видео, откройте, пожалуйста, презентацию в браузере с поддержкой .mp4 или .webm.

Зависимости

BowerNPM для клиентского JS
        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

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

Vagrant

        vagrant init your-environment
        vagrant up
        vagrant ssh
    

Все вместе bit.ly/automation-bundle

Машины должны
страдать!

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

Роберт Харитонов, Одноклассники

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