Евгений Ильин – Дизайн-система с BDUI, как готовить

Transcript

1. Ozon Tech 2023
   Дизайн-система с BDUI, как готовить
   Евгений Ильин, ведущий iOS-разработчик
   

   View Slide

2. То есть этого не будет
   Не затронем
   2
   • Принципы и подробности Backend
   Driven UI 🎭
   
   
   • Что такое и зачем нужна дизайн-
   система 🎨
   
   
   • Глубинные детали имплементации 🧩
   
   
   • Как это все продать 💰
   

   View Slide

3. А это будет
   Затронем
   3
   • [мы здесь]
   
   
   • Введение (база) 👨🎓
   
   
   • Что имелось на старте 🎬
   
   
   • Дизайн-система 1.0 💪
   
   
   • Реальность 🥲
   
   
   • Дизайн-система 2.0 🦾
   
   
   • Советы 👨🏫
   
   
   • Q&A 🙋
   

   View Slide

4. Введение
   1
   4
   

   View Slide

5. Где живем
   5
   iOS 🍏
   • BDUI
   
   
   • Навигация на диплинках
   
   
   • 100% Swift
   
   
   • UIKit
   
   
   • Фреймы
   
   
   • iOS 14
   Android 🤖
   • BDUI
   
   
   • Кастовая навигация
   на Android Fragments
   и диплинках
   
   
   • 100% Kotlin
   
   
   • UIKit на CustomView
   
   
   • Android API 24+
   Разработка 🤝
   • ~20 фичевых
   команд
   • ~45 разработчиков
   на платформу
   • ~35+ дизайнеров
   

   View Slide

6. 6
   Как работает
   
   
   Backend-Driven UI
   
   
   на мобильном
   
   
   клиенте
   Владислав Митюкляев
   

   View Slide

7. Древнее зло 👻
   2
   7
   

   View Slide

8. Что имели год назад
   8
   Это oz* цвета Это ресурсы/иконки Это общая структура
   

   View Slide

9. 🥲
   9
   У нас было
   • Два набора ресурсов
   
   
   • ~100 похожих (но разных)
   компонентов
   
   
   • Ручное добавление иконок
   
   
   • Цвета формата oz + какое-то
   название
   

   View Slide

10. Ну что там с цветами?
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    

    View Slide

11. Какими цветами?
    11
    Которые мы вложили в доклад
    .ozWhite1 -> .green
    .ozBgTetriary -> .magenta
    .ozAccentPrimary -> .yellow
    

    View Slide

12. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    

    View Slide

13. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈
    

    View Slide

14. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈
    

    View Slide

15. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈
    

    View Slide

16. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👉
    👉
    👉
    🤨
    

    View Slide

17. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    😊
    👈
    

    View Slide

18. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈
    

    View Slide

19. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈 👈
    🤔
    

    View Slide

20. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈 👈 👈
    

    View Slide

21. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈
    👈
    

    View Slide

22. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈 👉
    🤯
    

    View Slide

23. Булгур? Булгур
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈
    🤑
    

    View Slide

24. Булгур? Булгур
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    😵💫
    

    View Slide

25. И ячейки
    Кнопки
    25
    LargeButton
    
    
    SmallButton
    
    
    SmallButtonWithIcon
    
    
    LargeBorderlessButton
    
    
    SmallBorderlessButton
    
    
    SmallBorderlessButtonWithIcon
    
    
    LargePaymentButton
    
    
    SmallPaymentButton
    
    
    GetButton
    
    
    ResizableSmallButton
    CellWithSubtitle48Icon
    
    
    CellRegularPicker
    
    
    CellRegular24IconPicker
    
    
    CellWithSubtitle24IconPicker
    
    
    CellSmallRegular24IconPicker
    
    
    CellWithSubtitle24IconCheckboxRadio
    
    
    CellWithSubtitle32Icon
    
    
    CellWithSubtitle40Icon
    
    
    CellWithSubtitle40IconCheckboxRadio
    
    
    CellWithSubtitle48IconCheckboxRadio
    
    
    CellWithSubtitleCounter
    
    
    CellWithSubtitle24Icon
    
    
    CellWithSubtitleValue
    
    
    CellWithReverseSubtitleCounter
    
    
    CellWithSubtitleDefault
    
    
    CellWithSubtitleToggle
    
    
    
    

    View Slide

26. Слегка неконтролируемый хаос
    26
    

    View Slide

27. Как швейцарские часы
    План надежный
    1. Переводим рукописи
    
    
    2. Читаем мысли
    
    
    3. Оцениваем переиспользование
    
    
    4. Делаем правильно
    
    
    5. ???
    
    
    6. PROFIT
    27
    Сделаем по-новой
    Переиспользуем?
    Старое ведь переиспользуем?
    

    View Slide

28. Делаем правильно
    3
    28
    

    View Slide

29. Первые шаги
    Что сделали
    29
    • Собрали новую команду 💪🦄 • Репозиторий с токенами 🌈
    

    View Slide

30. 30
    Создаем ячейки
    
    
    на iOS
    HeadHunter
    

    View Slide

31. Вторые шаги
    Что еще сделали
    31
    • Врапперы 🛍
    
    
    • Еще врапперы
    
    
    • Ахаха, врапперы
    
    
    • Плоская иерархия 🌲
    
    
    • Скрываем детали от
    разработчиков 🙈
    враппер
    

    View Slide

32. Да кто эти ваши врапперы
    Врапперы iOS
    32
    👇
    

    View Slide

33. Да кто эти ваши врапперы
    Врапперы iOS
    33
    👇
    

    View Slide

34. Да кто эти ваши врапперы
    Врапперы iOS
    34
    

    View Slide

35. Только одним глазом 👁
    Что внутри
    35
    

    View Slide

36. Другим глазом 👁
    Как еще полезно
    36
    

    View Slide

37. Сделали, а дальше что?
    4
    37
    

    View Slide

38. Что готово, а что нужно
    Ретроспектива
    38
    • Простые компоненты ✅
    
    
    • План работы с врапперами ✅
    
    
    • Токены с автоматикой ✅
    • Интегрированное решение ❌
    
    
    • Внятное тестирование ❌
    
    
    • Простота использования ❌
    
    
    • Хорошо работает с нашими технологиями ❌
    
    
    • И еще что-то, что дальше…
    

    View Slide

39. Сложно найти, легко потерять, невозможно забыть…
    39
    Как было Как стало Что ожидает веб
    

    View Slide

40. См. первый доклад
    Что если без BDUI?
    40
    • Кодовая база ограничена ✅
    
    
    • Отказываться от старого сложно ❌
    
    
    • (но если не нужно, то все хорошо) ✅
    

    View Slide

41. Что поняли
    5
    41
    

    View Slide

42. Ну сейчас точно будет хорошо
    Промежуточные итоги
    42
    Нам нужна 1 ДС
    • Неправильно оценили пару ДС + BDUI 🫡
    
    
    • Немного оверинжиниринг 😵💫
    
    
    • ДС можно разделять по стеку 🔪
    
    
    • Гибкость нужна и важна 🦄
    
    
    • Нужно чуть переосмыслить 🧠
    У нас уже есть ДС
    Без ДС же как-то жили
    Может вообще без ДС?
    Нам нужна 1 ДС
    Нам нужно 2 ДС
    

    View Slide

43. Делаем правильно, а неправильно не делаем
    6
    43
    

    View Slide

44. [x2]
    Что сделали
    44
    • Выявили всех пользователей ДС 🌎
    
    
    • Эволюция, а не революция 🐒🚶
    
    
    • Внедрять новое нужно сразу ❄🎱
    
    
    • Упрощение тестирования 🧪
    

    View Slide

45. У менеджеров экстаз
    Процессы превыше всего
    45
    • Видишь плохой дизайн? 🤨
    
    
    • Убедить, что он не натягивается на ДС 🙅
    
    
    • Спроси дизайнера «за что ты так со мной?» 😿
    
    
    • Поплачь 😭
    
    
    • Попробуй натянуть еще раз 🎬
    
    
    • Приходи жаловаться в канал ДС 🔫
    
    
    • Команда ДС видит плохой дизайн 🙄
    
    
    • Команда ДС берет дизайнера и нависает над его
    грешной душой 👹
    
    
    • Дизайнер все правит 🏃
    
    
    • Разработчик доволен, дизайнер запомнил и больше
    так не будет, ведь душа всего одна 🥳
    

    View Slide

46. На пример бейджей
    Гайдлайны
    46
    

    View Slide

47. Все еще бейджи
    Кастом
    47
    

    View Slide

48. 🥸
    Операция «маппинг/схлоппинг»
    48
    

    View Slide

49. А значит метрики 📊
    Дизайн-система — это продукт
    49
    NPS, Adoption, TTM
    • Спрашиваем мнение коллег 💭
    
    
    • NPS (Net Promoter Score) ☹😌
    
    
    • Adoption 📈
    
    
    • TTM (Time-to-market) ⏱
    
    
    

    View Slide

50. Выводы / советы
    6
    50
    

    View Slide

51. Так можно делать, но можно и не так
    Советы
    51
    • Определите ваших пользователей. Вам нужны
    их ожидания
    
    
    • Оцените, что уже есть, кто этим пользуется и
    какие есть проблемы*
    
    
    • Поможет план развития (и внедрения)
    
    
    • Оверинжинирить интересно и весело, но иногда
    не нужно
    
    
    • Синхронизируйте API
    

    View Slide

52. И так можно делать
    Еще советы
    52
    • Продайте ваш план пользователям
    
    
    • Убедитесь, что план и эффект все поняли
    
    
    • Сделайте кнопки
    
    
    • Покрасьте кнопки
    
    
    • (Опционально) Расскажите о своем неуспехе
    

    View Slide

53. Спасибо за внимание
    Евгений Ильин, ведущий iOS-разработчик
    

    View Slide

54. 54
    Q&A
    

    View Slide