Litho на практике

5d08ba0cd07942f2ddbf82e5b21ba5e7?s=47 FunCorp
November 13, 2018

Litho на практике

"Litho на практике", Михаил Розумянский, Joom

5d08ba0cd07942f2ddbf82e5b21ba5e7?s=128

FunCorp

November 13, 2018
Tweet

Transcript

  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