Как в Uplab разрабатывают сайты. Этап frontend
~10 минут на чтение

Frontend-разработчики занимаются версткой — создают структуру гипертекстового документа на основе HTML-разметки, как правило, используя таблицы стилей (CSS) и клиентские сценарии (JS), чтобы элементы дизайна выглядели аналогично макету. Простыми словами frontend-специалисты «оживляют» проекты дизайнеров: добавляют анимацию для удобства и улучшения восприятия, делают макеты интерактивными. Благодаря верстке, веб-страницы можно открыть в браузере и «пощупать» элементы мышкой.

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

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

Команда разработки в Uplab — группа людей, тесно связанных общим рабочим процессом и стремящихся к одной цели — реализовать продукт на высоком уровне в установленные сроки. Поговорим об основных и вспомогательных ролях.

Основной исполнитель этапа. Берет на себя ответственность за реализацию продукта, обеспечивает надлежащее качество и соблюдение стандартов разработки. Коммуницирует со специалистами, выполняющими вспомогательные роли, для достижения должного результата.

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

Куратор, ментор, наставник команды. Он подсказывает, направляет, но не учит. Его задача — следить за качеством продукта, проводить выборочный аудит кода, помогать коллегам решать трудные технические задачи и принимать сложные решения, которые исполнитель не всегда может самостоятельно принять из-за отсутствия опыта / компетенций или понимания особенностей разработки.

Frontend-разработчик коммуницирует с backend-разработчиком и выясняет подробности интеграции того или иного функционального блока или страницы, чтобы уменьшить риски, которые может наложить система управления контентом или архитектура (функционал) продукта на этапе интеграции.

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

Совместно с frontend-разработчиком обеспечивает строгое следование дизайну и соблюдение реализации всех необходимых эффектов, анимаций, перестроений, поведения интерактивных элементов, которые предполагались и фиксировались на этапе дизайна.

Frontend-разработчик изучает все материалы сайта, которые имеют отношение к продукту, прямо или косвенно влияют на его функциональность. На данной стадии специалист тесно коммуницирует с аналитиками, backend-разработчиками и дизайнерами, чтобы достичь максимального погружения в проект, осмыслить все тонкости реализации продукта и отдельных его узлов, а также минимизировать возможные риски при передаче продукта на этап интеграции.

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

Сборщик построен на Gulp и Webpack, используются шаблонизатор Twig и препроцессор SCSS. Его настройка помогает нам разрабатывать сайты быстро и кроссбраузерно. Повторяющиеся в макетах цвета заносятся в переменные, повторяющиеся в разметке элементы выносятся в отдельные файлы и встраиваются на разных страницах.

Непосредственно сам этап реализации продукта. В конечном виде представляет собой верстку всех страниц дизайна вместе со страницей Style Guide, готовых для передачи последующим звеньям разработки или непосредственно заказчику в виде готового продукта.

«Оживление» макетов дизайнеров, продумывание отображения страниц с разным количеством контента, добавление анимаций, программирование логики в формах (валидация, маски и др.) — всем этим занимается frontend-разработчик занимается на данной стадии. Если это одностраничное веб-приложение (SPA), то разрабатывается также логика изменения и добавления нового контента без перезагрузки страницы (по ajax).

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

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

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