How Cube Achieved High‑Performance Cross‑Platform Rendering on Android & iOS

Native Rendering Challenges

On Android a view must go through create, measure, layout, and draw on the main thread; deep view hierarchies and frequent list updates cause high CPU usage and frame drops, prompting Cube to seek more efficient rendering.

Asynchronous Rendering Concept

Cube moves the heavy drawing steps to a background thread, producing a bitmap that the main thread later composites, greatly reducing UI‑thread workload and improving scroll smoothness.

Cross‑Platform Architecture

Cube isolates platform‑specific code into a platform layer exposing C++ atomic interfaces, with implementations for Android (JNI) and iOS (C++/Objective‑C). The core library builds on this layer, providing IO, UI components, image handling, and the rendering engine that manages data models, rendering logic, and component libraries.

Asynchronous Rendering Technology Selection

Android

SurfaceView and GLSurfaceView support off‑thread rendering but cannot be used inside standard list items. TextureView integrates better with native views but suffers memory and compatibility issues when many instances are used. Cube ultimately chose a bitmap‑based approach, caching bitmaps to mitigate memory pressure.

BitmapCache stores rendered bitmaps for list items, reusing them when possible to avoid redundant drawing and to limit memory usage.

iOS

iOS follows a similar model, rendering on a background thread and assigning the bitmap to the view’s layer rather than drawing directly in drawRect, which would be inefficient.

Evolution of Cube Rendering

Version 1.0 – Single Layer

Initial proof‑of‑concept rendered a whole card on a single layer bitmap, improving scroll frame rates but lacking multi‑layer support.

Version 2.0 – Multi‑Layer Support

Introduced multiple layers, allowing independent bitmaps for different sub‑components, enabling richer UI composition.

Version 3.0 – Performance Optimizations

Added a PaintTree structure to separate pure drawing data from layout logic, moved layer construction and impact‑range calculations to background threads, and introduced a dedicated paint thread to finish bitmap compositing before the main thread displays it.

Common Terminology

LayoutTree – Yoga‑based tree describing layout relationships.

RenderTree – Tree describing drawing order and properties.

Layer – A view‑level canvas that may contain its own bitmap.

LayerTree – Hierarchy of layers mapped to platform views.

Entity Node – Node that requires its own layer.

Virtual Node – Node drawn onto its parent’s canvas.

Current Issues

Cross‑platform consistency : Canvas APIs differ between Android and iOS, requiring duplicated drawing code; Cube is exploring Skia‑based rendering to unify this.

Flash‑white artifacts : Asynchronous drawing can cause brief white frames when the main thread displays a view before the bitmap is ready; ongoing work aims to reduce this latency.

Future Plans

Render snapshots to speed up cold starts.

Advanced rendering strategies such as pre‑rendering, adaptive async/sync drawing, thread‑model refinements, and component caching.

Optimization of the Yoga layout engine for faster layout calculations.

Skia‑based self‑drawing to achieve true cross‑platform consistency.