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

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

Front-end Dev Conf, Минск, 2014

Web Standards Days, Рига, 2014 + мастер-класс по автоматизации в Риге и в Киеве

Fork me on GitHub

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

Роберт Харитонов

Спасибо,

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

источник

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

  1. Производительность

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

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

Grunt JS

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

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

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

Производительность

Первым делом

  1. Компрессия CSS, HTML, JS

Графика

CSS

Как мерять

Помимо статистики с пользователей:

Что еще

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

источник

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

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

Это еще не все

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

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

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

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

Что у нас есть

Rework

CSS парсер

CSS

Rework

HTML и JS

BEM

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

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

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

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

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

Monkey testing

gremlins.js

Разработка

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

Harp

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

Harp

Скаффолдинг

Yeoman

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

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

Зависимости

Bower – NPM для клиентского 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