Throwing Auto Layout out the window

Auto Layout is Apple's recommended technology for building UIs on their platforms. We use a lot of Auto Layout at LinkedIn, but after we ran into some frustrating performance problems, we decided to build and open source our own solution called LayoutKit (http://layoutkit.org). Not only is LayoutKit much faster than Auto Layout, but it is also easier to use because layouts are declarative, immutable, and thread-safe.

Transcript

2. Throwing Auto Layout out the window Nick Snyder Software Engineer at LinkedIn @nickdsnyder
3. Storytime about Auto Layout • How we use it at LinkedIn. • Problems we have encountered. • Why we stopped using it in certain places. • What we are using instead of Auto Layout.
4. The good news • We use a lot of Auto Layout at LinkedIn. • It is powerful and makes it easy to support ◦ Multiple screen sizes ◦ Right to left languages
5. The bad news Auto Layout performance isn’t good enough. • Doesn’t scale to complicated view hierarchies. • Performance regressions in iOS releases. • Unpredictably performance for some layouts.
6. Auto Layout performance regressions ✓ iOS 8 X iOS 9 Label w/barely two lines Right label Required content hugging Required content compression resistance
8. LinkedIn news feed • Hasn’t used Auto Layout for a while (because performance). • Each view implements manual layout code. ◦ Tedious to maintain ◦ Wanted a reusable solution to share with Profile.
9. Requirements for layout solution • Fast (on par with writing layout code manually). • API that is natural to use in a Swift app. • Maintained and have non-trivial adoption. • Open source (debug when things go wrong). • Acceptable license.
10. Available solutions • React Native, AsyncDisplayKit, ComponentKit ◦ Licensing • Few (Last commit over one year ago) • Render (Did not exist. Created May 2016) None of these projects satisfied all of our requirements.
11. Time to build something new...
13. LayoutKit A fast view layout library for iOS, macOS, and tvOS. • How do you use it? • How does it work?
14. High level flow 1. Developer defines a layout using immutable data structures. 2. LayoutKit computes view frames (on a background thread if you want). 3. LayoutKit creates views and assigns frames (on the main thread).
15. Hello world
16. Declaring a layout let image = SizeLayout<UIImageView>( width: 50, height: 50, config: { imageView in imageView.image = UIImage(named: “earth.jpg”) } )
17. Declaring a layout let label = LabelLayout( text: “Hello World!”, alignment: .center )
18. Declaring a layout let stack = StackLayout( axis: .horizontal, spacing: 4, sublayouts: [image, label] )
19. Declaring a layout let helloWorld = InsetLayout( insets: UIEdgeInsets(top: 4, left: 4, bottom: 4, right: 8), sublayout: stack )
20. Using a layout // May be done on a background thread. let arrangement = helloWorld.arrangement() // Must be done on the main thread. arrangement.makeViews(in: rootView)
21. Using a layout // Intrinsic size with no constraints. helloWorld.arrangement()
22. Using a layout // Explicit constraint on width. helloWorld.arrangement(width: 200)
23. Animating a layout // Give animated layouts a viewReuseId let before = SizeLayout( width: 50, height: 50, viewReuseId: “box”) let after = SizeLayout( width: 25, height: 25, viewReuseId: “box”)
24. Animating a layout // Initial layout. before.arrangement().makeViews(in: rootView) // Prepare the animation. let animation = after.arrangement() .prepareAnimation(for: rootView)
25. Animating a layout // Perform the animation. UIView.animate(withDuration: 5.0, animations: animation.apply)
26. Example
27. Swift LayoutKit takes advantage of Swift features to provide a clean API. • Generics • Protocol extensions • Initializer parameters with default values
28. How does LayoutKit work? Layouts Layout Protocol Layout Engine
29. Basic layouts Just math packaged in the Layout protocol • LabelLayout (124 LOC) • SizeLayout (164 LOC) • InsetLayout (39 LOC) • StackLayout (175 LOC) Layouts
30. Custom layouts • Can create a lot of useful layouts by composing and nesting the four basic layouts. • Can create custom layouts by implementing the Layout protocol. Layout Protocol
31. Why is LayoutKit fast? • Not a generic constraint solver. ◦ Specialized algorithm per layout. • Slowest algorithmic complexity is sorting sublayouts by flexibility in StackLayout. ◦ Everything else is O(n). Layout Engine
32. iPhone 6 running iOS 9.3.2 20 cell UICollectionView using UICollectionViewFlowLayout.
34. Immutable data structures Layout objects and all intermediate data structures are immutable. • Thread safety. • Easy to cache and/or precompute. • Easy to debug. Layout Engine
35. Other benefits • Handles right-to-left languages. • Declarative layouts are easy to read, write, compose, and test. • Can prototype layouts quickly in playgrounds. • Supports iOS, macOS, and tvOS. Layout Engine
36. Adoption • Used on certain screens in the main LinkedIn app as well as the Job Search app. • Onboarding engineers has been easy.
37. Open source! • http://layoutkit.org • Apache 2.0 license ◦ No patent shenanigans • Released June 22, 2016 • Today:
38. Credits Thanks to Sergei Taguer, Andy Clark and Peter Livesey for their help.