Чек-лист фронтендера при разработке рекламного спецпроекта

Привет! Меня зовут Наташа, я фронтенд-разработчик в отделе рекламных спецпроектов KTS.

В отделе мы делаем множество сервисов в мини-приложениях VK, Одноклассниках, Телеграме, создаём лендинги. Мы делаем как краткосрочные проекты, которые могут длиться 2 недели, так и долгосрочные — сроком работы от года.

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

Эта статья — подсказка, которая помогает не пропустить важные моменты, если ваша команда разрабатывает, тестирует и выпускает проекты на потоке — то есть много и часто. Возможно, эти советы пригодятся и вам.

Наши запущенные проекты:

• Игра для OREO — «Башня из 1000 печенек»

• Игра с голосовым управлением для «Билайн» — «Робозвон»

• Мини-игра в спецпроект с NDA — головоломка «Шкатулка» 

• ВК-Миниапп, с которым работаем уже 5 лет — «СберКот»

• Статья с каталогом готовых механик — и как мы их делали

В статье разберём все этапы разработки приложения: 

• Сетап

  • выбор способа сетапа

  • обновление зависимостей

  • подготовка для работы со всеми членами команды

  • тестовое окружение

• Вёрстка

  • Интерактивные элементы

  • Темизация

• Работа с текстами

• Работа со статикой

• Обработка и сбор ошибок

• Сбор статистики

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

• Раскладка на продакшн

• Запуск в продакшн-среду

• Заключение

Сетап

Выбор способа сетапа проекта

С этого начинается процесс разработки.

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

Мы в спецотделе оформили шаблоны сборок для ускорения разработки. Есть шаблон для сборки мини-приложений ВК и ОК с использованием webpack, шаблоны для лендингов с использованием webpack и vite. 

Можно использовать готовые шаблоны проекта со сборкой:

• create-react-app

• create-next-app

• create-vk-mini-app

Обновление зависимостей

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

Например, мы обязательно проверяем обновления версий наших внутренних библиотек и библиотек VK, так как новые версии с правками и обновлениями выходят часто. 

• Библиотеки VK:

  • vk ui

  • vk bridge

  • vk js

  • vk icons

Подготовка для работы со всеми членами команды

Если на проекте несколько человек, подготовьтесь к совместной работе с коллегами.

Возможно, у вашего коллеги другая операционная система, и ему нужны специфичные настройки для запуска проекта. Например, для запуска webpack-dev-server на Windows нужно предустанавливать библиотеку cross-env и запускать все скрипты, начиная с cross-env. 

На старте разработки собираем базу знаний, где указываем ссылки на:

• техническое задание/описание проекта

• макеты

• прототипы экранов

• ссылки и доступы в приложения для разработки, для тестирования, для продакшна

• проект в Gitlab

• админки и доступы к админке

• ветки дев-окружения

• ветки прод-окружения

• Sentry проекта

Всем членам команды выдаем доступы в соответствии со списком выше.

Тестовое окружение

Ваш проект не будет всегда существовать на localhost, поэтому подготовьте тестовую среду. 

В KTS мы используем раскладку по веткам. При деплое ветки в Gitlab создаётся новый поддомен с названием ветки. Например, если main-ветка проекта разложена по пути https://project-main.companydev.com, тогда для ветки stage путь будет таким: https://project-stage.companydev.com. Gitlab CI/CD настроен так, что для раскладки на дев и прод окружения фронтовых проектов достаточно прописать домен в конфиге .gitlab-ci.yml.

Верстка

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

Интерактивные элементы

Проверяем анимацию состояний. Стандартно для каждого проекта обращаем внимание на анимацию изменений состояний интерактивных элементов при наведении, нажатии, дизейбле:

• кнопки

• селектор

• список с раскрывающимися элементами

• чекбоксы

• радиобаттоны 

Проверяем работу элементов ввода. С ними часто возникают баги на разных устройствах, в особенности в Safari: 

• input

• textarea 

Используем лоадеры для отображения длительности процесса:

• если происходит загрузка контента на страницу, то лоадер показывается, пока контент не подгрузится 

• если происходит запрос на сервер по нажатию на кнопку, лоадер отображается внутри кнопки и одновременно блокируется повторное нажатие на неё. 

Анимируем открытие и закрытие модальных страниц и модальных карточек. 

VK UI. Для мини-приложений используем компоненты из библиотеки VK UI, позволяющие собрать экраны в разделы и анимировать переходы между ними. 

Подробнее про структуру экранов в VK UI можно посмотреть в документации.

Проверяем работу доскролла на iOS и в Safari. Устанавливаем цвет фона тега HTML, равным цвету фона приложения, чтобы при доскролле пользователь не видел дефолтный фон нативного приложения или браузера.

Украшения. Стараемся добавлять различные анимации элементов, например кнопок, фонов. Для лендингов иногда добавляем анимацию появления блоков при скролле.

Темизация

Иногда техническое задание проекта подразумевает темизацию сайта или мини-приложения. 

Темизаций может быть несколько видов:

• поддержка темной и светлой темы

• поддержка разных цветовых схем в зависимости от платформы, где запущено мини-приложение

Например, для VK элементы мини-приложения красят в синие цвета, а для OK в оранжевые цвета. Для темизации мини-приложений с использованием VK UI мы применяем инструменты, которые предоставляет сама библиотека: про цветовую темизацию и про темную и светлую тему подробнее можно посмотреть в документации библиотеки.

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

Работа с текстами

Большинство приложений должны быть не только красивыми, но и информативными, поэтому обработке текстов следует уделять достаточно внимания. Вот несколько пунктов, по которым мы проходим при работе с текстами:

• Проверяем копирайты приложение на адекватность, корректность, опечатки, соответствие ТЗ

• Типографируем тексты. Либо вручную в типографе, либо с использованием плагинов для типографирования, например typograf

• Добавляем в проект оптимальные форматы шрифтов — woff, woff2 для современных браузеров

• Чтобы шрифт не мигал с дефолтного браузерного на загружаемый сайтом, делаем прелоадер файлов со шрифтами. Обычно мигание критично заказчикам, поэтому жертвуем скоростью загрузки приложения в угоду красоте. Мы в спецотделе делаем это в помощью плагина для webpack preload-webpack-plugin:

const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
…
new PreloadWebpackPlugin({
  rel: 'preload',
  include: 'allAssets',
  fileWhitelist: /\.(woff2|woff?)$/,
  as(entry) {
    return /\.(woff2|woff?)$/.test(entry) ? 'font' : 'script';
  },
}),

Тогда в index.html внутри тега head увидим тег link:

<link href="/static/fonts/VKSansDisplay-Bold.woff2" rel="preload" as="font" crossorigin="">

Работа со статикой

Вернёмся к красоте — картинкам и анимациям. 

Для эффективной работы с изображениями:

• Предзагружаем изображения при заходе пользователя в мини-приложение или на конкретную страницу мини-приложения с помощью функции:

const loadImage = async (
  src: string,
  onLoaded: VoidFunction
): Promise<void> =>
  new Promise<void>((resolve) => {
    const curImage = new Image();
    curImage.src = src;
    curImage.onload = () => {
      onLoaded();
      resolve();
    };
    curImage.onerror = () => resolve();
  });
….
loadImage(imageLink, ontLoaded);

• Сжимаем изображения до приемлемого качества с помощью различных сервисов сжатия:

  • https://squoosh.app/

  • https://imagecompressor.com/

• Используем разные размеры и форматы изображения для разных устройств 
  Часто случается, что в макетах изображения нарисованы в векторной графике. Хочется добавить все картинки в формате svg, которые смотрятся одинаково хорошо на всех устройствах, но мы стараемся не переусердствовать с этим. Браузерным движкам тяжело вычислять большие сложные svg и в особенности svg-анимации, поэтому они начинают лагать. Поэтому в большинстве случаев мы отказываемся от использования больших векторных изображений, заменяя их растровыми.
  Для удобства переиспользования svg используем инструмент svgr — преобразование svg в React Component. Преимущества этого способа в короткой записи и в возможности применить к svg-компоненту css и scss классы, не вставляя код svg изображения непосредственно в React компонент. Чтобы подключить к проекту svgr, используем webpack-лоадер @svgr/webpack.
  svg-изображения с суффиксом .c прогоняются через лоадер:
  

{
  test: /\.c\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        memo: true,
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false,
                },
              },
            },
          ],
        },
      },
    },
  ],
},

Затем такие svg можно использовать в компонентах:

import SVGIcon from 'img/icons/example.c.svg';
..
<SVGIcon className=”icon” onClick={onClick} />

Обработка и сбор ошибок

Для удобства использования приложения пользователем обрабатываем и выводим на экран понятные ошибки: при запросах на сервер, при действиях пользователя внутри приложения. 

Для отлова ошибок в компонентах используем предохранители React Error Boundary. В случае возникновения ошибки показываем текст, например «Произошла ошибка» и кнопку «Перезагрузить приложение», по нажатию на которую приложение перезагружается.

Для сбора ошибок используем Sentry. В тикете ошибки отправляем дополнительную информацию: 

• данные об устройстве пользователя

• название метода и/или экрана, где произошла ошибка

• параметры запроса 

• версию сборки приложения

• тип окружения (дев или прод)

Для реализации версионирования и определения, исправлена ли ошибка в новой версии приложения, при инициализации Sentry отправляем текущую версию приложения.

Сбор статистики

Рекламные проекты нужны для увеличения конверсий и привлечения пользователя к продукту.

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

Обычно заказчик сам выбирает инструмент сбора статистики. Но если клиент затрудняется в выборе, мы можем предложить оптимальный вариант. Сейчас мы поддерживаем сбор статистики в Яндекс.Метрику, Top Mail.ru, Google Analytics, VK Retargeting, в собственный сервис сбора статистики. Для проектов в мини-приложениях VK часто используем внутреннюю статистику VK.

Особое внимание надо уделить настройке счётчиков. Как правило, счётчики предоставляют определённый способ работы с SPA-приложениями. Например, в Яндекс.Метрике есть особенности для настройки переходов по страницам.

Обычно для дева создаём тестовые счетчики, чтобы статистика с дева не попадала в прод-счетчики. Перед релизом проверяем, что все события собираются.

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

Проверяем, как пользователи будут взаимодействовать с нашим сервисом.

Закладываемся на открытие приложений в десктопе в браузерах: Chrome, Safari, Firefox, Edge, на открытие в мобильных браузерах в Chrome и Safari, на нативные ВК и ОК приложения для Android и iOS. В каждой системе высоты и отступы мини-приложения разные, поэтому мы используем миксины для определения устройства.

Так как с мобильного телефона ни в браузере, ни в мобильном приложении ВК и ОК нельзя открыть консоль, используем специальную библиотеку eruda, которая эмулирует консоль разработчика.

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

Тестирование проходит в нескольких операционных системах, браузерах, версиях браузеров и в нативных приложениях. Тестировщик обращает внимание на актуальность и корректность ссылок, текстов, изображений. Смотрит, что приложение выполняет все заложенные в него функции. Проверяет работу интерактивных элементов, корректность работы навигации по страницам и модалка по нажатию на браузерные кнопки «Назад» и «Вперед», по системной кнопке на Android и свайпбэку на iOS. Обращает внимание на доскролл до верха страницы при переходе с одной на другую. 

Перед запуском проводим регресс-тестирование.

Раскладка на продакшн

На этом этапе проект готов. Теперь нужно разложить проект в продакшн.

Про технические тонкости раскладки проектов можно рассказать гораздо подробнее, и мы, возможно, расскажем — в отдельной статье. А ниже рассмотрим эту тему верхнеуровнево.

В KTS вся раскладка автоматизирована так, что достаточно добавить в свой проект определенный .gitlab-ci.yaml, в котором прописан импорт yaml-файла, благодаря которому в проект подтягиваются необходимые для раскладки файлы. Если на проекте дефолтная сборка, то разработчику остаётся только в файле .gitlab-ci.yaml установить необходимые переменные окружения, например: 

• ссылка, где разложено API

• ссылка, где будет разложен фронт

• id мини-приложения

В Gitlab настроен pipeline с кнопками, по нажатию на которые запускаются джобы. Таким образом, чтобы разложить проект, нужно нажать на кнопку нужной джобы.

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

После запуска мониторим нагрузку и ошибки в Sentry. При необходимости оперативно увеличиваем мощности и исправляем баги.

Заключение

1. Выберите способ сетапа

2. Проверьте обновления всех библиотек до последней либо нужной вам версии

3. Если на проекте работают несколько человек, подготовьтесь к совместной работе

4. Подготовьте тестовую среду

5. При вёрстке обратите внимание на интерактивные элементы и темизацию

6. При работе с текстами 

   1. проверьте их на адекватность и грамотность

   2. типографируйте

   3. добавьте предзагрузку шрифтов

7. При работе с изображениями

   1. сжимайте изображения

   2. используйте разные форматы

   3. минимизируйте использование сложной векторной графики

8. Для отлова ошибок в компонентах используйте предохранители React Error Boundary, для сбора ошибок — сервис сбора ошибок, например Sentry

9. Уточните у заказчика нужные метрики статистики, и какой сервис будет использоваться для сбора статистики. В случае затруднений предложите оптимальный

10. Проводите тестирование в зависимости от нюансов своего проекта. Мы тестируем в разных системах и браузерах, обращаем внимание на работу интерактивных элементов, вёрстки и методов VK и ОК

11. Перед запуском проверьте все тексты и ссылки на актуальность, проведите последний раунд тестирования.

12. Запустите проект на пользователей и мониторьте состояние приложения.