Litho на практике

Михаил Розумянский, Joom – MOSDROID #13 Aluminium

Некоторое время назад компания Facebook презентовала библиотеку Litho. С тех пор о ней не так много слышно, примеров использования почти не найти, а разобраться в том, как эта библиотека работает, крайне затруднительно. В этом докладе мы попробуем понять, что побудило Facebook разработать эту библиотеку, какие задачи она решает и каким образом. Но это ещё не всё! Мы также рассмотрим реальные проблемы, с которыми вы, скорее всего, столкнётесь при использовании Litho в реальном проекте, и научимся их обходить.

1. Litho на практике Litho на практике Михаил Розумянский, Joom 1
2. Жизненный цикл View Жизненный цикл View Inflate Configure Measure Layout Draw UI thread 2
3. Как ускорить? Как ускорить? 3
4. Как ускорить? Как ускорить? Оптимизация кода 3
5. Как ускорить? Как ускорить? Оптимизация кода Асинхронное выполнение 3
6. Как ускорить? Как ускорить? Оптимизация кода Асинхронное выполнение Без ощутимой деградации 3
7. Внутри In ate Внутри In ate 4
8. Внутри In ate Внутри In ate Парсинг XML 4
9. Внутри In ate Внутри In ate Парсинг XML Создание View 4
10. Внутри In ate Внутри In ate Парсинг XML Создание View Загрузка ресурсов 4
11. AsyncLayoutInflater Async Inflate Inflate Inflate Exception Callback UI thread BG thread 5
12. Медленный Measure Медленный Measure 6
13. Медленный Measure Медленный Measure TextView создаёт Layout 6
14. Медленный Measure Медленный Measure TextView создаёт Layout Контейнеры вызывают measure() дважды 6
15. Ускоряем Ускоряем TextView TextView Google way Google way 7
16. Ускоряем Ускоряем TextView TextView Google way Google way Создаём PrecomputedText асинхронно 7
17. Ускоряем Ускоряем TextView TextView Google way Google way Создаём PrecomputedText асинхронно Устанавливаем PrecomputedText в TextView 7
18. Ускоряем Ускоряем TextView TextView Hardcore way Hardcore way 8
19. Ускоряем Ускоряем TextView TextView Hardcore way Hardcore way Создаём Layout асинхронно 8
20. Ускоряем Ускоряем TextView TextView Hardcore way Hardcore way Создаём Layout асинхронно Рисуем Layout сами 8
21. Ускоряем ли? Ускоряем ли? Всё в одной View Всё в одной View 9
22. Замедляем Замедляем 10
23. Замедляем Замедляем Анимируется прогресс 10
24. Замедляем Замедляем Анимируется прогресс Отрисовка каждый фрейм 10
25. Замедляем Замедляем Анимируется прогресс Отрисовка каждый фрейм Рисуется всё! 10
26. Display Lists Display Lists 11
27. Display Lists Display Lists Создаются стандартными виджетами 11
28. Display Lists Display Lists Создаются стандартными виджетами Кешируют команды отрисовки 11
29. Display Lists Display Lists Создаются стандартными виджетами Кешируют команды отрисовки Являются приватным API 11
30. Ускоряем контейнеры Ускоряем контейнеры 12
31. Ускоряем контейнеры Ускоряем контейнеры Пишем свои контейнеры 12
32. Ускоряем контейнеры Ускоряем контейнеры Пишем свои контейнеры Используем Constraint Layout* 12
33. А при чём здесь Litho? А при чём здесь Litho? 13
34. Facebook уже всё сделал Facebook уже всё сделал 14
35. Facebook уже всё сделал Facebook уже всё сделал Litho 14
36. Facebook уже всё сделал Facebook уже всё сделал Litho Yoga 14
37. Facebook уже всё сделал Facebook уже всё сделал Litho Yoga Text Layout Builder 14
38. UI UI = = ƒ ƒ ( (@Props @Props, , @State @State) ) 15
39. Компоненты Компоненты Как в React Как в React Props State LayoutSpec или MountSpec Component 16
40. APT процессор APT процессор <Name>Spec <Name> Component Builder 17
41. @LayoutSpec Layout Component Component 1 Component 2 Component N 18
42. @MountSpec или Mount Component Drawable View 19
43. Стандартные компоненты Стандартные компоненты Row Column Text Image SolidColor EditText Progress HorizontalScroll VerticalScroll Spinner Card 20
44. Асинхронные операции Асинхронные операции 21
45. Асинхронные операции Асинхронные операции Создание дерева компонент 21
46. Асинхронные операции Асинхронные операции Создание дерева компонент Загрузка ресурсов 21
47. Асинхронные операции Асинхронные операции Создание дерева компонент Загрузка ресурсов measure и layout 21
48. Другие оптимизации Другие оптимизации 22
49. Другие оптимизации Другие оптимизации Incremental mount 22
50. Другие оптимизации Другие оптимизации Incremental mount Примитивы вместо View 22
51. Другие оптимизации Другие оптимизации Incremental mount Примитивы вместо View Отрисовка в display list 22
52. Ну, покажи уже код! Ну, покажи уже код! 23
53. Rule 34 Rule 34 24
54. Spec для элемента Spec для элемента @LayoutSpec(isPureRender = true) object Rule34ItemSpec { @OnCreateLayout fun onCreateLayout( context: ComponentContext, @Prop white: Boolean, @Prop(resType = ResType.STRING) title: CharSequence ): Component { return Text.create(context) .backgroundColor(if (white) Color.WHITE else Color.BLACK) .text(title) .textColor(if (white) Color.BLACK else Color.WHITE) .build() } } 25
55. Spec для контейнера Spec для контейнера @LayoutSpec(isPureRender = true) object Rule34Spec { @OnCreateLayout fun onCreateLayout context: ComponentContext, @Prop showBlack: Boolean ): Component { val builder = Column.create(context) builder.child(createItem(context, "Rule", white = true)) if (showBlack) { builder.child(createItem(context, "¯\\_( ツ)_/¯", white = false)) } builder.child(createItem(context, "34", white = true)) return builder.build() } } 26
56. createItem() createItem() fun createItem( context: ComponentContext, title: String, white: Boolean ): Component.Builder<*> { return Rule34Item.create(context) .title(title) .white(white) } 27
57. Внутри Внутри Activity Activity private lateinit var lithoView: LithoView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) context = ComponentContext(this) lithoView = LithoView(context) setContentView(lithoView) updateComponent(showBlack = false) } 28
58. createComponent() createComponent() fun updateComponent( context: ComponentContext, showBlack: Boolean ): Component { val component = Rule34.create(context) .title(title) .showBlack(showBlack) .build() lithoView.setComponentAsync(component) } 29
59. Так, а где анимация? Так, а где анимация? 30
60. Внутри Внутри Rule34Spec Rule34Spec @OnCreateTransition fun onCreateTransition( context: ComponentContext, @Prop showBlack: Boolean ): Transition { val whiteTransition = Transition.create("white-1", "white-2") .animate(AnimatedProperties.Y) val blackTransition = Transition.create("black") .animate(AnimatedProperties.X) .appearFrom(DimensionValue.widthPercentageOffset(-100f)) .disappearTo(DimensionValue.widthPercentageOffset(-100f)) return if (showBlack) { Transition.sequence(whiteTransition, blackTransition) } else { Transition.sequence(blackTransition, whiteTransition) } } 31
61. Изменение дерева компонентов Изменение дерева компонентов Column Rule34Item Rule34Item Rule34 Text Text Column Rule34Item Rule34Item Text Rule34Item Rule34 Text Text 32
62. И никаких проблем? И никаких проблем? 33
63. Конечно Конечно 34
64. Конечно Конечно (нет) (нет) 34
65. Litho — это фреймворк Litho — это фреймворк 35
66. Моя борьба Моя борьба 36
67. Моя борьба Моя борьба Компоненты не расширяемы 36
68. Моя борьба Моя борьба Компоненты не расширяемы Нельзя поменять сравнение 36
69. Моя борьба Моя борьба Компоненты не расширяемы Нельзя поменять сравнение Отсутствует* жизненный цикл 36
70. Имитация жизненного цикла Имитация жизненного цикла 37
71. Имитация жизненного цикла Имитация жизненного цикла VisibleEvent 37
72. Имитация жизненного цикла Имитация жизненного цикла VisibleEvent InvisibleEvent 37
73. Если что — сделаю View Если что — сделаю View 38
74. Если что — сделаю View Если что — сделаю View 38
75. Ожидание Ожидание 39
76. Реальность Реальность 40
77. В любой непонятной ситуации В любой непонятной ситуации LithoView.performIncrementalMount() 41
78. Проброс Props Проброс Props 42
79. Проброс Props Проброс Props Явно 42
80. Проброс Props Проброс Props Явно @TreeProp 42
81. Проброс Props Проброс Props Явно @TreeProp @InjectProp 42
82. Явный проброс Явный проброс @Prop @Prop Component Prop 1 Prop 2 Sub Component Prop 2 Sub Sub Component Prop 2 43
83. @TreeProp @TreeProp Component Prop TreeProp Sub Component TreeProp Sub Sub Component TreeProp 44
84. @InjectProp @InjectProp Поддерживаемые DI фреймворки Поддерживаемые DI фреймворки 45
85. Документация? Документация? 46
86. Документация? Документация? Нет, не слышал Нет, не слышал 46
87. Полезные ссылки Полезные ссылки View performance deep dive Litho: A Declarative Framework for Efficient UIs Litho: A Declarative UI Framework for Android Multi-threaded Rendering on Android (with Litho & Infer) Video In News Feed Using Litho https://fblitho.com https://youtu.be/ILtVu2EC6Ec https://developers.facebook.com/FacebookforDevelopers/videos/10154614569978553 https://youtu.be/uzCK4Vnme7o https://youtu.be/YLFusYyehxQ https://www.facebook.com/facebooknyc/videos/10155425215188651 47
88. Что мы получили Что мы получили 48
89. Что мы получили Что мы получили Ускорение UI 48
90. Что мы получили Что мы получили Ускорение UI Простой код 48
91. Что мы получили Что мы получили Ускорение UI Простой код +800 KB 48
92. <Название фреймворка> <Название фреймворка> не решит не решит всех всех ваших проблем! ваших проблем! 49
93. U 50
94. Спасибо за внимание! Спасибо за внимание! MichaelRocks @michaelrocks 51