Family Frontend Meetup #3

Автогенерация функций выборки данных с помощью Orval, переработка логики оптимизации изображений с заменой нашего компонента Picture, обновления Next.js 15 и небольшой бонус – наш топ библиотек, которые упростят поддержку и разработку вашего проекта, а также сэкономят время на его инициализацию.

Как использовать Orval для автоматизации разработки

Долгое время мы создавали функции выборки данных вручную. Внедрение Orval помогло автоматизировать этот процесс с полной типизацией данных payload и response.

В результате нам удалось:

• Сократить время на разработку;

• Убрать ненужные созвоны для постоянных уточнений по проектам;

• Привести документацию практически к идеальному состоянию.

Подробнее про опыт настройки Orval на примере реального проекта мы рассказали в этой статье.

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

Что изменилось в логике работы с изображениями

Ранее для работы с изображениями мы написали компонент Picture, который включал:

• Выбор наиболее подходящего размера изображения;

• Ленивую подгрузку;

• Blur-версию изображения, которая отображается до загрузки.

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

Пример структуры:

Со временем мы обнаружили в Picture следующие недостатки:

• Фронтенд-специалистам приходилось составлять размерную схему изображений для каждого компонента на сайте;

• Для хранения каждой сущности с графикой нужны были объемные структуры с ссылками на изображения, что увеличивало размер хранилища и осложняло работу с ним;

• Компонент использовал дополнительные библиотеки для работы с canvas из-за взаимодействия с форматом base83, необходимым для blur-версии изображения.

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

Поэтому мы решили отказаться от нашего компонента и в корне изменить логику работы.

Мы используем Next.js практически в каждом проекте. Он включает ленивую загрузку, умеет самостоятельно обрезать изображение под нужные размеры и дальше выбирает подходящий вариант. Новая логика предполагает, что мы просто отдаем Next.js изображение, а всё остальное фреймворк делает сам. Кратко опишем, как устроен этот процесс.

Чтобы не загружать заранее подготовленные для разных устройств (tablet, desktop, mobile и т.д.) изображения, мы будем использовать компонент next/image. Он использует параметры deviceSizes и imageSizes в конфигурации Next.js, что позволяет создавать массив изображений с разной шириной. Компонент автоматически генерирует ссылки, в которых с помощью параметра передаётся ширина из массива. Далее браузер делает запрос на сервер Next (обёртка над node.js), а тот уже сжимает изображение до нужного размера и возвращает браузеру.

В next/image можно указывать параметр sizes. Он подсказывает браузеру, какое изображение нужно загрузить в зависимости от ширины экрана. Это позволяет автоматически подбирать наиболее подходящее изображение для текущего устройства, тем самым улучшая производительность. В результате, загружаются картинки нужного размера, а не огромные файлы, которые потом сжимаются на клиенте с потерей качества.

Для создания кастомного загрузчика вместо стандартного, который по умолчанию предлагает Next.js, будем использовать сервис imgproxy. Он позволит быстрее и удобнее генерировать ссылки на изображения на основе заголовков параметров. Это дополнительно оптимизирует загрузку.

Сейчас мы работаем над пошаговой инструкцией для интеграции новой логики в проекты. Так что следите за обновлениями в блоге!