[ВКонтакте API, GitHub, Тестирование веб-сервисов] Бенчмарки VKUI и других ребят из UI-библиотек
Автор
Сообщение
news_bot ®
Стаж: 6 лет 7 месяцев
Сообщений: 27286
Меня зовут Григорий Горбовской, я работаю в Web-команде департамента по экосистемным продуктам ВКонтакте, занимаюсь разработкой VKUI. Хочу вкратце рассказать, как мы написали 8 тестовых веб-приложений, подключили их к моно-репозиторию, автоматизировали аудит через Google Lighthouse с помощью GitHub Actions — и как решали проблемы, с которыми столкнулись.
VKUI — это полноценный UI-фреймворк, с помощью которого можно создавать интерфейсы, внешне неотличимые от тех, которые пользователь видит ВКонтакте. Он адаптивный, а это значит, что приложение на нём будет выглядеть хорошо как на смартфонах с iOS или Android, так и на больших экранах — планшетах и даже десктопе. Сегодня VKUI используется практически во всех сервисах платформы VK Mini Apps и важных разделах приложения ВКонтакте, которые надо быстро обновлять независимо от магазинов.VKUI также активно применяется для экранов универсального приложения VK для iPhone и iPad. Это крупное обновление с поддержкой планшетов на iPadOS мы представили 1 апреля.
Адаптивный экран на VKUIМасштабирование было внушительным — поэтому мы провели аудит, проанализировали проблемы, которые могут возникнуть у нас и пользователей при работе с VKUI, и заодно сравнили свои решения с продуктами ближайших конкурентов.Какие задачи поставили
- Выявить главные проблемы производительности VKUI.
- Подготовить почву, чтобы развернуть автоматизированные бенчмарки библиотеки и наших веб-приложений на основеVKUI.
- Сравнить производительность VKUI и конкурирующих UI-фреймворков.
Технологический стекИнструменты для организации процессов:Чтобы проще взаимодействовать с несколькими веб-приложениями, в которых применяются разные UI-библиотеки, здесь используем lerna. Это удобный инструмент, с помощью которого мы объединили в большой проект ряд приложений с отличающимися зависимостями. Бенчмарки мы проводим через Google Lighthouse — официальный инструмент для измерения Web Vitals. Де-факто это стандарт индустрии для оценки производительности в вебе.Самое важное делает GitHub Actions: связывает воедино сборку и аудит наших приложений.Библиотеки, взятые для сравнения:НазваниеСайт или репозиторийVKUIgithub.com/VKCOM/VKUIMaterial-UImaterial-ui.comYandex UIgithub.com/bem/yandex-uiFluent UIgithub.com/microsoft/fluentuiLightningreact.lightningdesignsystem.comAdobe Spectrumreact-spectrum.adobe.comAnt Designant.designFramework7framework7.io
Мы решили сравнить популярные UI-фреймворки, часть из которых основана на собственных дизайн-системах. В качестве базового шаблона на React использовали create-react-app, и на момент написания приложений брали самые актуальные версии библиотек.Тестируемые приложенияПервым делом мы набросали 8 приложений. В каждом были такие страницы:
- Default — страница с адаптивной вёрсткой, содержит по 2–3 подстраницы.
- На главной находится лента с однотипным контентом и предложением ввести код подтверждения (абстрактный). При его вводе на несколько секунд отображается полноэкранный спиннер загрузки.
- Страница настроек, в которую входит модальное окно с примитивным редактированием профиля и очередным предложением ввести код.
- Страница с простым диалогом — условно, с техподдержкой.
- List (Burn) — страница со списком из 500 элементов. Главный аспект, который нам хотелось проверить: как вложенность кликабельных элементов влияет на показатель Performance.
- Modals — страница с несколькими модальными окнами.
Не у всех UI-фреймворков есть аналогичные компоненты — недостающие мы заменяли на равнозначные им по функциональности. Ближе всего к VKUI по компонентам и видам их отображения оказались Material-UI и Framework7.
Сделать 8 таких приложений поначалу кажется простой задачей, но спустя неделю просто упарываешься писать одно и то же, но с разными библиотеками. У каждого UI-фреймворка своя документация, API и особенности. С некоторыми я сталкивался впервые. Особенно запомнился Yandex UI — кажется, совсем не предназначенный для использования сторонними разработчиками. Какие-то компоненты и описания параметров к ним удавалось найти, только копаясь в исходном коде. Ещё умилительно было обнаружить в компоненте хедера логотип Яндекса <3Вернёмся к нашим приложениям. Когда были написаны первые три, мы начали параллельную работу над автоматизацией аудита:Автоматизация
Краткая блок-схема, описывающая процессы в автоматизацииПодготовили два воркфлоу:
- Build and Deploy — здесь в первую очередь автоматизировали процессы сборки и разворачивания. Используем surge, чтобы быстро публиковать статичные приложения. Но постепенно перейдём к их запуску и аудиту внутри GitHub Actions воркеров.
- Run Benchmarks — а здесь создаётся issue-тикет в репозитории со ссылкой на активный воркфлоу, затем запускается Lighthouse CI Action по подготовленным ссылкам.
UI-фреймворкURL на тестовое приложениеVKUIvkui-benchmark.surge.shAnt Designant-benchmark.surge.shMaterial UImui-benchmark.surge.shFramework7f7-benchmark.surge.shFluent UIfluent-benchmark.surge.shLightninglightning-benchmark.surge.shYandex UIyandex-benchmark.surge.shAdobe Spectrumspectrum-benchmark.surge.sh
Конфигурация сейчас выглядит так:
{
"ci": {
"collect": {
"settings": {
"preset": "desktop", // Desktop-пресет
"maxWaitForFcp": 60000 // Время ожидания ответа от сервера
}
}
}
}
После аудита всех приложений запускается задача finalize-report. Она форматирует полученные данные в удобную сравнительную таблицу (с помощью магии Markdown) и отправляет её комментарием к тикету. Удобненько, да?
Пример подобного репорта от 30 марта 2021 г.Нестабильность результатовНа начальных стадиях мы столкнулись с нестабильностью результатов: в разных отчётах наблюдали сильную просадку баллов, причём всегда у разных приложений. Из отчётов Lighthouse выяснили следующее: по неведомым причинам сервер долго отвечал, и это привело к общему замедлению и снижению баллов. Изначально грешили на воркеры и хостинг в целом, и я решился задеплоить и провести бенчмарки на одном сервере. Результаты стали лучше, но такое странное поведение оставалось нелогичным.
Предупреждения из отчётов Google LighthouseGitHub Actions по умолчанию выполняет задачи параллельно, как и в нашем воркфлоу с бенчмарками. Решение — ограничить максимальное количество выполняющихся одновременно задач:
jobs.<job_id>.strategy.max-parallel: 1
Мы провели бенчмарк дважды, и — вуаля — результаты стали ощутимо стабильнее. Теперь можно переходить к результатам.Результаты от 30 марта 2021 г.VKUI (4.3.0) vs ant:apptype (app link)reportperformancevkui (4.3.0)defaultreport0.99antdefaultreport0.99vkui (4.3.0)modalsreport1 antmodalsreport0.99vkui (4.3.0)listreport0.94 antlistreport0.89
list - У ant нет схожего по сложности компонента для отрисовки сложных списков, но на 0,05 балла отстали.
VKUI (4.3.0) vs Framework7:apptype (app link)reportperformancevkui (4.3.0)defaultreport0.99 f7defaultreport0.98vkui (4.3.0)modalsreport1 f7modalsreport0.99vkui (4.3.0)listreport0.94 f7listreport0.92
list - Framework7 не позволяет вложить одновременно checkbox и radio в компонент списка (List).
VKUI (4.3.0) vs Fluent:apptype (app link)reportperformancevkui (4.3.0)defaultreport0.99 fluentdefaultreport0.94vkui (4.3.0)modalsreport1 fluentmodalsreport0.99vkui (4.3.0)listreport0.94 fluentlistreport0.97
modals - Разница на уровне погрешности.list - Fluent не имеет схожего по сложности компонента для отрисовки сложных списков.
VKUI (4.3.0) vs Lightning:apptype (app link)reportperformancevkui (4.3.0)defaultreport0.99 lightningdefaultreport0.95vkui (4.3.0)modalsreport1lightningmodalsreport1vkui (4.3.0)listreport0.94 lightninglistreport0.99
list - Lightning не имеет схожего по сложности компонента для отрисовки сложных списков.
VKUI (4.3.0) vs mui:apptype (app link)reportperformancevkui (4.3.0)defaultreport0.99 muidefaultreport0.93vkui (4.3.0)modalsreport1 muimodalsreport0.96vkui (4.3.0)listreport0.94 muilistreport0.77
default и modals - Расхождение незначительное, у Material-UI проседает First Contentful Paint.list - При примерно одинаковой загруженности списков в Material-UI и VKUI выигрываем по Average Render Time почти в три раза (~1328,6 мс в Material-UI vs ~476,4 мс в VKUI).
VKUI (4.3.0) vs spectrum:apptype (app link)reportperformancevkui (4.3.0)defaultreport0.99spectrumdefaultreport0.99vkui (4.3.0)modalsreport1spectrummodalsreport1vkui (4.3.0)listreport0.94 spectrumlistreport1
list - Spectrum не имеет схожего по сложности компонента для отрисовки сложных списков.
VKUI (4.3.0) vs yandex:apptype (app link)reportperformancevkui (4.3.0)defaultreport0.99 yandexdefaultreport1vkui (4.3.0)modalsreport1yandexmodalsreport1vkui (4.3.0)listreport0.94 yandexlistreport1
default - Разница на уровне погрешности.list - Yandex-UI не имеет схожего по сложности компонента для отрисовки сложных списков.modals - Модальные страницы в Yandex UI объективно легче.
Выводы из отчёта Lighthouse о VKUI
- VKUI по показателям ± на одном уровне с другими библиотеками. Сильных просадок, как и значительного превосходства, нет.
- Одно из явных проблемных мест — вложенные Tappable — протестированы на большом списке. Единственная библиотека, в которой полноценно реализован этот кейс, — Material-UI. И VKUI уверенно обходит её по производительности.
- Lighthouse ругается на стили — после сборки много неиспользуемых. Они же замедляют First Contentful Paint. Над этим уже работают.
Два CSS-чанка, один из которых весит 27,6 кибибайт без сжатия в gzПланы на будущее vkui-benchmarksПереход с хостинга статики на локальное тестирование должен сократить погрешность: уменьшится вероятность того, что из-за внешнего фактора станет ниже балл у того или иного веб-приложения. Ещё у нас в репортах есть показатель CPU/Memory Power — и он немного отличается в зависимости от воркеров, которые может дать GitHub. Из-за этого результаты в репортах могут разниться в пределах 0,01–0,03. Это можно решить введением перцентилей.Также планируем сделать Lighthouse Server для сохранения статистики по бенчмаркам на каждый релиз.
===========
Источник:
habr.com
===========
Похожие новости:
- [GitHub, Управление проектами, Здоровье, IT-компании, Удалённая работа] GitHub оценил, насколько сильно работу программиста нарушают собрания и прочие отвлекающие факторы
- [Тестирование IT-систем, Тестирование веб-сервисов, Тестирование мобильных приложений, Карьера в IT-индустрии] 7 QA-шных грехов, которые помогут или помешают тестировщику (стать тем, кем ты хочешь)
- [Open source, Экология, IT-компании] Microsoft, GitHub, Accenture и ThoughtWorks при поддержке Linux Foundation основали Фонд экологичного ПО
- [Разработка веб-сайтов, JavaScript, Программирование, GitHub, Игры и игровые приставки] Разработчик сделал Doom Captcha — теперь можно проходить тест на робота играя
- [Тестирование IT-систем, Тестирование веб-сервисов] Управление тестами в TestOps: храните информацию, а не выводы
- [Amazon Web Services, Angular, DevOps] Сам себе DevOps: строим cloud-only CI для веб приложения
- [Google Chrome, Тестирование веб-сервисов] Полезные функции DevTools для тестировщиков
- [Высокая производительность, Программирование, Серверная оптимизация, Машинное обучение, Искусственный интеллект] Quantization Aware Training. Или как правильно использовать fp16 inference в TensorRT
- [Тестирование веб-сервисов, Тестирование мобильных приложений, Монетизация веб-сервисов, Мозг, Здоровье] Веб-сервис для психотерапии депрессии и «болей» в рекламе и маркетинге
- [Информационная безопасность, Open source, GitHub, IT-компании] Microsoft представила SimuLand — тестовую лабораторию для моделирования кибератак
Теги для поиска: #_vkontakte_api (ВКонтакте API), #_github, #_testirovanie_vebservisov (Тестирование веб-сервисов), #_lerna, #_lighthouse, #_github_actions, #_proizvoditelnost (производительность), #_frontendfrejmvorki (фронтенд-фреймворки), #_vkui, #_benchmarks, #_benchmarki (бенчмарки), #_frontend, #_vk, #_blog_kompanii_vkontakte (
Блог компании ВКонтакте
), #_vkontakte_api (
ВКонтакте API
), #_github, #_testirovanie_vebservisov (
Тестирование веб-сервисов
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 28-Сен 07:21
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 7 месяцев |
|
|
Меня зовут Григорий Горбовской, я работаю в Web-команде департамента по экосистемным продуктам ВКонтакте, занимаюсь разработкой VKUI. Хочу вкратце рассказать, как мы написали 8 тестовых веб-приложений, подключили их к моно-репозиторию, автоматизировали аудит через Google Lighthouse с помощью GitHub Actions — и как решали проблемы, с которыми столкнулись.  VKUI — это полноценный UI-фреймворк, с помощью которого можно создавать интерфейсы, внешне неотличимые от тех, которые пользователь видит ВКонтакте. Он адаптивный, а это значит, что приложение на нём будет выглядеть хорошо как на смартфонах с iOS или Android, так и на больших экранах — планшетах и даже десктопе. Сегодня VKUI используется практически во всех сервисах платформы VK Mini Apps и важных разделах приложения ВКонтакте, которые надо быстро обновлять независимо от магазинов.VKUI также активно применяется для экранов универсального приложения VK для iPhone и iPad. Это крупное обновление с поддержкой планшетов на iPadOS мы представили 1 апреля.  Адаптивный экран на VKUIМасштабирование было внушительным — поэтому мы провели аудит, проанализировали проблемы, которые могут возникнуть у нас и пользователей при работе с VKUI, и заодно сравнили свои решения с продуктами ближайших конкурентов.Какие задачи поставили
Мы решили сравнить популярные UI-фреймворки, часть из которых основана на собственных дизайн-системах. В качестве базового шаблона на React использовали create-react-app, и на момент написания приложений брали самые актуальные версии библиотек.Тестируемые приложенияПервым делом мы набросали 8 приложений. В каждом были такие страницы:
 Не у всех UI-фреймворков есть аналогичные компоненты — недостающие мы заменяли на равнозначные им по функциональности. Ближе всего к VKUI по компонентам и видам их отображения оказались Material-UI и Framework7.  Сделать 8 таких приложений поначалу кажется простой задачей, но спустя неделю просто упарываешься писать одно и то же, но с разными библиотеками. У каждого UI-фреймворка своя документация, API и особенности. С некоторыми я сталкивался впервые. Особенно запомнился Yandex UI — кажется, совсем не предназначенный для использования сторонними разработчиками. Какие-то компоненты и описания параметров к ним удавалось найти, только копаясь в исходном коде. Ещё умилительно было обнаружить в компоненте хедера логотип Яндекса <3Вернёмся к нашим приложениям. Когда были написаны первые три, мы начали параллельную работу над автоматизацией аудита:Автоматизация  Краткая блок-схема, описывающая процессы в автоматизацииПодготовили два воркфлоу:
Конфигурация сейчас выглядит так: {
"ci": { "collect": { "settings": { "preset": "desktop", // Desktop-пресет "maxWaitForFcp": 60000 // Время ожидания ответа от сервера } } } }  Пример подобного репорта от 30 марта 2021 г.Нестабильность результатовНа начальных стадиях мы столкнулись с нестабильностью результатов: в разных отчётах наблюдали сильную просадку баллов, причём всегда у разных приложений. Из отчётов Lighthouse выяснили следующее: по неведомым причинам сервер долго отвечал, и это привело к общему замедлению и снижению баллов. Изначально грешили на воркеры и хостинг в целом, и я решился задеплоить и провести бенчмарки на одном сервере. Результаты стали лучше, но такое странное поведение оставалось нелогичным.  Предупреждения из отчётов Google LighthouseGitHub Actions по умолчанию выполняет задачи параллельно, как и в нашем воркфлоу с бенчмарками. Решение — ограничить максимальное количество выполняющихся одновременно задач: jobs.<job_id>.strategy.max-parallel: 1
list - У ant нет схожего по сложности компонента для отрисовки сложных списков, но на 0,05 балла отстали.
list - Framework7 не позволяет вложить одновременно checkbox и radio в компонент списка (List).
modals - Разница на уровне погрешности.list - Fluent не имеет схожего по сложности компонента для отрисовки сложных списков.
list - Lightning не имеет схожего по сложности компонента для отрисовки сложных списков.
default и modals - Расхождение незначительное, у Material-UI проседает First Contentful Paint.list - При примерно одинаковой загруженности списков в Material-UI и VKUI выигрываем по Average Render Time почти в три раза (~1328,6 мс в Material-UI vs ~476,4 мс в VKUI).
list - Spectrum не имеет схожего по сложности компонента для отрисовки сложных списков.
default - Разница на уровне погрешности.list - Yandex-UI не имеет схожего по сложности компонента для отрисовки сложных списков.modals - Модальные страницы в Yandex UI объективно легче.
 Два CSS-чанка, один из которых весит 27,6 кибибайт без сжатия в gzПланы на будущее vkui-benchmarksПереход с хостинга статики на локальное тестирование должен сократить погрешность: уменьшится вероятность того, что из-за внешнего фактора станет ниже балл у того или иного веб-приложения. Ещё у нас в репортах есть показатель CPU/Memory Power — и он немного отличается в зависимости от воркеров, которые может дать GitHub. Из-за этого результаты в репортах могут разниться в пределах 0,01–0,03. Это можно решить введением перцентилей.Также планируем сделать Lighthouse Server для сохранения статистики по бенчмаркам на каждый релиз. =========== Источник: habr.com =========== Похожие новости:
Блог компании ВКонтакте ), #_vkontakte_api ( ВКонтакте API ), #_github, #_testirovanie_vebservisov ( Тестирование веб-сервисов ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 28-Сен 07:21
Часовой пояс: UTC + 5