Как в Uplab разрабатывают сайты. Этап frontend

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

В новом редакционном проекте «Разработка сайтов в Uplab» откровенно рассказываем, как управляем проектами, как организуем взаимодействие команд друг с другом и какими инструментами пользуемся. Уже поделились, как работаем на этапе аналитики и проектирования, этапе дизайна, а теперь настал черед этапа frontend-разработки — верстки веб-страниц.

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

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

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

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

Frontend-разработчик

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

Менеджер проекта

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

Тимлид

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

Backend-разработчик

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

Тестировщик

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

Автоматизированное тестирование сайта — за и против. С расчетами

Аналитик-проектировщик

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

Дизайнер

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

Frontend-разработчики Uplab

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

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

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

Инструменты и технологии:

Шаблонизатор Twig. Позволяет писать «умный» html на входе, а на выходе получать обычный html.

Препроцессор SCSS. Позволяет писать «умные» стили на входе в формате scss, а на выходе также получать обычный css.

JavaScript-компилятор Babel. Позволяет писать актуальный JavaScript-код, который поддерживается только в современных браузерах.

Gulp + Webpack — соединяет все вышеперечисленное в один рабочий механизм.

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

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

Инструменты и технологии:

Webstorm. Основной инструмент. Большая IDE с широкими возможностями. Разные разработчики могут пользоваться разными редакторами кода (atom, vs code, sublime text).

Zeplin. Инструмент, который показывает psd- и sketch-макеты в удобном для разработчика виде: с отступами, с возможностью экспорта изображений и показом используемых css-свойств. Аналоги: Avocode, InDesign, Figma.

Squoosh.app. Инструмент для сжатия изображений.

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

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

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

Frontend-разработчики Uplab

После frontend-разработки следует этап backend — читайте об этом в следующей статье цикла «Разработка сайтов в Uplab».