Panda

What is Panda

Panda is an asynchronous render and layout framework which can be used to achieve high performance tableview.

Panda is combined by 3 different component:

1. Cassowary. Core algorithm for constraint solving
2. Layoutable. API for 'AutoLayout'
3. Panda. Asynchronous display node.

Why use Panda

When it comes to asynchronous render,many developr will think about Texture or AsyncDisplayKit, In facet, Panda learned a lot from Texture, Panda's render process can be seen as a simplfy version of Texture. But Panda does have it's advantages.Panda use AutoLayout for frame caculating which makes it easy to learn compared to Texture's Flexbox for iOS developer.Panda is more lightweighted and it's usage is more close to system's API,it just cost little to integration. So,if you love Swift,love AutoLayout ,want a high fps tableview and do't want to cost too much,Panda is for you.

Feature

• Asynchronously render view
• AutoLayout similar API with background thread usage ability
• Comparable with existing UIView subclass
• High performance
• Pure Swift implement

Demo

visit PandaDemo for a full demonstration

Requirements

• iOS 8.0+
• Swift 4.2
• Xcode 10.0

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. Install it with the following command:

$ gem install cocoapods

To integrate Panda into your Xcode project using CocoaPods, specify it to a target in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

target 'MyApp' do
  # your other pod
  # ...
  pod 'PandaKit'
end

Then, run the following command:

$ pod install

open the {Project}.xcworkspace instead of the {Project}.xcodeproj after you installed anything from CocoaPods.

For more information about how to use CocoaPods, see this tutorial.

Carthage

Carthage is a decentralized dependency manager for Cocoa application. To install the carthage tool, you can use Homebrew.

$ brew update
$ brew install carthage

To integrate Panda into your Xcode project using Carthage, specify it in your Cartfile:

github "https://github.com/nangege/Panda" "master"

Then, run the following command to build the Panda framework:

$ carthage update

At last, you need to set up your Xcode project manually to add the Panda,Layoutable and Cassowary framework.

On your application targets’ “General” settings tab, in the “Linked Frameworks and Libraries” section, drag and drop each framework you want to use from the Carthage/Build folder on disk.

On your application targets’ “Build Phases” settings tab, click the “+” icon and choose “New Run Script Phase”. Create a Run Script with the following content:

/usr/local/bin/carthage copy-frameworks

and add the paths to the frameworks you want to use under “Input Files”:

$(SRCROOT)/Carthage/Build/iOS/Panda.framework
$(SRCROOT)/Carthage/Build/iOS/Layoutable.framework
$(SRCROOT)/Carthage/Build/iOS/Cassowary.framework

For more information about how to use Carthage, please see its project page.

Usage

1. Basic

import both Panda and Layoutable,than just write like UIKit

import Panda
import Layoutable

// initiallize 
let node = ViewNode()
let textNode = TextNode()

// addSubnode
node.addSubnode(textNode)

// update properties
textNode.text = "test"
node.backgroundColor = .red


// Layout
node.size = (100,100)
textNode.center = node

view.addSubview(node.view)

UIKit compare

Panda	UIKit
ViewNode	UIView
ImageNode	UIImageView
TextNode	UILabel
ControlNode	UIControl
ButtonNode	UIButton
StackNode	UIStackView
FlowLayout	No

There do have some difference to make Panda easy to use.For example ControlNode provides a hitTestSlop to expand hittest area.ButtonNode provides space,layuotAxis,textFirst to make it easy to control layout of Button Image and Text

2. Background thread usage

if code if running in main thread ,frame and appearance for node will update automaticlly.But if you want to layout from background and cache frame, call layoutIfNeeded() ,then var layoutValues: LayoutValues will be what you want if your node hierarchy is not changed,then just pass it as a parameter to apply(_ layout: LayoutValues) in main thread.

3. Integrate existing UIView subclass

use LayoutNode as a placeHolder,you can use your own UIView and take advantage of node layout

Example:

  // XXVideoView will be initialized in main thread when first visit
  let videoNode = LayoutNode<XXVideoView> {
    let view = XXVideoView()
    return view
  }
  let node2 = ViewNode()
  node.left == node2.left

4. Layout

   visit Layoutable for more about Layout API

Tips

1. The most import thing about performance is TextRender Cache .We need to control TextRender Cache manually now .TextRender provide a default TextRenderCache to cache values. If you enter a tempoory ViewController, call TextRender.activeCache() to create a new cache, and call TextRender.cleanCache(_ identifier) wnen exit from the ViewController or all the cache is not needed.
2. if allowed,set fixedWidth = true for TextNode .fixedWidth means TextNode's width is not determined by text Size, for example you have constraints like textNode.width = 100, or textNode.xSide = superNode.xSide and superNode's width is determined.This will avoid an extra creation of TextRender and avoid a text layout pass which has a big impact on performance.

Todo

1. Find a better way to control TextRender cache
2. Complete StackLayout