DOCSEARCHbyAlgolia
Submit Docs

Texture UI Framework

repository·master·Indexed 27 days ago

https://github.com/texturegroup/texture

A UI framework for iOS and tvOS that provides thread-safe abstractions, such as ASDisplayNode, to move expensive layout and rendering operations to background threads. It ensures smooth 60 FPS performance by utilizing a node-based architecture and ASRunLoopQueue to maintain main thread responsiveness. The framework includes specialized components like ASDKViewController, ASTableNode, and ASCollectionNode, and supports accessibility even with layer backing and subtree rasterization.

Tokens
55.8K
Snippets
117
Records
277
Agent score
91%

What's inside Texture

  1. View Texture showcase apps and case studies

    master

    Texture is used by a variety of high-profile applications to achieve smooth performance and complex UI. You can explore real-world implementations and engineering deep-dives from these apps:

    Other notable apps using Texture include Auxy (Apple Design Award winner), NYT, NFL, Yahoo, Peloton Cycle, and Apollo for Reddit.

  2. Understand Texture's Node-based architecture

    master

    Texture's fundamental unit is the ASDisplayNode. An ASDisplayNode is a thread-safe abstraction over UIView (which is an abstraction over CALayer).

    Unlike standard views that must be accessed on the main thread, nodes allow you to instantiate and configure entire UI hierarchies in parallel on background threads. This enables moving expensive operations—such as image decoding, text sizing, rendering, and layout—off the main thread to maintain a smooth 60 FPS user interface.

  3. Understand ASCollectionNode asynchronous updates

    master

    ASCollectionNode, ASPagerNode, and ASTableNode handle asynchronous batch updates by using an internal data controller to process changes off the main thread before forwarding them to the backing UICollectionView or UITableView.

    Key components:

    • ASRangeController: Determines which cell nodes are in specific ranges and manages their interface state.
    • ASDataController: The actual data source for the backing view. It processes batch updates (change sets) in a thread-safe manner.
    • ASPagerNode: A lightweight subclass of ASCollectionNode specifically for pager layouts.

  4. Understand Texture Nodes

    master

    The fundamental building block in Texture is the node. An ASDisplayNode is an abstraction over UIView, which is itself an abstraction over CALayer.

    Key characteristics:

    • Thread Safety: Unlike UIView, nodes are thread-safe. You can instantiate and configure entire node hierarchies in parallel on background threads.
    • UIKit Interoperability: Most UIView and CALayer properties are available on nodes. If there is a naming discrepancy, nodes default to the UIView name (e.g., .clipsToBounds instead of .masksToBounds), with the exception that nodes use position instead of center.
    • Direct Access: You can access the underlying UIKit components via node.view or node.layer, but you must ensure this access occurs on the main thread.

  5. Navigate the Texture repository structure

    master

    The repository is organized into the following main directories:

    • Source/: Contains all framework source code.
      • Source/Base/: Helper and utility files.
      • Source/Debug/: Debugging functionalities.
      • Source/Details/: Implementation details.
      • Source/Layout/: Layout system files, including layout-primitive types, layout specs, and utilities for Yoga and IGListKit support.
      • Source/Private/: Private files, implementation details, and data structures not exposed to end users.
      • Source/TextKit/: Files related to TextKit used by ASTextNode.
      • Source/tvOS/: tvOS support.
      • Other files in Source/: Main components such as nodes (ASDisplayNode, ASButtonNode, ASImageNode, ASCollectionNode, ASTableNode) and ASDKNavigationController.
    • Tests/: Unit, integration, and snapshot test cases.
    • docs/: Documentation files.
    • examples/: Sample projects demonstrating framework features.
    • examples-extra/: Additional sample projects.

  6. Texture Layout vs UIKit Auto Layout

    master
    Texture does not support UIKit Auto Layout or InterfaceBuilder. Instead, use Texture's Layout API and ASLayoutSpec objects. Texture's layout system is more efficient because it is multithreaded, operates off the main thread, and is highly composable.

  8. Understand Interface State Ranges

    master

    Texture uses an ASRangeController (maintained internally by node containers) to manage a node's interfaceState. This property allows nodes to react to their proximity to the viewport. Nodes should ideally be used within a container to ensure their state is updated correctly and to avoid visual flashing during rendering.

    There are three primary interface states:

    • Preload: The furthest range from being visible. Use this state to gather content from external sources like APIs or local disks.
    • Display: The intermediate range. Use this state for display tasks such as text rasterization and image decoding.
    • Visible: The node is onscreen by at least one pixel.

  10. Understand the Texture Box Model Layout

    master

    Texture uses ASLayout for automatic, asynchronous, box-model layout. Unlike UIView instances which store position and size in center and bounds, <ASLayoutable> instances (all ASDisplayNode subclasses) do not store size or position information directly.

    Instead, layout is determined by implementing the layoutSpecThatFits: method. When called, the component must return an ASLayoutSpec structure that describes:

    1. The size of the layoutable object.
    2. The size and position of all its immediate children.

    This process uses tree recursion: parents request layouts from children to determine size, then parents set the positions of children once sizes are known.

  11. Understand the scope of the Texture Layout API

    master

    The Texture Layout API targets a specific subset of CSS and Flexbox container properties. It is not a full re-implementation of CSS.

    Key limitations include:

    • No support for: Tables, floats, or other non-flexbox CSS concepts.
    • No styling properties: Properties that do not affect layout (such as color or background) are not supported by the Layout API.
    • Feature subset: Not all CSS features are implemented. Check the Layout Properties documentation for the full list of supported properties.