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

Россия+7 (495) 960-65-87
Шрифт:
0 1965

Мы постоянно работаем над улучшением наших продуктов, в том числе партнерских инструментов. Создание идеального виджета — это искусство, и вы можете приобщиться к нему вместе с докладом Игоря Вечканова, программиста Travelpayouts. В рамках Front Fest Moscow Игорь поделился опытом создания пуленепробиваемого виджета. В этом материале вы найдете презентацию доклада, полную видеозапись выступления и короткую выжимку информации.


Виджеты Travelpayouts

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

Виджеты Travelpayouts.jpg

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

При разработке виджета важно учитывать, что он должен быть:

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

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

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

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

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

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

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

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

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

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

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

Это очень простая форма — она может менять цвета и подстраиваться под ширину. В качестве факультатива кандидатам требовалось интегрировать 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 и локализации;
  • Делайте максимально простой код для вставки.

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

Зарегистрируйтесь в Travelpayouts сейчас и получите повышенную комиссию 70% от дохода Travelpayouts сроком на 2 месяца.

Оригинал

(Голосов: 6, Рейтинг: 5)
0
0

Есть о чем рассказать? Тогда присылайте свои материалы в редакцию.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
    Светлана Зубрицкая
    1
    комментарий
    0
    читателей
    Полный профиль
    Светлана Зубрицкая - Нужно убрать пробелы между строк и заменить кавычки на вот такие "
    #SEOnews14: мы празднуем – вы получаете подарки!
    Rizat Sundetov
    1
    комментарий
    0
    читателей
    Полный профиль
    Rizat Sundetov - 14
    Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
    Георгий
    1
    комментарий
    0
    читателей
    Полный профиль
    Георгий - Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html, оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
    Война с дубликатами. Как нужно и как не нужно канонизировать URL
    Ann Yaroshenko
    5
    комментариев
    0
    читателей
    Полный профиль
    Ann Yaroshenko - Дмитрий, добрый день! Если вы проставили на странице с автозапчастями rel=canonical ( а я вижу в коде, что не проставили) или в HTTP хедере, то бот, как правило: выберит ту страницу главной, которую вы указали в rel=canonical ссылке. Eсли же вы этого не сделали, то бот сам выберит оригинал (алгоритмы, по которым бот это делает, скрыты Googl-ом)
    BDD 2019: Как перестать убивать время на сбор и обработку тонны данных для SEO-аудита
    Feth
    1
    комментарий
    0
    читателей
    Полный профиль
    Feth - Тот момент, когда от статьи в интернете получаешь больше полезных знаний и навыков, чем от своего начальства. По статьям нетпиковцев можно учебник про SEO уже сшивать, ребята молодцы. Спасибо, что делитесь информацией.
    «Аудит, чтобы ты заплакала…», или Что делать, когда получил сторонний аудит сайта
    TehotdelSamara@gmail.com
    4
    комментария
    0
    читателей
    Полный профиль
    TehotdelSamara@gmail.com - Артур! Задели своим комментарием "за живое") Абсолютно,... целиком.... и полностью согласны с вами! А именно, с тем, что продажи клиента зависят в первую очередь от клиента, перечисленных вами выше и других факторов! А ещё с тем, что чистое SEO в классическом его понимании зачастую уже не даёт результата в виде роста продаж. Если хотим увеличить продажи - нужно бить по всем фронтам, SEO - только один из них, об этом клиент должен знать и быть предупреждён... Касательно нашей рекомендации смотреть на эффективность по тому, увеличилось ли число и качество заказов или нет - в контексте данной статьи говорится о том, что SEO бывает разное. По большому счёту, результат SEO — это именно привлекаемый поисковый трафик. И этот трафик может быть качественным, целевым или нет. Кроме того, трафик должен расти. Мы говорим о том, что если специалист хорошо проработал семантику, изучил бизнес клиента, исключил фразы с околонулевым спросом и проч., то трафик должен быть целевым, растущим, что значит рост обращений в отдел продаж клиента !при условии! , что само предложение и сайт располагают к тому, чтобы обратиться в отдел продаж клиента. Действительно, современное SEO предполагает учёт значительного количества факторов, в том числе и коммерческих. Без этого и трафика зачастую не будет. Нужно доносить всё это до клиента, включать подобные работы в стоимость по SEO или отдельно. А с "хочу все подряд за 25к в месяц" мы сталкиваемся тоже. Тут только пояснять и подсказывать, давать рекомендации заранее, чтобы клиент заранее был предупреждён о том, что ему требуется сделать параллельно с нашими работами по SEO. И в итоге вся эта деятельность должна привести к росту целевого трафика как на сайт, так и в отдел продаж.
    Как построить качественный ссылочный профиль на основе конкурентов
    Ирина
    7
    комментариев
    0
    читателей
    Полный профиль
    Ирина - Давно сотрудничаю с megaindex.com и считаю данный сервис одним из лучших в сео сегменте рунета да и не только рунета. Пользуюсь их инструментами для аналитики своих работ и выявлению своих и чужих ошибок. Да и ссылочный профиль, как и говорится в данной статье сделать гораздо проще и правильней при помощи как раз мегаиндекса. Добавлю еще что инструмент для поиска конкурентов у мегаиндекса очень удобный и простой в применении.
    Как улучшить репутацию сайта недвижимости с помощью крауд-маркетинга
    Евгений
    2
    комментария
    0
    читателей
    Полный профиль
    Евгений - а у вас какое впечатление от статьи?
    Как я пытался купить CRM-систему, но мне ее поленились продать
    Kristina
    1
    комментарий
    0
    читателей
    Полный профиль
    Kristina - Очень рекомендую CRM-систему польской фирмы Firmao. Все функции настраиваются в соответствии с индивидуальным потребностям компании! Советую попробовать бесплатную демо-версию, чтобы попробовать все необходимые функции, без лишних кнопок и траты дополнительных финансов! :) Сайт: firmao.ru/info
    Как вывести сайт в ТОП 10 Google в 2019 году
    Анна Макарова
    356
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Сергей, в нашей отрасли много заимствований из английского, иногда с ними быстрее, проще .Но будем стараться ))
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    356
    Комментариев
    262
    Комментариев
    249
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    105
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    77
    Комментариев
    71
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55

    Отправьте отзыв!
    Отправьте отзыв!