Игорь Вечканов

Transcript

1. Идеальный виджет Опыт travelpayouts
2. Виджеты
3. Виджеты • Проблемы виджетов; • Тонкости разработки; • Пуленепробиваемый код.
5. Travelpayouts • 5 лет на рынке (до этого были в составе Aviasales); • Более 100 000 аффилиатов; • Более 600 млн ₽ выплат; • 18 634 работающие конфигурации виджета поисковой формы; • Ещё 8 виджетов и вайтлейблы.
6. Виджеты • Легковесные; • Работающие.
7. Отличие от других проектов • Размер; • Агрессивная среда размещения; • Локализации + кастомизируемость; • Время на разработку (но это не точно).
11. Любой разработчик сможет за пару дней сделать виджет на Реакте.
12. Очень простой виджет
13. Какие были проблемы • 200кб дистрибутив; • Неизолированные стили; • Непродуманный код для вставки.
14. Что такое 200кб для виджета? Средний размер по данным HTTPArchive http://bit.ly/2hmIF3r : • 3300кб страница; • 450кб JS gzipped (25 js-файлов); • 10мбит средняя скорость интернета в России; • 6250кб за 5 секунд.
15. Introducing Mewtwo
16. Чего мы смогли добиться • 45кб js + 10кб CSS + 7кб Logo = 55кб + 7кб; • Эффективность, вымученная а/б тестами; • Почти не было жалоб от партнёров после деплоя на 100%.
17. Как уместить виджет в 50kb • NPM as a framework: - Babel-plugin-lodash / submodules / lodash-es; - date-fns / js-joda вместо moment.js ?. • Monkberry.js for templates; • Постоянный контроль итогового размера дистрибутива: - Size Limit; - Webpack bundle analyzer; - jsize.
18. Попытка загрузить виджет быстрее основного контента • Не забывать про async; • Разделение загрузчика и контента; • Монолитный виджет с закешированным конфигом.
19. Конфликты CSS и JS
20. Проблемы с CSS • Коллизия имён классов; • Глобальное переопределение свойств; • Более сильные селекторы.
21. • All initial Не работает в IE и Opera Mini Изолирование стилей #mydiv { all: initial; /* blocking inheritance for all properties */ } #mydiv * { all: unset; /* allowing inheritance within #mydiv */ } #mydiv::before, #mydiv::after, #mydiv *::before, #mydiv *::after { all: unset; } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14.
22. Изолирование стилей • All initial (не работает в IE и Opera Mini); • Iframe (влияет на скорость загрузки).
23. Изолирование стилей • All initial (не работает в IE и Opera Mini); • Iframe (влияет на скорость загрузки); • Shadow DOM (работает в Chrome, Opera и Android).
24. Изолирование стилей • All initial (не работает в IE и Opera Mini); • Iframe (влияет на скорость загрузки); • Shadow DOM (работает в Chrome, Opera и Android); • CSS Modules.
25. Изолирование стилей • All initial (не работает в IE и Opera Mini); • Iframe (влияет на скорость загрузки); • Shadow DOM (работает в Chrome, Opera и Android); • CSS Modules; • CSS-in-JS styled CSS.
26. Изолирование стилей • All initial (не работает в IE и Opera Mini); • Iframe (влияет на скорость загрузки); • Shadow DOM (работает в Chrome, Opera и Android); • CSS Modules; • CSS-in-JS styled CSS; • Наш собственный вариант.
27. Шаг 1 Закрываем стандартные свойства от внешнего мира. Внутри главного враппера виджета нужно нормализовать стили для всех используемых тегов. CSS Normalize, завёрнутый внутрь враппера, плюс секретный кот:
28. div, span, object, nav, h1, h2, h3, p, a, em, img, strong, ul, li, fieldset, form, label, legend, nav, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, footer, header, hgroup, section, input, textarea, select, *::before, *::after, & { float: none; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: none; background-color: transparent; box-shadow: none; vertical-align: baseline; text-align: left; text-indent: 0; text-transform: none; text-shadow: none; white-space: normal; letter-spacing: 0; font: inherit; font-style: normal; font-size: 100%; line-height: 1; position: initial; } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24
29. Шаг 2 Делаем наши свойства сильнейшими. Для того, чтобы получить самые сильные селекторы, используем при сборке в прод PostCSS-importantly.
30. Шаг 3 Избавляемся от коллизий. Для получения уникальных селекторов используем при сборке в прод gulp-class-prefix.
31. Mewtwo Chansey Blissey Ducklett Weedle
32. Что мы сделали • Wrapper CSS reset; • PostCSS Importantly; • gulp-class-prefix. .mewtwo-widget .mewtwo-flights-origin { position: relative!important; min-width: initial!important; max-width: initial!important; display: inline-block!important; margin-right: 1%!important; width: 19%!important; vertical-align: top!important; } 01. 02. 03. 04. 05. 06. 07. 08. 09.
33. • Кастомизируемые цвета в SVG: - Определять их в monk-шаблоне; - CSSX в js. • SVG с логотипами в отдельном файле 7kb. SVG и логотипы
34. Код для вставки Любое усложнение кода приведёт к дополнительным тикетам в поддержку.
35. • script + div#id (div.class, div[role], etc). <div id="widget"></div> <script src="//travelpayouts.com/widget" async></script> Как можно вставить виджет 01. 02.
36. • script + div#id (div.class, div[role], etc); • script. <div id="widget"></div> <script src="//travelpayouts.com/widget" async></script> Как можно вставить виджет 01. 02.
37. Data-attributes <script src="//www.travelpayouts.com/widget" data-width="100%" data-border_radius="2" data-show_logo="true" data- show_hotels="true" async></script> Как передать параметры 01. 02. 03.
38. script?param1=1&param2=2 <script src="//www.travelpayouts.com/widget? width=100%&border_radius=2&show_logo=true&show_hotels=true" async></script> Как передать параметры 01. 02. 03.
39. Inline js params <script> const WidgetParams = { width: '100%', border_radius: 2, show_logo: true, show_hotels:true } </script> <script src="//www.travelpayouts.com/widget" async></script> Как передать параметры 01. 02. 03. 04. 05. 06. 07. 08. 09.
40. Кэшировать выбранные параметры прямо в код виджета по хэшу с возможностью их переопределения инлайновым js Как передать параметры
41. <script charset="utf-8" type="text/javascript"> window.TP_FORM_SETTINGS = window.TP_FORM_SETTINGS || {}; window.TP_FORM_SETTINGS["1d8b372abc912411e4f5d247d117990d"] = { "border_radius": "2", "width": 550, "show_logo": true, "show_hotels": true }; </script> <script charset="utf-8" src="//www.travelpayouts.com/widgets/ 1d8b372abc912411e4f5d247d117990d.js?v=1062" async></script> Как передать параметры 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11.
42. Айфреймы • Полная изоляция контекста; • Отсутствие проблем с кросс-доменными запросами. Плюсы: • Низкая скорость загрузки; • Невозможность выйти за границы айфрейма; • Сложность кастомизации для веб-мастера. Минусы:
43. Айфреймы • Все попапы должны уместиться внутри айфрейма; • Подстраивать высоту айфрейма под высоту контента; • Настроить передачу событий между айфреймом
 и документом.
44. Настройка виджета • Генерация кода для вставки; • Сохранение настроек виджета и сброс кэша; • Обновление демо-виджета
 на лету.
45. Виджеты • Следите за размером дистрибутива; • Изолируйте CSS; • Предотвращайте возможность конфликта версий
 js-библиотек; • Разрабатывайте виджеты, моментально готовые к работе после загрузки; • Помните про iframe и локализации; • Делайте максимально простой код для вставки.
46. Дополнительно по теме Third-Party JavaScript Ben Vinegar and Anton Kovalyov
47. Спасибо за внимание! Игорь Вечканов Front-end developer, travelpayouts igor.vechkanov@aviasales.ru