Frontend опыт Travelpayouts: Как сделать идеальный виджет

Виджеты Travelpayouts

Один из самых популярных виджетов Travelpayouts — поисковая форма Aviasales. Существует более 18 тысяч различных конфигураций данной формы, которые распространены по тысячам сайтов.

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

Легким и быстрым;
Работающим.

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

Отличия разработки виджетов от других проектов

Размер;
Агрессивная среда размещения;
Локализации + кастомизируемость;
Время на разработку.

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

Основные проблемы разработчиков

При приеме в команду Travelpayouts еще одного фронтендера в качестве тестового задания было необходимо сделать простой виджет:

Это очень простая форма — она может менять цвета и подстраиваться под ширину. В качестве факультатива кандидатам требовалось интегрировать pop-up data-picker. Среди работ соискателей встречались дистрибутивы по 200 кб, что было неприемлемо, помимо этого были и другие проблемы:

Неизолированные стили;
Непродуманный код для вставки.

Как уместить виджет в 50Кб

Форма авиабилетов и отелей — это главный виджет компании. Это то, что большинству пользователей хочется установить в первую очередь сразу после регистрации. Продукт был разработан 1,5 года назад, после чего вносились лишь небольшие изменения и в целом код работает максимально стабильно. Разработчикам удалось добиться следующих результатов:

45кб js + 10кб CSS + 7кб Logo = 55кб + 7кб;
Эффективность, вымученная а/б тестами;
Почти не было жалоб от партнёров после деплоя на 100%.

Размер 55-62 Кб — это показатель после Gzip сжатия. Предыдущая версия, созданная 4 года назад, весила около 100Кб. Небольшого размера удалось добиться благодаря отказу от использования фреймворков. Для создания использовался NPM. Благодаря Babel-plugin-lodash / submodules / lodash-es можно подключить лишь те библиотеки, которые действительно используются при работе. Размер можно снизить еще, если использовать date-fns / js-joda вместо moment.js, так как они обладают модульностью. При разработке используется шаблонизатор Monkberry.js, который разработан внутри Aviasales, но сейчас доступен для всех. Чтобы оставаться в рамках 50 килобайт необходимо проводить постоянный контроль итогового размера дистрибутива, в этом помогает:

Size Limit;
Webpack bundle analyzer;
Jsize.

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

Проблемы с CSS

При разработке необходимо учитывать особенности CSS. Со стилями связаны следующие проблемы:

Коллизия имён классов;
Глобальное переопределение свойств;
Более сильные селекторы.

Все это может разломать форму на сайте партнера. Чтобы избежать этих проблем необходимо изолировать стили.

Код для вставки

Любое усложнение кода приводит к дополнительным запросам в службу поддержки. Вместо связки script + div#id остановились лишь на скрипте. Это избавило вебмастера от необходимости думать, где в собственном коде расположить блоки. Оптимальный способ передачи параметров — кэшировать выбранные параметры прямо в код виджета по хэшу с возможностью их переопределения инлайновым js. Айфреймы выглядят как хорошее решение, так как обладают полной изоляцией контента и отсутствием проблем с кросс-доменными запросами, но при этом у них есть и минусы:

Низкая скорость загрузки;
Невозможность выйти за границы айфрейма;
Сложность кастомизации для вебмастера.

Настройка виджета

Требуется создать генератор, чтобы у пользователя была удобная возможность задать настройки. Генератор включает в себя:

Настройки;
Демо-виджет;
Код для вставки.

Нужно сделать обновление демо-виджета на лету.

Советы, как сделать идеальный виджет

Следите за размером дистрибутива;
Изолируйте CSS;
Предотвращайте возможность конфликта версий js-библиотек;
Разрабатывайте виджеты, моментально готовые к работе после загрузки;
Помните про iframe и локализации;
Делайте максимально простой код для вставки.

С полной версией презентации можно ознакомиться ниже:

Frontend опыт Travelpayouts, как сделать идеальный виджет