How Pluto Boosts iOS Feed Development with JSON‑Driven Layouts

| Introduction: Pluto is an iOS layout rendering engine that allows UI elements to be described via JSON/JS files, offering high development efficiency, smooth performance, and low memory consumption.

The Qzone Feed team needed a mature rendering engine to improve development speed, decouple styles, avoid version‑locking for new or modified feeds, and maintain scroll smoothness.

Increase development efficiency.

Ensure style independence.

Allow feed style changes without version updates.

Maintain at least current scroll performance.

Existing solutions like ComponentKit, React Native, or Android’s layout system could not meet all requirements, so the team built Pluto, a performance‑focused, developer‑friendly layout engine now used in QQ and Qzone feeds.

JSON Layout Example

@{
  "item" : "PTHorizontalItem",
  "size" : "{200, 50}",
  "subitems" : [
    {
      "item" : "PTImageItem",
      "imageName" : "006.png",
      "size" : "{50, 50}",
      "margin" : "{0, 5, 0, 5}"
    },
    {
      "item" : "PTTextItem",
      "size" : "{50, 50}",
      "fontSize" : "14",
      "fontColor" : "#000000",
      "text" : "喷火龙",
      "align" : "align-center"
    }
  ]
};

The resulting view shows an image on the left and text on the right.

Click Events

Pluto can bind JavaScript callbacks to UI elements via JSON:

@{
  "item" : "LKImageItem",
  "image-name" : "006.png",
  "size" : "{50, 50}",
  "margin" : "{0, 5, 0, 5}",
  "onClick" : "onClick"
},

When the image is tapped, the corresponding JS file’s onClick method is invoked.

Templates

To avoid repetitive JSON, Pluto supports templates where placeholders (e.g., ${image}) are replaced with data from a dictionary, enabling a single template to generate multiple views.

@{
  "item" : "LKHorizontalItem",
  "size" : "{200, 50}",
  "subitems" : [
    {
      "item" : "LKImageItem",
      "image-name" : "${image}",
      "size" : "{50, 50}",
      "margin" : "{0, 5, 0, 5}"
    },
    {
      "item" : "LKTextItem",
      "size" : "{50, 50}",
      "font-size" : "14",
      "font-color" : "#000000",
      "text" : "${name}",
      "align" : "align-center"
    }
  ]
};

@[
  { "imageName" : "006.png", "name" : "喷火龙" },
  { "imageName" : "005.png", "name" : "火恐龙" },
  { "imageName" : "004.png", "name" : "小火龙" }
];

Reuse

Pluto’s built‑in view reuse pool recycles view trees during scrolling, reducing view creation and hierarchy updates, which is crucial for high‑performance list components like UITableView.

Extension

Pluto provides core components (TextItem, ImageItem, ButtonItem) and allows developers to create custom components by extending the engine.

Feature Analysis

Speed: Pluto’s layout performance is comparable to hand‑written code and outperforms Auto Layout.

Asynchronous: Layout and text rendering can run on background threads without blocking the UI.

Declarative: Layout is described with immutable dictionaries (JSON), making maintenance, caching, and thread‑safety easier.

Easy maintenance, low error risk.

Cache‑friendly.

Can be delivered as JSON from server.

Immutable data enables testing and reuse.

Cache & Reuse: Immutable layout data allows internal caching and differential updates, further improving rendering speed.

Template System: Single template definitions can be reused with different data sets.

Mixed Media: Supports mixing text and image tags, as well as custom components.

Comparison

Pluto is compared against Storyboard/Xib, React Native, and ComponentKit for a feed list requiring high memory and CPU efficiency.

Storyboard: Visual UI editor, high development speed, but slower performance and no async layout; XML not easily dynamic.

React Native: High development speed and cross‑platform, but suffers from performance and memory issues in heavy feed scenarios.

ComponentKit: Similar to Pluto but lacks JSON expression and dynamic event binding; no virtual view layer, making performance improvements costly.

Pluto: Slightly fewer built‑in components than React Native, but JSON‑driven layout offers comparable development speed, excellent performance, async execution, and dynamic updates without altering native code.

Overall, Pluto provides a fast, asynchronous, declarative, and reusable layout solution tailored for high‑performance iOS feed rendering.