×

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

Россия +7 (495) 139-20-33
Шрифт:
0 2615

Мы постоянно работаем над улучшением наших продуктов, в том числе партнерских инструментов. Создание идеального виджета — это искусство, и вы можете приобщиться к нему вместе с докладом Игоря Вечканова, программиста 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
Кейс: как за 30 дней вывести новый сайт в ТОП выдачи Google
Сергей
2
комментария
0
читателей
Полный профиль
Сергей - Прошёл у Паши курс год назад, пытался продвигать свой сайт portativ.org.ua, но особых продвижений нет. Наверное сео уже умерло??
Как стандартизировать данные семантики с помощью логарифмов
Юлий
1
комментарий
0
читателей
Полный профиль
Юлий - Чем снималась коммерцелизация?
Облако тегов в интернет-магазине: прикладная инструкция по увеличению трафика
Юлия Дмитриева
2
комментария
0
читателей
Полный профиль
Юлия Дмитриева - Согласна с вами, что в любом деле важен индивидуальный подход:)
Специалисты в Рунете заметили глобальную накрутку поведенческих факторов
Дмитрий Кулаевский
1
комментарий
0
читателей
Полный профиль
Дмитрий Кулаевский - кто-нибудь знает как с этим бороться? очень много такого трафа идёт с июля, сайт сильно просел
Платные и бесплатные курсы по SEO и интернет-маркетингу для новичков и опытных специалистов
Алексей Терещенко
1
комментарий
0
читателей
Полный профиль
Алексей Терещенко - Запустил бесплатный марафон для SEO специалистов с нуля в Фейсбуке. Рекомендую начинать совой путь с него и дальше уже определятся, нравится направление или нет. Так же на базе обучающего марафона есть сообщестово в котором все в удобном формате общаются и постигают профессию. Моя миссия - создать сообщество крутых и образованых seo специалистов и поднять качество услуг на высокий уровень. Кому интересно, присоеденяйтесь www.facebook.com/groups/startseofree/
Яндекс возобновил «показательные порки» за накрутку поведенческих факторов
Антон
1
комментарий
0
читателей
Полный профиль
Антон - Никакой не выпал. Кроме клиентского сайта, который проседал из-за скрутки, о чем Я.Поиску сообщали и клиенту тоже. Ноль реакции от поисковика (продолжайте развивать сайт, никаких проблем нет ...). Клиенту надоело и он заказал накрутку у подрядчиков. Мы искренне ждали бана, сообщали об этом клиенту, т.к. мы все таки делаем все остальное для развития. Как итог: с лета полет нормальный. Сайт растет, никаких проблем. Случайно даже стажер палил тех поддержке факт использования накрутки. И ничего. Сайт растет дальше. Если они не могут ничего принять даже после признания факта накрутки, что они могут сделать с жалобами на накрутку конкурентов?! Никогда не одобряли данные методы, но ... похоже ... все работает :)
Сколько стоит SEO на фрилансе. Кейсы
Людмила
1
комментарий
0
читателей
Полный профиль
Людмила - Очень спорная статья. Особенно оценка. К примеру, за 1500 руб. 200 вечных ссылок с быстрой индексацией. Это про какой год? Про 2020? Точно? Собственно, в текущих реалиях при хорошем раскладе за эти деньги можно получить 3-4 качественные ссылки. А никак не 200. Если 200, то такие ссылки, по 7,5 руб. за штуку выбьют сайт за ТОП-100. А заказчик будет в шоке, он же все правильно делал, по инструкции из статьи в уважаемом издании.
«Нет в наличии»: что делать с карточками отсутствующего товара
freyr energy
1
комментарий
0
читателей
Полный профиль
freyr energy - Thank you so much @ admin for share your valuable thoughts and ideas We always enjoy your articles its inspired a lot by reading your articles day by day. So please accept my thanks and congrats for success of your latest series. We hope, you should published more better articles like ever before solar rooftop
Яндекс тестирует оценки сайта в сниппете
Сергей Демин
8
комментариев
0
читателей
Полный профиль
Сергей Демин - вопрос такой: где получить оценку о сайте? а не об организации
15 языков программирования, за знание которых платят выше среднего
Любомир
2
комментария
0
читателей
Полный профиль
Любомир - Ну и ЗП: ни слова о том что она варируеться от 0 до 100 000$ в год!!! Что до высокой зп надо несколько лет етим заниматся! Что 100 000$ в год на западе заробатывают, а где нибудь в азиатских страннах 100$ в год. В СНГ первые годы в разработчика ЗП как в грузчика на складе - это где то 4-5 тыс. долларов в год, и уже имея несколько лет опыта возможно дойти до 10-20 тыс. долларов в год! Почему нет конкретики? Меня лично нервирует то что людям внушают великие ЗП в АйТи, а люди тупые и ведутся!!!!
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
384
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
91
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

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