Workflow и инструменты frontend-разработки

This post is also available in: Английский

Рано или поздно любой разработчик сталкивается с вопросом, какие инструменты лучше всего подходят для его работы. Выбор хороших инструментов позволит существенно увеличить производительность разработки и повысить качество кода. В данной статье мы рассмотрим используемые нами средства при разработке frontend-части наших проектов, также организации самого процесса.

Инструменты.

Профессионала своего дела отличает не только качество его работы, но и выбор инструментов, которые он использует.

Текстовый редактор

Стоит начать с текстового редактора. Большинство людей не пользуют его и на 50% от возможностей. Скорее всего, если вы пользуетесь чем-то лучшим блокнота, то вам могут быть доступны такие возможности как:

  • Zen Coding

Позволит вам быстро создавать html-разметку. Экономит время и позволят постигнуть особый дзен. (Прочитать про то, что это такое, можно на этой странице).

  • Live Templates

Нам часто приходится набивать одни и теже конструкции: объявление функций, объектов, конструкций языка. Live Templates позволит автоматизировать рутинный набор шаблонных кусков кода и сконцентрировать внимание на более важных кусках приложения. Ко всему прочему вы можете легко расширить набор шаблонов, создав их для фреймворков, которые чаще всего используете.

  • File Templates

Шаблоны файлов позволят вам быстро разворачивать новые модули проекта. И также, как и в случае с Live Templates обычно можно расширять набор шаблонов необходимыми.

  • Live Edit

Наличие такой функции у редактора позволит не обновлять браузер при верстке макета после каждой правки — это действие автоматизируется!

Отличный текстовый редактор, который можно рекомендовать — Sublime Text 2. Поддержка плагинов на все случаи жизни, подсветка кода,  кроссплатформенность — все это делает его отличным редактором для использования. К тому же он бесплатный.

Но для действительно крупных проектов мы используем PHPStorm/WebStorm от JetBrains. Эти продукты обеспечивают разработчика всем необходимым функционалом, особенностями, описанными выше, а также отсвечиванием кода и зависимостей между всеми файлами проекта.

Как SublimeText, так и PHPStorm поддерживают множество комбинаций клавиш, зная которые можно ускорить и упростить редактирование текста. Изучить комбинации можно используя сервис Shortcut Foo . Обучение проходит в игровой форме, так что это отличный способ совместить приятное с полезным.

Технологии

Используйте те технологии, которые позволят писать меньше кода для достижения того же результата. Однако помните, что поддержка получаемого кода должна выходить как можно дешевле.

К примеру хорошей практикой является использование sass/less, которые расширяют привычные нам css добавляя такие удобные механизмы, как переменные. После того, как ваши файлы стилей готовы, достаточно запустить программу-процессор, которая переведет sass/less в обычный css.

Использование БЭМ-методологии поможет крупным поектам не погрязнуть в коде верстке. Четкие разделение стилей на отдельные файлы и структуризаия их внутри каталогов позволит тратить меньше времени на поддержку кода. Основные принципы БЭМа можно прочитать здесь. Также существует набор инструментов под названием bem-tools, который позвоялет быстро разворачивать файлы стилей.

Workflow

Отлаженный процесс разработки кода повышает скорость работы и ее качество.

Для обеспечения праллельной работы команды разработчиков используются стоит использовать стандартные средства, такие как git (про успешный git workfow можно прочить здесь). Для координации выполнения задач применяется система багтреккинга, к примеру Jira и Redmine.

Деплой проекта

Для разворачивания готового приложения на боевой среде мы используем Jenkins. Его задача — забрать из репозитория актуальную версию, и после окончания процесса сборки и подготовки файлов она должна вылить результаты на серверы. Для обеспечения этих процессов используется phing.

Остался открытым вопрос подготовки проекта к выливке. Для фронтенда на локальной среде разработки это обычно:

  • Транслирование sass/less в css
  • Контроль зависимостей
  • Конкатенация файлов
  • Проведение автотестов

Для продакшен-версии подготовка также включает в себя:

  • Минификацию файлов
  • Обфускация кода
  • Оптимизацию изображений

Автоматизация всех этих действий — первостепенная задача, которую необходимо решить для организации оптимального процесса разработки.

Для выполнения данных задач мы используем проект Yeoman. Данный инструмент позволяет построить на своей основе весь процесс workflow frontend-разработки. Он реализует все указанные выше пункты.

Разработка с помощью Yeoman

Также  Yeoman позволяет на своей основе построить весь процесс разработки фронтенда. С его помощью можно быстро развернуть структуру папок для типовых проектов. Для этого достаточно в папке проекта ввести команду:

yeoman init

Запустится диалог, после ответов на вопросы которого в каталоге развернутся служебные папки и файлы.

Помимо этого Yeoman позволяет указывать тип проекта.  В  таком случае он подготовит дерево папок и файлов для указанного фреймворка.

Выше было указано про такой удобный инструмент, как Live Edit. Так вот, Yeoman запускает веб-сервер для Ваших приложений с реализацией Live Edit. Для этого нужно вызвать команду:

yeoman server

Через пару секунд откроется окно браузера с запущенным приложением. Теперь любые изменения в html, css или js-файлах будут сразу же отображаться в браузере. Ваши sass-файлы также будут компилироваться в css после каждого их сохранения.

Для реализации процедуры сборки проекта Yeoman использует Grunt. Меняя файл его настроек можно гибко управлять процессами конкатенации, оптимизации и т.п. Запуск сборки выполняется командой.

yeoman build

Для проведения unit-тестов Yeoman использует связку JQunit и PhantomJS. Больше можете прочитать в статье  «Тесты JavaScript и их автоматизация».

После удачного выполнения тестов Yeoman вернет сообщение об успехе. Он создаст папку dist, куда сложит проект, готовый к выливке в production.

Все вместе

Итак, если все собрать воедино, то шаги, из которых состоит workflow разработчика представляются следущими:

  • Разворачивание каркаса проекта с помощью Yeoman.
  • Создание элементов c помощью bem-tools.
  • Написание кода.
  • Сборка и тестирование с помощью Yeoman и средств отладки браузера/IDE.
  • Выливка в репозиторий git.
  • Запуск деплоя на сервере через Jenkins.

Узнать больше

Мы рекомендуем к просмотру видео с потрясающей презентацией Пола Айриша о Yeoman.

Полезные ссылки

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Пожалуйста напечатайте буквы/цифры изображенные на картинке

Please type the characters of this captcha image in the input box