🔢 Компонент List-item в Яндекс 360 поддерживал 272 миллиона возможных комбинаций, но в 80% случаев использовали только 3-4 паттерна
Дима Мандельштам и Лёша Карпенко из Яндекс 360 рассказали как упростили компонент дизайн-системы. Изначально List-item был универсальным: 12 параметров API, sealed-интерфейсы startSlot и endSlot с множеством реализаций. Разработчику приходилось изучать параметры и выбирать реализацию для каждого слота.
Это породило неявные контракты: что произойдет если передать onClick в ListItem и вместе с этим использовать EndSlot.Button со своим onClick? Каждый компонент начал реализовывать собственные обёртки для специфических случаев, появилось дублирование кода и неконсистентность.
Внутри: – Метрика сложности компонента: количество параметров, типы данных, иерархия, sealed-классы получают высокий балл; – Реализовали скрипт через Kotlin Reflection, который динамически заглядывает внутрь sealed-классов и оценивает вес всех состояний; – AST-анализатор просканировал репозитории, собрал статистику вызовов, сгруппировал по набору переданных аргументов; – Выяснили: 80% случаев используют 3-4 устойчивых паттерна, 20% использований это один паттерн с Toggle и None; – Start-slot фактически определяет роль: если аватар, то почти всегда репрезентация пользователя; – Создали специализированные компоненты: List-item-avatar для пользователей, List-item-file для файлов, List-item-data для неинтерактивной информации, List-item-menu для навигации; – Разделили реализацию на два уровня: приватный ListItemBase с общей логикой и публичные компоненты-адаптеры; – Новые компоненты в 3 раза проще оригинального ListItem по формуле расчёта сложности; – Главный урок: декомпозировать компоненты нужно не в момент написания кода, а на этапе проектирования в Figma.
———
💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
В этом посте были ссылки, но мы их удалили по правилам Сетки
