Инфраструктура frontend

до Яндекса

• Командная строка.
• Текстовый редактор.
• Файловые менеджеры.

в Яндексе

• Редактор кода.
• Системы контроля версий.
• Инструменты сборки.
• Статические анализаторы кода.
• Инструменты тестирования.
• Системы CI.
• ...

Редактор кода

Выберите тот, который вам удобен...

Системы контроля версий

• Больше не нужно помнить о всех исправленных ошибках и модификациях.
• Нет смысла складировать ревизии на жестком диске.
• Нет смысла переносить проекты вручную, достаточно получить их из репозитория.

Модульная система

• Дробление сложных компонент на более мелкие.
• Многократное использование функциональности (интерфейс).
• Возможность обновления/замены модуля, без необходимости изменения остальной системы.

Инструменты сборки

• Task runners (примеры: Grunt, Gulp).
• Builders (примеры: webpack, enb).
• JS minifier (примеры: UglifyJS, YUI Compressor).
• CSS minifier (примеры: Clean-css, CSSSHRINK).
• Images optimizer (примеры: Imgo, SVGO).

Codestyle

Код в любом проекте должен выглядеть так, будто его писал один человек.

Linters

Перехватчики событий

• Git / SVN / Mercurial hooks.
• Webhooks.

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

• Еще один вариант документации.
• Позволяет избегать глупых ошибок.
• Обеспечивает надежность кода.

Пример стека: Mocha + Chai + Sinon.JS + Karma runner

Непрерывная интеграция (CI)

Для продукта: частые релизы.
Для разработки: быстрое выявление интеграционных проблем.

Whatever else

• Профилирование кода.
• Измерение производительности.
• Отладка под разные устройства (browserstack).
• Тестирование css (csste.st).
• Любые самописные инструменты, которые делают мир лучше...

Напутствие

• Хорошая инфраструктура экономит время.
• Автоматизируйте рутинные операции.

Лекции