Речь пойдет о фреймворке под названием Texture (a.k.a AsyncDisplayKit/ASDK). Создатели этого фреймворка пытаются изменить старый синхронный способ работы с UI на современный многопоточный. Спикер расскажет о том, как устроен этот фреймворк, о его преимуществах и недостатках, подводных камнях и реальном опыте использования. После этого доклада все, кто его слушали, смогут создавать приложения на основе Texture и быть уверенными в том, что экран будет обновляться со скоростью 60FPS независимо от сложности UI.

1. a.k.a AsyncDisplayKit
Ковалев Антон
iOS разработчик, Rosberry
Texture

2. 2
Demo

3. Lorem ipsum
dolor sit amet,
consectetur
adipiscing elit.
Maecenas
tincidunt
tempor lorem,
non dapibus
dui dapibus
vitae.
UI в iOS
3

4. UI в iOS
Частота обновления экрана 60 FPS
Теоретическое время отрисовки кадра = 1/60 (16мс)
Фактическое время ~10мс
4
Main thread
16мс0мс 32мс 48мс 64мс 80мс 96мс

5. Frame drops
5

6. AsyncDisplayKit
6
Main thread
Background thread
Background thread
Background thread
Main thread

7. AsyncDisplayKit
7

8. Основной принцип работы
8
.delegate
.layer
View Layer
Main thread only
.delegate
.layer
View Layer
Main thread only
.node
.view
Node
Asynchronous

9. Nodes
9

10. Node containers
ASCollectionNode
ASPagerNode
ASTableNode
ASViewController
ASNavigationController
ASTabBarController
10

11. Intelligent preloading
11

12. Layout engine
Основан на модели CSS Flexbox
Основные понятия:
• Layout Specs
• Layout Elements
12

13. ASStackLayoutSpec
13

14. ASInsetLayoutSpec
14

15. ASOverlayLayoutSpec/ASBackgroundLayoutSpec
15

16. ASCenterLayoutSpec
16

17. ASRatioLayoutSpec
17

18. Layout engine
18

19. Layout engine
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize {
return ...;
}
19

20. Layout engine
-----------------------ASStackLayoutSpec----------------------
| -----ASStackLayoutSpec----- -----ASStackLayoutSpec----- |
| | ASImageNode | | ASImageNode | |
| | ASImageNode | | ASImageNode | |
| --------------------------- --------------------------- |
--------------------------------------------------------------
20

21. Layout engine Sizing
// Relative (%)
ASDimensionMake(@"50%");
ASDimensionMakeWithFraction(0.5);
// Absolute
ASDimensionMake(@"70pt")
ASDimensionMake(70);
ASDimensionMakeWithPoints(70);
21

22. Layout engine Sizing
22

23. Conveniences.Layout engine
.automaticallyManagesSubnodes = true
23

24. Conveniences.Nodes
.hitTestSlop
24

25. Conveniences.Inversion
.inverted = true
25

26. Conveniences.Image Modification Block
backgroundImageNode.imageModificationBlock = { image in
return image.applyBlurWithRadius(30,
tintColor: UIColor(white: 0.5, alpha: 0.3),
saturationDeltaFactor: 1.8,
maskImage: nil)
}
backgroundImageNode.image = someImage
26

27. Conveniences.Placeholders
27

28. Conveniences.Placeholders
.placeholderEnabled = YES
.placeholderFadeDuration = 0.3
28

29. 29
Demo

30. Баг при повороте устройства
30

31. 31
Баг при повороте устройства

32. Objective C / Swift
func toggleLoadingAnimation() {
// swiftlint:disable force_cast
let loaderView = view as! UIActivityIndicatorView
// swiftlint:enable force_cast
if isLoading {
loaderView.startAnimating()
}
else {
loaderView.stopAnimating()
}
}
32

33. Впечатления и выводы
Очень мощный фреймворк
Много плюшек прямо из коробки
Стабильные обновления и релизы
Отзывчивое комьюнити
Невероятно крутой Layout Engine
33

34. Ссылки
http://texturegroup.org/
https://github.com/texturegroup/texture
Ковалев Антон
iOS разработчик
anton.kovalev@rosberry.com
Rosberry
https://vk.com/rosberry