Onboard to “Asynchronous” Layout API — Texture

What is Texture?

Texture or previously known as AsyncDisplayKit is an abstraction layer of UIView which in turn is an abstraction over CALayer. Facebook initially developed Texture and then taken over by Pinterest. As UIView used Main Thread, Texture utilizes Background Thread to initialize and configure the node. Texture use Background Thread to do view calculation, image decoding, and text sizing.

Node, what is that?

Node is an abstraction layer over UIView, and if you know how to use UIKit’s UIView, you surely will quickly understand the node concept. Node shares almost all the attributes and functions with some additions.

You can find shared properties like backgroundColor, ClipToBounds, etc.

All view components of UIKit is built on top UIView, and All Texture component also has the same paradigm (build on top of ASDisplayNode).

Texture Components Equivalent to UIKit Components.

ASLayoutElement Architecture from texturegroup.org

So several terms that maybe could help familiarize to Texture.

Texture Components Equivalent to UIKit Components

Node Containers

ASDisplayNode is built based on UIView, and You can place Texture component on top UIKit. You can create your texture component and add it to your current existing View build on top UIKit.But, Texture provided what it called Node Containers, a container that can contain texture components.

Texture Container Equivalent to UIKit Side

Why we use Node Containers instead of UIKit Equivalent?

“ A node container automatically manages the intelligent preloading of its nodes. This means that all of the Node’s layout measurement, data fetching, decoding, and rendering will be done asynchronously. Among other conveniences, this is why it is recommended to use nodes within a container node. “, Texture Documentation

That means using node container will take all the advantages Texture offer and prevent random blinking when you put Texture Component on UIKit. It’s recommended to use Node Container as its share almost all functions, properties, and behavior to UIKit equivalent.

What it looks like ?

Lets create simple Node Container

class ViewController: ASViewController<ASDisplayNode> {   
   init() {    
      super.init(node: ASDisplayNode())     
      self.node.backgroundColor = .white  
   }   
   required init?(coder aDecoder: NSCoder) { 
      fatalError("init(coder:) has not been implemented")  
   }
}

As you can see it is really familiar with UIViewController.

How do I Layouting Texture? Auto Layout? No, who needs that.

Layouting on UIKit using Auto Layout sometimes can be a mess. We need to determine every constraint very precisely with other components and wind up getting a complicated and hard to maintain code.
Texture provides a straightforward yet sophisticated way to layout our nodes using a declarative way. Based on the CSS FlexBox model, we can easily create simple code and yet maintainable and readable. Let’s take a look below.

node.layoutSpecBlock = {_,_ in     
    return ASWrapperLayoutSpec(layoutElement: self.titleNode)
}

From the code above, LayoutSpec will determine how the layout will work on the node. ASWrapperLayoutSpec is one of many components to determine how layout in Texture will look like. This LayoutSpec will wrap the title node and add that to the node.

Wrap Up

The Texture is an Asynchronous Layout API that utilizes Background Thread to optimize and decrease Main Thread loads. Texture shares a lot of similarity to UIKit, so it will require less time to learn and understand Texture.

So What’s Next? Check out How to Layout on Texture or Let’s Get Our Hand Dirty with Texture