Чтобы регулярно создавать сайты, которые нравятся заказчику, пользователям и самой команде разработки, нужно постоянно улучшать процессы. За 11 лет производства цифровых продуктов мы сформировали определенный подход к работе. Научились своевременно повышать компетенции, быстро погружаться в задачи клиентов, эффективно распределять ресурсы, использовать проверенные решения и профессионально экспериментировать.
В новом редакционном проекте «Разработка сайтов в Uplab» откровенно рассказываем, как управляем проектами, как организуем взаимодействие команд друг с другом и какими инструментами пользуемся. Уже поделились, как работаем на этапе аналитики и проектирования, этапе дизайна, а теперь настал черед этапа frontend-разработки — верстки веб-страниц.
В новом редакционном проекте «Разработка сайтов в Uplab» откровенно рассказываем, как управляем проектами, как организуем взаимодействие команд друг с другом и какими инструментами пользуемся. Уже поделились, как работаем на этапе аналитики и проектирования, этапе дизайна, а теперь настал черед этапа frontend-разработки — верстки веб-страниц.
За что отвечает frontend-разработчик
Frontend-разработчики занимаются версткой — создают структуру гипертекстового документа на основе HTML-разметки, как правило, используя таблицы стилей (CSS) и клиентские сценарии (JS), чтобы элементы дизайна выглядели аналогично макету. Простыми словами frontend-специалисты «оживляют» проекты дизайнеров: добавляют анимацию для удобства и улучшения восприятия, делают макеты интерактивными. Благодаря верстке, веб-страницы можно открыть в браузере и «пощупать» элементы мышкой.
Результат работы — статичные страницы будущего сайта, сверстанные точно по макетам. Мы придерживаемся подхода pixel perfect. После завершения работы frontend-команда передает готовый продукт на следующий этап разработки сайта — backend-специалистам.
Вместе с разметкой страниц сайта, готовых к интеграции (программированию), frontend-разработчики предоставляют дополнительный функционал (виджеты, календари, стилизованные элементы, заменяющие нативные карты, диаграммы и т. п.), а также Style Guide с набором всех функциональных блоков дизайна, размещенных на одной странице верстки. Style Guide позволяет показать, как нужные элементы дизайна, будучи вырванными из контекста, должны выглядеть на странице.
Результат работы — статичные страницы будущего сайта, сверстанные точно по макетам. Мы придерживаемся подхода pixel perfect. После завершения работы frontend-команда передает готовый продукт на следующий этап разработки сайта — backend-специалистам.
Вместе с разметкой страниц сайта, готовых к интеграции (программированию), frontend-разработчики предоставляют дополнительный функционал (виджеты, календари, стилизованные элементы, заменяющие нативные карты, диаграммы и т. п.), а также Style Guide с набором всех функциональных блоков дизайна, размещенных на одной странице верстки. Style Guide позволяет показать, как нужные элементы дизайна, будучи вырванными из контекста, должны выглядеть на странице.
Роли в команде проекта
Команда разработки в Uplab — группа людей, тесно связанных общим рабочим процессом и стремящихся к одной цели — реализовать продукт на высоком уровне в установленные сроки. Поговорим об основных и вспомогательных ролях.
Основные роли
Frontend-разработчик
Основной исполнитель этапа. Берет на себя ответственность за реализацию продукта, обеспечивает надлежащее качество и соблюдение стандартов разработки. Коммуницирует со специалистами, выполняющими вспомогательные роли, для достижения должного результата.
Менеджер проекта
Ставит макрозадачу на верстку всего продукта или отдельных страниц, предоставляет все сопроводительные материалы, достаточно подробно описывает результат и функционал, но без глубокого погружения в технические детали.
Тимлид
Куратор, ментор, наставник команды. Он подсказывает, направляет, но не учит. Его задача — следить за качеством продукта, проводить выборочный аудит кода, помогать коллегам решать трудные технические задачи и принимать сложные решения, которые исполнитель не всегда может самостоятельно принять из-за отсутствия опыта / компетенций или понимания особенностей разработки.
Вспомогательные роли
Backend-разработчик
Frontend-разработчик коммуницирует с backend-разработчиком и выясняет подробности интеграции того или иного функционального блока или страницы, чтобы уменьшить риски, которые может наложить система управления контентом или архитектура (функционал) продукта на этапе интеграции.
Тестировщик
Проверяет работу frontend-разработчика, проводит полноценное тестирование всего продукта или отдельных его частей (страниц). Ищет баги, которые появляются на редких устройствах, разрешениях или имеют вариативную природу.
Автоматизированное тестирование сайта — за и против. С расчетами
Автоматизированное тестирование сайта — за и против. С расчетами
Аналитик-проектировщик
Совместно с frontend-разработчиком обеспечивает должную функциональность интерактивных элементов страниц, правильный порядок их перестроения под разные разрешения.
Дизайнер
Совместно с frontend-разработчиком обеспечивает строгое следование дизайну и соблюдение реализации всех необходимых эффектов, анимаций, перестроений, поведения интерактивных элементов, которые предполагались и фиксировались на этапе дизайна.
Frontend-разработчики Uplab
Основные стадии frontend-разработки
Изучение документации, аналитики и структуры сайта
Frontend-разработчик изучает все материалы сайта, которые имеют отношение к продукту, прямо или косвенно влияют на его функциональность. На данной стадии специалист тесно коммуницирует с аналитиками, backend-разработчиками и дизайнерами, чтобы достичь максимального погружения в проект, осмыслить все тонкости реализации продукта и отдельных его узлов, а также минимизировать возможные риски при передаче продукта на этап интеграции.
Лучше понять задачу помогают созвоны и рабочие встречи с менеджером проекта и дизайнерами, которые готовили макет. Вместе мы обсуждаем, каким должен быть результат, какими хочет видеть страницы заказчик, какие анимации можно использовать. Для поиска лучших решений и просмотра референсов желаемых эффектов, обращаемся к разным тематическим ресурсам: codepen.io, tympanus.net/codrops и др.
Геннадий Иванов
frontend-разработчик
Приемка макетов дизайна
При приемке макетов frontend-разработчик проверяет их на наличие возможных несоответствий и недостающих элементов, а также на соблюдение агентских стандартов, чтобы в дальнейшем избежать трудностей при реализации продукта. По итогу специалист составляет документ со списком недочетов, который один раз передается дизайнерам, прорабатывается ими и возвращается обратно. Затем задачи декомпозируются — разбиваются на более мелкие.
От макетов дизайнеров напрямую зависит результат нашей работы. Благодаря тому, что они подробно прорисовывают все элементы сайта, учитывают различные разрешения (смартфоны, планшеты, десктоп) и состояния (наведение, в фокусе, неактивен), мы максимально точно реализуем изначальную задумку.
Геннадий Иванов
frontend-разработчик
Настройка сборщика
Сборщик построен на Gulp и Webpack, используются шаблонизатор Twig и препроцессор SCSS. Его настройка помогает нам разрабатывать сайты быстро и кроссбраузерно. Повторяющиеся в макетах цвета заносятся в переменные, повторяющиеся в разметке элементы выносятся в отдельные файлы и встраиваются на разных страницах.
Инструменты и технологии:
Шаблонизатор Twig. Позволяет писать «умный» html на входе, а на выходе получать обычный html.
Препроцессор SCSS. Позволяет писать «умные» стили на входе в формате scss, а на выходе также получать обычный css.
JavaScript-компилятор Babel. Позволяет писать актуальный JavaScript-код, который поддерживается только в современных браузерах.
Gulp + Webpack — соединяет все вышеперечисленное в один рабочий механизм.
Инструменты и технологии:
Шаблонизатор 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-разработчик занимается на данной стадии. Если это одностраничное веб-приложение (SPA), то разрабатывается также логика изменения и добавления нового контента без перезагрузки страницы (по ajax).
Инструменты и технологии:
Webstorm. Основной инструмент. Большая IDE с широкими возможностями. Разные разработчики могут пользоваться разными редакторами кода (atom, vs code, sublime text).
Zeplin. Инструмент, который показывает psd- и sketch-макеты в удобном для разработчика виде: с отступами, с возможностью экспорта изображений и показом используемых css-свойств. Аналоги: Avocode, InDesign, Figma.
Squoosh.app. Инструмент для сжатия изображений.
Code Review
Тимлид проверяет код на наличие ошибок, чтобы в будущем он был легко поддерживаемым и несложным в понимании для новых разработчиков, приступающих к работе над проектом. Проверяется не весь код, а только выборочные части.
Тестирование
Тестировщики проводят тестирование готовых страниц и определяют их статус. Если что-то не работает или работает не так, как надо, отправляют страницы обратно frontend-разработчикам на доработку. Затем проверяют дизайнеры: везде ли страницы выглядят так же, как и на макете, правильно ли работают анимации.
Финальные отладка и приемка
Страница, функциональный блок или весь продукт в целом считаются отлаженными, когда все ответственные подтвердили отсутствие проблем и несоответствий.
Frontend-разработчики Uplab
После frontend-разработки следует этап backend — читайте об этом в следующей статье цикла «Разработка сайтов в Uplab».
Комментарии к статье
Комментарии: 0