Итак всем привет меня зовут Миша Как видим на экране сегодня тема текущего доклада это дизайн система Как делать нестандартный UI как вообще работать с на comp и в первую очередь хочу сказать Всем большое спасибо что добрались сегодня в будний день после работы сюда Наверняка вы очень хотите узнать много полезной и информация поверьте Мы хотим донести до вас Точно такую же не менее сильну Итак кому будет полезен сегодняшний доклад в первую очередь будет полезно практикующим Android инженерам кто уже внедряет компо в свою компанию и возможно у вас ещё нет дизайн системы на Jetpack compose Возможно у вас уже есть дизайн система на Jetpack comp но вы чувствуете что есть какие-то сложности с её развитием и есть определённые Заки с реализации какого-то нестандартного U на compose и обо всех трёх проблемах Сегодня поговорим на нашем опыте мы уже съели небольшую Или большую рыбу на этом Ближайшие полгода мы занимались разработкой на compose да меня зовут Михаил Я ведущий Android разработчик в команде coreui Здесь вы можете скачать презентацию там можете Ну там будет ссылка Надин если презентация с первого раза не скачивается то Попробуйте ещ раз на скачать попробовали в докладе будет много текста точнее кода будут картинки так сказать не менее Хардкорный доклад чем у предыдущего докладчика Так что смотрите презентацию если какие-то моменты непонятны вы всегда можете к ним вернуться Итак мы с ребятами в команде занимаемся более д лет разработкой дизайн системы под все приложения теньков мы разработали дизайн систему на VI и последние полгода занимаемся разработкой дизайн те на compose О чём сегодня и пойдёт речь в первую очередь я расскажу про саму дизайн систему теньков UI мы её у себя в узких кругах называем Туй но вы пожалуйста тиков uui а также Расскажу какие проблемы были с дизайн системой V1 мы уже проводили некоторые эксперименты когда начали масштабные переделки Ну и вообще зачем они были нужны расскажу что мы переделали и каким образом это работает сейчас И последнее что мы посмотрим - это дизайн review что там было Может там было всё хорошо и мы с этим сразу поехали впт Ну вот и посмотрим Итак первое теньков UI это универсальная дизайн система для всех приложений Тиньков в первую очередь Она состоит из каких-то базовых вещей это палитра иконки типографика всё то что позволяет нам вообще конструировать какие-то uui компоненты второе что у нас есть - это более 40 компонентов самого разного уровня начиная от самых примитивных кнопок есть компоненты чуть посложнее например карточка там она может содержать уже Более сложный UI какой-то Ну и так далее То есть есть более сложные компоненты там онбординг и тому подобное также в нашей дизайн системе лежат пресеты То есть все вариации дизайнов наших компонентов лежат в нашей дизайн системе Почему сделано именно так потому что дизайнерам на стороне приложений просто нужно зайти к нам и взять оттуда кнопку таким образом все приложения теньков выглядят плюс-минус одинаково консистентной отдельный дизайн для отдельных приложений конечно же есть анимации причём дизайнеры за ними так сильно пекутся что не хотят чтобы на стороне приложений меняли как-то эту суть анимации например чтобы если это была фике да какая-то то она могла только фейди и не выезжать откуда-нибудь там слева направо и мы должны это эту ну эти ограничения обеспечить конечно у нас есть кастомные тени Мы не пользуемся стандартными Андроидов скими тени нас это часть брендбука и мы с этим Живём как можем с этим на самом деле много проблем о которых поговорим чуть позже и дизайн система как я уже говорил уже полностью реализована на вю возможно нам это как-то поможет может быть нет Я пока сам не знаю Сейчас посмотрим в течение доклада Итак 2023 год ко начал приходить активно В теньков к нам пришли два известных приложения мобильный банк и Инвест и говорят ребята мы делаем экраны на compose Мы реально начали затаскивать в продакшн давайте делайте нам дизайн систему мы сказали ну О'кей у нас что-то подобное уже было на тот момент и Давайте же посмотрим что у нас было на тот момент что заставило нас вообще переезжать на дизайн системы V2 почему нас не устраивало V1 первое что в ней было - это тема тема в композе это comp функция которая позволяет передать какой-то набор параметров который может быть использован уже внутри этой темы Ну глобально это могут быть какие-то цвета могут быть какие-то шрифты могут быть тени какие-то специфичные размеры для вашей дизайн Системы ну и в это всё Мы собственно провали с помощью нашей дизайн системы к слову сказать что Тема переехала данном виде текущего варианта и с ней какого-то большого коллапса и проблем не было поэтому можно использовать её ровно так как нам рекомендует материал как сделали мы но что было по поводу компонентов у нас было во-первых 15 по-разному реализованных компонентов у этих компонентов был совершенно разный API огромный набор параметров мы не могли придумать как это всё сделать так чтобы это умеа в пресеты нам было сложно поддерживать бинарную совместимость А поскольку мы платформе инженеры о которых сегодня расскажет Дима то мы поставляем нашу дизайн систему в виде библиотеки и никому не интересно пользоваться библиотекой Если в ней ломается бинарная совместимость как я уже говорил чуть-чуть ранее нам было сложно поддержать пресеты потому что у компонентов был большое количество параметров изза этого пресеты было сделать сложно и как итог всех предыдущих пунктов У нас не было помощи со стороны команд мобильных приложений когда кого-то посылали к нам сделать какой-то компонент Эти люди говорили ну там же ничего не описано документации нет сами делают как хотят и хотят какой-то помощи Ну и собственно это было понятно И поэтому когда мы начали думать над тем Какие должны быть требования к дизайн системе V2 первое что мы вынесли - Это должно быть единообразно и понятно API то есть дизайн система должна выглядеть одинаково у неё плюс-минус должен быть понятный интерфейс у всех компонентов и одинаковым архитектура второе не должна сказываться на производительности Да в композе мы не должны рекомпозиция - это бинарная совместимость мы о ней очень сильно печём и должны обеспечить сами себе дешёвые Бинар совместимые изменения и четвёртое пресеты требования дизайнеров мы должны дать возможность г и давать пресеты и также создавать эти пресеты на основе предыдущих вариантов и первое что мы сделали Как вы думаете что мы посмотрели на материал что вообще придумали за нас Google может быть они придумали какую-то суперскую штуку и мы можем ей вдохновиться Ну давайте Вот кто работал с comp самый примитивный и простой компонент который там есть это кнопка Давайте посмотрим что это такое Что это за компонент первое что не видим Это большой набор параметров в ней есть какие-то шейпы в ней есть отдель цвета есть отдельные параметры для эна для бордеро и как это всё объединить в какой-то один стиль как мы делали в предыдущей в системе Нуне до сих пор не понятно Если честно А второе что здесь есть - это composable Content так вот что такое контент вот Кто делал кнопку на композе думаю понимает о чём я говорю вот сходу непонятно как сделать вот такую шую кнопку У этой кнопки есть текст и есть иконка но как понять как сделать иконку Как сделать Текст какой должен быть отступ от иконки до текста Как сделать отступ от краёв этой кнопки до этого контента всё это конечно же написано в документации Но из разработчиков документацию читает мало кто поэтому к сожалению у меня до сих пор возникают вопросы почему они не сделали перегрузку более простым Ну какие-то более простые перегрузки Теперь давайте чуть-чуть углубит и посмотрим что же за класс такой Button Colors с помощью которого задаются цвета в этой кнопке первое что мы видим встречаем это класс с Internal конструктором этот класс создать во-первых нельзя во-вторых мы ограничены Вот такими Билдер функциями которые ещё и определяют не весь набор параметров Ну получается что это материал полноценная закрытая дизайн система которую Ну просто не засто если 2 Это был интерфейс мы могли его реализовать как хотим то в матери 3 с этим возникают большие проблемы Итого Что можно какие выводы можно сделать из того что мы посмотрели материл первое что мы поняли что он плохо расширяется особенно material 3 версии матери как мы знаем выходит одна за другой Кто здесь дизайнер уже знают том что есть Ну и разработчики в принципе понимают что уже есть 3 с 2 Это совершенно библиотеки не не поддерживаются как-то там совместно и самое важное - это что потребители могут использовать совершенно другой материал нежели бы использовали мы нам бы пришлось тащить две дизайн системы как-то их друг с другом поддерживать Ну и в итоге мы просто поняли что нам лучше пилить комне UI компоненты с самого нуля на основе Jetpack compose Foundation Так мы начали двигаться к какому-то будущему и первое что мы сделали - это посмотрели а Действительно ли используется материал в самих приложениях и оказывается что на тот момент когда мы начали делать вообще масштабные переделки материал уже использовался в конкретных приложениях а именно приложения определяли свои composition локал composition локал - это такие штуки которые позволяют определить глобальный набор параметров которому можно получить доступ внутри определённого скоупа и поняли что наши дизайн система будет делать то же самое то есть мы будем отдавать какие-то глобальные параметры с помощью composition лолов и нам не хотелось чтобы приложения каким-то образом писали этот код повторно и хотели использовать материалов ский код и придумали вот такую интересную штуку во-первых мы подключили материл как compile Only compile only позволяет получить нам как разработчикам доступ к коду материал материал библиотеки но при этом этот код не попадает в ранта то есть с сборкой библиотеки мы вообще не поставляем никакой материал и можем лишь проверить А есть ли у нас материал Вран тайме может быть его подключилось Итак нам Потом пришла ещё более Светлая мысль у нас же есть дизайн система на viw может быть мы сможем просто создать первую версию дизайн системы на comp используя текущую на VI и я ради провёл небольшой эксперимент попробовал сделать вот такую карточку у этой карточки есть хедер и какая-то ячейка с каким-то аватаром там Tile Итак давайте смотреть как это можно сделать с помощью системы Да как как бы выглядела пишка этой карточки на примере хедера мы передаём туда какой-то composable дальше мы создаём пну Android viw у которой создаём Ту самую Android вьюшку которую мы бы хотели за использовать и в функции update делаем следующее на каждый composable который мы передали в аргументах мы создаём compose View которое это этот composable умеет вызывать если соответственно тот composable который мы передали в аргументах n мы удаляем эту comp viw из иерархии и сразу получили достаточно неочевидные минусы такого решения во-первых у нас получилась большая иерархия вложенных вьюк compose viw оказывается под капотом создаёт ещё одно Android viw которая там принимает вызовы от от Android фреймворка и таким образом вместо одной мы получаем две но тут был простой пример а на самом деле в вьюк в этой ячейке гораздо больше там может быть до дети а то и больше и того у нас вместо до дети вьюк получится 20 а второе о чём я сейчас расскажу что у решение compose View compose Очень низкая производительность и я на самом деле слышал об этом до этого но решил проверить сам и сделал вот такой небольшой синтетический тест создал списочек из 500 таких карточек и просто проскролить пользователя приложения что-то скролить и посмотрел на Android профайлер собрал резную сборку ВС Min en единственное что я не получил профайлы потому что не все этим занимаются пока что и получил среднее время фрейма 26 миллисекунд для того чтобы Android работал плавно нам нужно 16 миллисекунд к слову эти результаты Я получил свом собственном девайсе нас s21 который пару лет назад недавним был флагманом Android устройств от нра Samsung Ну и это вызвало печаль мы поняли что сейчас мы сделать на vue системе ничего не сможем и нам нужно делать компо компонента с самого нуля к слову есть recycler viw и вьюшки и там такое решение работает прекрасно и занимает отрисовку всего 4,3 миллисекунды что же на самом деле можно делать с текущей вю системой если она у вас уже есть можно использовать Android ресурсы например дробы различные шрифты всё то что режит в папочке рез спокойно берёте и используете без всяких изощрен делать - это делать viw компоненты на композе Но работает Это быстро только в случае если вы используете recyclerview версии 1.3 там были до версии 1.3 большие проблемы с производительностью о которых Google позаботилась только в версии 1.3 поэтому без проблем если вы делаете уже compose First приложение Вы можете делать какие-то вьюшки на композе в принципе никаких ограничений нет но это не наш вариант потому что у нас уже дизайн система на viw реализована практически полностью поэтому на композе пока делать вьюшки нам не доходило Итак мы начали дизайни нашу замечательную дизайн систему на композе написали несколько классных архитектурных документов Кстати это очень хороший практика Если вы принимаете какие-то решения обязательно их документите так вы можете позже к ним вернуться посмотреть А почему вообще вы решили так делать и здорово сэкономить время первое что мы решили что у нас будет у каждого компонента всего два Интерфейс это appearance и sze мне кажется название говорят сами за себя но Давайте посмотрим что же это за интерфейсы чуть подробнее в интерфейсе appearance лежит Всё что касается внешнего вида компонента это могут быть его цвета это могут быть какие-то спеки анимаций Ну Таким образом мы можем получить там жёлтую кнопку и чёрную кнопку всё предельно понятно у сайза лежит Всё что касается размеров это размеры от иконки до текста размера самого компонента и таким образом скомбинировать эти два варианта мы можем получить например чёрную маленькую кнопку самые внимательные могли заметить Тото использует уже comp проде а почему мы не возвращаем State ведь в материл сделает именно так Ну давайте сначала поймём Зачем вообще Нам нужен State во-первых й удобен для анимации можно использовать стандартные ковкие функции Animate что-то S State и получать например вот такую классную анимацию смена состояния кнопки из enable состояние disable наверное сейчас не особо покажется Ну ладно и решили что во-первых анимация для нас - это что-то внутреннее для компонента поскольку дизайнеры не хотели выдавать что-то лишнее в плане анимации нашим потребителям Мы решили что нужно дать только то что ну можно изменить это могут быть какие-то длительности анимации кривые анимации и так далее а второе Для чего нужен стот Это для того чтобы comp мог трекать места в которых он вызывает эти значения на случае если эти значения поменялись и он мог рекомпозиция выдаёт нам вот такие Билдер функции на каждую функцию в интерфейсе эти Билдер функции принимают соответствующую мду То есть это получился такой своеобразный конструктор который мы используем для создания уже непосредственно стилей и ну сайз сайз и анв второе что мы не забыли сделать нашим коге нам - это генерацию функции копирования чтобы можно было создавать новые ли на базе предыдущего и всё это положили в обычные обк то есть ну решение получилось максимально простым в обх у нас лежат обк мы назвали Соответственно по названиям самих компонентов Например если делаем Button то об называются Button size Button appearance Ну ИКО в конце теперь компонент легко собрать просто используем из этих обв нужные нам пресеты на стороне мобильных приложений и в принципе вот у нас уже получилась кнопка ничего больше писать не надо кода получилось меньше чем Мари у нас получилась небольшая многомодульная структура мы разделили компоненты и их стили по разным модулям то есть сама дизайн система лежит в модуле с дизайн системой сами стили лежат в модуле со стилями и Мы надеемся что саму дизайн систему Мы в скором времени выложим Open Source и Вы точно так же как и мы сможете ий пользоваться и смотреть на то что сделали очень надеемся что это прозой скоро Итак кае промежуточные результаты ну во-первых мы не стали использовать View по соображениям производительности мы реализовали нужный нам inters material Если вам нужен он и вы используете материал сейчас Задумайтесь Возможно эта штука вам тоже пригодится мы выбрали архитектуру для API компонентов которая нам всё ещё не мешает а помогает всё ещё мы не собираем с этим каких-то проблем и мы отделили реализацию компонентов от стилизации что уже как я сказал позволит нам лизнуть эту дизайн систему в Open Source ну супер что осталось осталось Дий RW вот мы сделали несколько компонентов Ну там примерно пять или семь и подумали А давайте-ка мы их за резем чтобы посмотреть вообще как это всё будет выглядеть на стороне приложения Удобно ли пользоваться и здесь для не особо зох взглядов не видно что это не Като ячей а э ячейка с мобильного телефона наложена на ячейку г кажется ВС получилось идеально вот мы Прямо с первого раза сделали ячейку она сразу совпала с фиг Ну и всё в принципе можно рези Ну мы в принципе так и сделали Мы просто релиз нули библиотеку Вот и закончилось у нас дизайн ревю но проходит 2 недели ины мобильных приложений ВИМ КАТО почему-то поехал текст почему-то появился какой-то межбуквенный интервал о котором мы вообще не можем догадываться у нас в дн всё работает нормально дизайнеры точно также не годую никто не понимает что происходит и первое что мы конечно сделали это полезли в марил который уже так нам известен и оказывается что да на стороне мобильных приложений он использовался А ещё там были вот такие две замечательные строчки provide T Style typography Body 1 Вот давайте Проваливай Что такое Body 1 так Проваливай и здесь видим такую замечательную штуку как Letter spacing 0.5 SP то есть материал в композе зачем-то уменьшил межбуквенный интервал наполовину и Это совершенно не вяжется с дизайн системой на viw той же самый материал сделали они это умышленно сделали ли они это специально остатся только гадать Я до сих пор не знаю ответа на этот вопрос Ну вот запомнили что у нас есть какая-то проблема материал нам пройдет какие-то глобальные значения которые подмешивают и в конце я расскажу как это всё дело поправить а второе это почему-то у нас поехали цвета во-первых текст стал чёрным справа А во-вторых если присмотреться я думаю тут не сильно хорошо видно но вот эта звёздочка на аватаре она тусе чем нужно очень странно что такое Почему вообще может что-то туть изза материала Теперь мы догадываемся куда копать и видим в материале такие две замечательные строчки это Local Content Alpha provides Content Alpha High смотрим Что за Content Alpha High это значение 0,87 то есть оказывается если мы используем материалов ские компоненты такими какими они есть и не задаём цвета явно то вот та Альфа которую Пройди материал контент Альфа она будет подшива к каждому компоненту То есть если тексту не задать цвет то он его Цвет будет браться там из Local Content кора и к этому Котен кору ещё помешает афа 0,87 в светлой теме В тёмной теме всё в порядке и исправить эти проблемы можно простым способом с помощью composition Лола определить явно что нам нужно контент Альфа единичка как у нас она была до этого А в текстовый стиль явно задать какой-то собственный в котором нету той проблемы сечас и у него там межбуквенный интервал теперь тот который нужен нам Итак какие мы сделали результаты Ну какие мы сделали выводы исходя из дире во-первых мы поняли что надо избегать материал компонентов И теперь мы делаем сами замены для них чтобы всё у нас работало хорошо во-вторых мы сделали Вывод что это болье зло используем епуб такая штука которая может запровадила значения которые могут повлиять в любой момент на любой на любом этапе вёрстки и чтобы понять где произошли проблемы нужно раскопать этот код и понять что Да у нас там используется composition Local но я думаю никто из нас как разработчик этого не хочет и мы поняли как фиксить все эти проблемы мы просто вносим правки в нашу тему чтобы победить проблемы Mat какие мы сделали итоги за полгода разработки дизайн системы на comp во-первых мы выработали подход к реализации компонентов на comp сейчас мы реализовали уже более п компонентов которые в принципе находятся в проде и до сих пор нас радуют с небольшими багами получили наконец и Source ince Но это говорит о том что просто к нам приходят ребята со стороны мобильных приложений и помогают нам делать компоненты для них это круто они прокачиваются в нам это тоже приносит плюсы потому что мы быстрее делаем нашу дизайн систему и конечно же перестали бояться материл как оказалось Он может принести нам большое количество проблем возможно о которых мы всё ещё не знаем И последнее что я хочу прорекламировать свой предыдущий доклад который делал в прошлом году про саму организацию дизайн системы и если вам интересно о том как вообще у нас высокоуровневые ВВ как мы проектируем нашу дизайн систему как делаем компоненты с ней работают дизайнеры как это всё передаётся в разработку сканируйте QR код приходите домой смотрите доклад менее Хардкорный там уже так по вершка всё будет интересно обязательно Ну и в конце оставлю ссылки на сво свой Telegram на любую другую там на на github на электронную почту заваливается меня любыми вопросами плюс дизайн системы в том что в ней мало чего конфиденциального я могу много о чём вам рассказать всё спасибо за внимание ребята вас а