Лекция: Дизайн система и Jetpack Compose

Введение

• Спикер: Михаил, ведущий Android разработчик в команде CoreUI
• Тема: Дизайн система и создание нестандартного UI с использованием Jetpack Compose
• Цель: Поделиться опытом и знаниями по внедрению и развитию дизайн системы на Jetpack Compose

Аудитория

• Полезно для практикующих Android инженеров, работающих с Compose
• Подходит тем, у кого нет дизайн системы или есть сложности с её развитием на Jetpack Compose

Описание ситуации

• Компании Тиньков занимались разработкой на Compose последние полгода
• Разработали дизайн систему на View и экспериментировали с её переносом на Compose

Про дизайн систему Тиньков UI

• Состав:
  • Палитра, иконки, типографика
  • Более 40 компонентов разного уровня
  • Примитивные кнопки, сложные компоненты (карточки, онбординги и т.д.)
  • Пресеты дизайнов компонентов
  • Анимации и кастомные тени
  • Полностью реализована на View

Введение Jetpack Compose

• 2023 год: Переход на Compose в приложениях Тиньков (мобильный банк, Инвест)
• Проблемы с V1:
  • Различные реализации компонентов
  • Огромный набор параметров
  • Сложности с поддержкой бинарной совместимости и пресетов
  • Отсутствие помощи со стороны мобильных команд

Требования к V2

• Единообразный и понятный API
• Не влиять на производительность
• Поддержка бинарной совместимости
• Пресеты и соответствие требованиям дизайнеров

Материал Design System

• Материалы и проблемы:
  • Сложно расширяется
  • Потребители могут использовать разные версии
  • Было решено писать свои компоненты на Jetpack Compose Foundation

Реализация

• Использование composition local для определения глобальных параметров
• Локальное подключение Material через compile only
• Анализ проблемы производительности с View и переход на Compose

Архитектура и структура

• Два интерфейса: appearance и size
• Стили и компоненты разделены по модулям

Промежуточные результаты

• Не использование View по производительности
• Реализация собственной версии Material
• Выделение архитектуры API компонентов
• Отделение реализации компонентов от стилизации

Дизайн ревью и проблемы

• Проблемы с текстом и цветами из-за глобальных значений в Material
• Исправления через composition locals

Итоги

• Разработано свыше 15 компонентов
• Открытый исходный код дизайн системы
• Больше не бояться использовать Material и решены проблемы совместимости

Заключение

• Контакты Михаила (Telegram, GitHub, электронная почта)
• Дополнительные ссылки и QR код на предыдущий доклад Михаила