Layout at Scale with AsyncDisplayKit 2

AsyncDisplayKit 2 introduces a declarative layout API for writing complex, adaptive user interfaces that remain smooth and responsive. Through familiar paradigms like CSS flexbox, the API provides a simple way to describe expressive, composable layouts that adapt to different screen sizes and are fully animatable. In this talk, we’ll take a deep dive into how the layout API works, how Pinterest put it to the test at scale, and how you can implement your own apps with it.

Levi McCallum is the manager of iOS Core Experience at Pinterest — the team working on iOS core platform and frameworks. He is a core contributor to AsyncDisplayKit and deeply passionate about building frameworks that make building fast apps effortless and scalable. Follow him on Twitter @levi.

Originally presented at NSMeetup in SF

Transcript

1. iOS Core Experience — Core Platform & Frameworks Levi McCallum
2. The Team
3. > 50% International
4. One framework for all
5. #PerfGoals
6. AsyncDisplayKit
7. Layout at Scale with AsyncDisplayKit 2
8. Fundamentals Layout API Layout Engine Transitions Agenda 1 2 3 4
9. Fundamentals
10. Core Animation 16.67 ms
11. Core Animation 16.67 ms
12. Core Animation 16.67 ms
13. Core Animation Handle Events 16.67 ms
14. Core Animation Handle Events Commit Transaction 16.67 ms
15. Commit Transaction Layout Display Prepare Commit
16. Commit Transaction Layout Display Prepare Commit Layer measurement and positioning layoutSubviews()
17. Commit Transaction Layout Display Prepare Commit Backing images of layers are drawn
18. Commit Transaction Layout Display Prepare Commit Decode & convert images
19. Commit Transaction Layout Display Prepare Commit Package up layer hierarchy & Send it to render server
20. Commit Transaction Performance Bottlenecks
21. Commit Transaction Performance Bottlenecks Limited to the main thread
22. Commit Transaction Performance Bottlenecks Limited to the main thread CPU & IO bound
23. Commit Transaction Performance Bottlenecks Limited to the main thread CPU & IO bound Text Measurement
24. Commit Transaction Performance Bottlenecks Limited to the main thread CPU & IO bound Text Measurement Image Decoding
25. Core Optimizations Basic principles of AsyncDisplayKit
26. Move CPU & IO bound work off the main thread Core Optimizations Basic principles of AsyncDisplayKit
27. Move CPU & IO bound work off the main thread Perform layout and drawing work ahead of time Core Optimizations Basic principles of AsyncDisplayKit
28. Move CPU & IO bound work off the main thread Perform layout and drawing work ahead of time Retain familiarity with UIKit Core Optimizations Basic principles of AsyncDisplayKit
29. Display Node
30. Display Node Enable layout and drawing on the background
31. Display Node Enable layout and drawing on the background Layout Drawing
32. Display Node Enable layout and drawing on the background Take advantage of multiple cores
33. Display Node Layout Drawing
34. Display Node Layout Drawing
35. Display Node Enable layout and drawing on the background Take advantage of multiple cores Nodes represent a view or layer
36. Display Node Enable layout and drawing on the background Take advantage of multiple cores Nodes represent a view or layer Display Node .view View Layer .layer
37. Display Node Enable layout and drawing on the background Take advantage of multiple cores Nodes represent a view or layer Build entire hierarchies
38. PinNode
39. PinNode class PinNode: ASCellNode { let imageNode = ASNetworkImageNode() let titleNode = ASTextNode() let fromNode = ASTextNode() init(pin: PinModel) { super.init() imageNode.url = pin.imageURL titleNode.attributedText = pin.attributedTitle fromNode.attributedText = pin.attributedFrom addSubnodes(imageNode, titleNode, fromNode) } }
40. PinNode let node = PinNode(PinModel({ … })) node.frame = CGRect( x: 0, y: 0, width: 150, height: 300 ) self.view.addSubview(pin.view)
41. Display Node Layout
42. “This application is modifying the autolayout engine from a background thread” - AutoLayout
43. Designed to feel familiar - sizeThatFits: & layoutSubviews Display Node Layout Before AsyncDisplayKit 2.0
44. Designed to feel familiar - sizeThatFits: & layoutSubviews Two passes Display Node Layout Before AsyncDisplayKit 2.0
45. Measure Pass let node = PinNode(pin) self.view.addSubview(pin.view) let size = node.measure(CGSize(width: 160, height: 250)) node.frame = CGRect(origin: .zero, size: size) Before AsyncDisplayKit 2
46. override func calculateSizeThatFits(constrainedSize: CGSize) -> CGSize { let imageSize = imageNode.measure(constrainedSize) var totalHeight = imageSize.height var insetSize = constrainedSize insetSize.width = insetSize.width - 20 - 20 let fromSize = fromNode.measure(insetSize) totalHeight += 20 + fromSize.height let titleSize = titleNode.measure(insetSize) totalHeight += 20 + titleSize.height return CGSize(width: constrainedSize.width, height: totalHeight) }
47. override func layout() { imageNode.frame = CGRect(origin: .zero, size: imageNode.calculatedSize)‚Àè var fromOrigin = imageNode.frame.origin fromOrigin.y += imageNode.frame.size.height + 20 fromNode.frame = CGRect(origin: fromOrigin, size: fromNode.calculatedSize) var titleOrigin = fromNode.frame.origin titleOrigin.y += fromOrigin.size.height + 20 titleNode.frame = CGRect(origin: titleOrigin, size: titleNode.calculatedSize) } Layout Pass Before AsyncDisplayKit 2
48. Node Containers
49. Node Containers Don’t trigger measure yourself Simple entry point of display nodes in your app ASCollectionView / ASTableView / ASViewController Intelligent preloading
50. Node Containers Don’t trigger measure yourself Simple entry point of display nodes in your app ASCollectionView / ASTableView / ASViewController Intelligent preloading
51. Node Containers Don’t trigger measure yourself Simple entry point of display nodes in your app ASCollectionView / ASTableView / ASViewController Intelligent preloading
52. Node Containers Don’t trigger measure yourself Simple entry point of display nodes in your app ASCollectionView / ASTableView / ASViewController Intelligent preloading
53. PinNode func collectionView(collectionView: ASCollectionView, nodeBlockForItemAtIndexPath indexPath: NSIndexPath) -> ASCellNodeBlock { let pin = pins[indexPath.item] return { return PinNode(pin) } } ASCollectionView Delegate Implementation
54. How then are these things done ahead of time? Intelligent preloading
55. Layout API
56. Layout API
57. Layout API Fast
58. Layout API Fast Asynchronous
59. Layout API Fast Asynchronous Declarative
60. Layout API Fast Asynchronous Declarative Cacheable
61. LayoutSpecs
62. LayoutSpecs Immutable specifications for layout patterns
63. LayoutSpecs Immutable specifications for layout patterns Encapsulate boilerplate math
64. LayoutSpecs Immutable specifications for layout patterns Encapsulate boilerplate math Hierarchically describe frame relationship
65. LayoutSpecs Immutable specifications for layout patterns Encapsulate boilerplate math Hierarchically describe frame relationship Adaptive in nature
66. LayoutSpecs Stacks & Insets & Center & Background & Overlay & Ratio & Absolute &
67. PinNode func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec AsyncDisplayKit 2.0
68. override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec { return ASStackLayoutSpec( direction: .Vertical, spacing: 20.0, justifyContent: .Start, alignItems: .Start, children: [ imageNode, fromNode, titleNode ] ) }
69. override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec { imageNode.style.preferredSize = CGSize(width: 150.0, height: 150.0) return ASStackLayoutSpec( direction: .Vertical, spacing: 20.0, justifyContent: .Start, alignItems: .Start, children: [ imageNode, fromNode, titleNode ] ) }
70. override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec { let ratio = ASRatioSpec(ratio: 1.0, imageNode) return ASStackLayoutSpec( direction: .Vertical, spacing: 20.0, justifyContent: .Start, alignItems: .Start, children: [ ratio, fromNode, titleNode ] ) }
71. override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec { let ratio = ASRatioSpec(ratio: 1.0, imageNode) let inset = ASInsetLayoutSpec( insets: UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20), child: ? ) return ASStackLayoutSpec( direction: .Vertical, spacing: 20.0, justifyContent: .Start, alignItems: .Start, children: [ ratio, inset ] ) }
72. override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec { let ratio = ASRatioSpec(ratio: 1.0, imageNode) let inset = ASInsetLayoutSpec( insets: UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20), child: ASStackLayoutSpec( direction: .Vertical, spacing: 20.0, justifyContent: .Start, alignItems: .Start, children: [ fromNode, titleNode ] ) ) return ASStackLayoutSpec( direction: .Vertical, spacing: 20.0, justifyContent: .Start, alignItems: .Start, children: [ ratio, inset ] ) }
73. Layout Engine
74. LayoutElements
75. LayoutElements ASDisplayNode ASLayoutElement ASLayoutSpec ASLayoutElement
76. LayoutElements ASLayoutElement Protocol to produce an element’s size
77. LayoutElements ASLayoutElement func layoutThatFits(constrainedSize: ASSizeRange) -> ASLayout Protocol to produce layout objects
78. LayoutElements ASLayoutElement func layoutThatFits(constrainedSize: ASSizeRange) -> ASLayout Protocol to produce layout objects Size ASLayout
79. Layout Objects Immutable representation of position and size Size Position ASLayout
80. Layout Objects Immutable representation of position and size Cache and reuse for layout passes Size Position ASLayout Display Node .calculatedLayout .layoutElement
81. Layout Tree Layout objects are hierarchical Size Sublayouts ASLayout Size Position ASLayout Size Position ASLayout
82. Layout Tree Layout objects are hierarchical Describe subnode frames Size Sublayouts ASLayout Size Position ASLayout Size Position ASLayout
83. Layout Tree Layout objects are hierarchical Describe subnode frames Used in the next layout pass Size Sublayouts ASLayout Size Position ASLayout Size Position ASLayout
84. Measure Pass AsyncDisplayKit 2.0
85. 1. LayoutSpec Tree Stack Ratio Inset ImageNode fromNode titleNode Stack .children .child .child .children
86. 2. Layout Tree ASLayout ASLayout ASLayout ASLayout ASLayout ASLayout ASLayout .sublayouts .sublayouts .sublayouts .sublayouts
87. 3. Flatten Layout ASLayout ASLayout ASLayout ASLayout .sublayouts fromNode imageNode titleNode
88. 4. Cache Layout ASLayout ASLayout ASLayout ASLayout .sublayouts PinNode .calculatedLayout .layoutElement
89. Layout Pass AsyncDisplayKit 2.0
90. Layout Pass AsyncDisplayKit 2.0 Completely automatic 1 func layout() { for layout in self.calculatedLayout.sublayouts { if let subnode = layout.element as? ASDisplayNode { subnode.frame = layout.frame } } }
91. Inside Inset Spec
92. class ASInsetSpec: ASLayoutSpec { var insets: UIEdgeInsets override func layoutThatFits(constrainedSize: ASSizeRange) -> ASLayout { return ASLayout( layoutElement: self, constrainedSizeRange: ?, sublayouts: [?] ) } } Inside Inset Spec
93. override func layoutThatFits(constrainedSize: ASSizeRange) -> ASLayout { let childSublayout = self.child.layoutThatFits(insetConstrainedSize) childSublayout.position = CGPoint(x: insets.left, y: insets.top) return ASLayout( layoutElement: self, constrainedSizeRange: ?, sublayouts: [childSublayout] ) }
94. override func layoutThatFits(constrainedSize: ASSizeRange) -> ASLayout { let insetsX = insets.left + insets.right; let insetsY = insets.top + insets.bottom; let insetConstrainedSize = ASSizeRange( min: CGSize(width: constrainedSize.min.width - insetsX, height: constrainedSize.min.height - insetsY), max: CGSize(width: constrainedSize.max.width - insetsX, height: constrainedSize.max.height - insetsY), ) let childSublayout = self.child.layoutThatFits(insetConstrainedSize) childSublayout.position = CGPoint(x: insets.left, y: insets.top) return ASLayout( layoutElement: self, constrainedSizeRange: ?, sublayouts: [childSublayout] ) }
95. let insetConstrainedSize = ASSizeRange( min: CGSize(width: constrainedSize.min.width - insetsX, height: constrainedSize.min.height - insetsY), max: CGSize(width: constrainedSize.max.width - insetsX, height: constrainedSize.max.height - insetsY), ) let childSublayout = self.child.layoutThatFits(insetConstrainedSize) childSublayout.position = CGPoint(x: insets.left, y: insets.top) let computedSize = ASSizeRange(exactSize: CGSize( width: childSublayout.size.width + insets.left + insets.right, height: childSublayout.size.height + insets.top + insets.bottom )) return ASLayout( layoutElement: self, constrainedSizeRange: computedSize, sublayouts: [childSublayout] ) }
96. Custom LayoutSpecs
97. 1 2 Pinterest Grid
98. 2 3 4 6 Pinterest Grid
99. 2 3 4 6 Pinterest Grid 12 column grid
100. Pinterest Grid 12 column grid Custom adaptive unit
101. PIGridLayoutSpec
102. PIGridLayoutSpec Align elements horizontally
103. PIGridLayoutSpec Align elements horizontally Column span 4
104. PIGridLayoutSpec Align elements horizontally Column span Column offset 4
105. PIGridLayoutSpec Align elements horizontally Column span Column offset Trait collection aware 4
106. iPad Multitasking
107. Transitions
108. Animating Layout
109. Direct Frame Animation Animate underlying views directly
110. Direct Frame Animation Animate underlying views directly Large amount of boilerplate
111. Direct Frame Animation Animate underlying views directly Large amount of boilerplate Managing subnode hierarchy was cumbersome
112. LayoutSpec Transitions Animate between layout spec definitions override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec { let field = fieldNode(forState: fieldState) let stack = ASStackLayoutSpec() stack.children = [labelNode, field, progressNode, buttonNode] return stack }
113. LayoutSpec Transitions Animate between layout spec definitions func onPressedNext() { signupNode.fieldState = .Name signupNode.transitionLayout(animated: true) }
114. LayoutSpec Transitions Compares old and new layout tree
115. LayoutSpec Transitions Compares old and new layout tree Animates visual changes with default
116. LayoutSpec Transitions Compares old and new layout tree Animates visual changes with default • Fades out and removes old nodes • Fades in and inserts new nodes
117. LayoutSpec Transitions Compares old and new layout tree Animates visual changes with default • Fades out and removes old nodes • Fades in and inserts new nodes Opt-in via Display Node property self.automaticallyManagesSubnodes = true
118. Auto Managed Subnodes No longer need to call addSubnode or removeFromSupernode
119. Auto Managed Subnodes No longer need to call addSubnode or removeFromSupernode Insertions and deletions determined by LCS diffing of old & new layout trees
120. Auto Managed Subnodes Not just for animations
121. Auto Managed Subnodes Not just for animations signupNode.fieldState = .Password signupNode.setNeedsLayout()
122. Auto Managed Subnodes Not just for animations The layout spec is the description for what’s in the UI signupNode.fieldState = .Password signupNode.setNeedsLayout()
123. Reflections
124. Reflections Design at Scale
125. Reflections Design at Scale Speed and Simplicity
126. Reflections Design at Scale Speed and Simplicity (Declar/Imper)ative
127. Reflections Design at Scale Speed and Simplicity (Declar/Imper)ative New Paradigm
128. asyncdisplaykit.org Try the Beta!
129. asyncdisplaykit.org Try the Beta! asyncdisplaykit.org/slack Join us on Slack