STOP THE FRAME DROP – Texture (AsyncDisplayKit)

Jan, 19, 2018 • Laurens Wuyts

Categories: iOS

The last couple of days I've been working with Texture (AsyncDisplayKit), it's a cool framework that basically makes your app run more efficiently. It's all about the performance gains. Texture works with nodes which are thread-safe. Unlike views, which can only be used on the main thread. Today I will show you how you can create a really efficient tableView with Texture, and you'll clearly see the performance gains from it. Since Texture keeps expensive UI operations off the main thread it is available to respond to user interactions at any given time.

Below you can see the difference between the two:

video-1
video-2
You can clearly see that the the first image moves smoother than the second one. It's because all images and text fields are rendered in the background instead of the main thread. Texture also makes it easy to add placeholders. The reason you'll want to use placeholders is that it can take a few milliseconds to load the actual views from the background thread.

Installation

To install it you can just use CocoaPods:   Or Carthage:

Usage

First, let's import the dependency:   After that we will create the class itself: There are a few big changes here that probably going to need some explanation:
  1. Instead of creating a UIViewController class we will create an ASViewController class which is a subclass of UIViewController. It does a few things automatically for you like if the view controller goes off screen it will automatically reduce the size of the fetch data and display ranges of any of its children.
  2. A UITableView doesn't exist anymore, we will use an ASTableNode which uses ASTableDataSource and ASTableDelegate. They are very similar to UITableViewDataSource and UITableViewDelegate.
  Conform to ASTableDataSource and ASTableDelegate: As you can see it looks quite the same as before. Instead of an UITableViewCell we will use an ASCellNode and instead of heightForRowAt we will use constrainedSizeForRowAt where you will need to give a range instead of a float.   Create the ASCellNode: Again some big changes that probably going to need some explanation:
  1. Instead of an UIImageView we will use an ASImageNode and instead of an UITextField we will use an ASTextNode.
  2. Instead of addSubview we will use addSubnode.
The cool thing about this is that it's super easy to add placeholders. You can add a color, a fade duration, ... The next part is a little bit more complex and for some can be deal-breaker deciding to use this framework or not. UIKit Auto Layout and InterfaceBuilder are not supported by Texture. You'll have to use their Layout API. Let me show you: It sure has a lot of benefits over UIKit Auto Layout but it's a lot of new stuff. Be sure to check it out in their docs.

Conclusion

It looks really cool and it has huge performance gains. But it can be a disadvantage that UIKit Auto Layout and the InterfaceBuilder are not supported. There is a lot of new stuff that you gonna have to learn but a lot of that looks quite similar than the things you're using right now. If you're interested in it, make sure to check out the documentation.

Continue reading

View all articles

Direkt - DRYNavigationManager made Swifty

The last couple of days I've been working with Texture (AsyncDisplayKit), it's a cool framework that basically makes your app run more efficiently. It's all about the performance gains. Texture works with nodes which are thread-safe. Unlike views, which can only be used[...]

React Native Storybook

The last couple of days I've been working with Texture (AsyncDisplayKit), it's a cool framework that basically makes your app run more efficiently. It's all about the performance gains. Texture works with nodes which are thread-safe. Unlike views, which can only be used[...]

© 2018 AppFoundry