Card‑Based Native App Engine Technology: Design, Implementation, and Optimization

The talk "Cardization – Efficient Native APP Engine Technology" was delivered at Qunar's 2016 Technical Carnival by iOS engineer Peng Donghua, who introduced the concept of using card‑based UI components to build flexible, reusable native mobile interfaces.

Cards originated from Google's 2012 design language and have been widely adopted by applications such as Google Now, Twitter, Facebook, Weibo, and Taobao, where a card is a rectangular container that aggregates images, text, and actions.

The proposed card framework offers several benefits: high reuse (≈30% currently, aiming for 80%), dynamic page composition controlled by the backend, easy style theming (e.g., seasonal skins), real‑time operational content delivery, user‑centric data services, and a reduction of the app package size by about 9%.

Key boundaries of the card approach include full‑screen width on mobile, ordered linear layout with an array of card data, composite UI units rather than atomic elements, diverse card types generated dynamically, and a focus on single‑type reuse to strengthen each card's capabilities.

In the ticketing domain, four major pages (home, sight detail, search results, and product detail) have been cardized. The backend returns a list of card objects where common fields define style and type, while specific fields are encoded as JSON strings that require a second‑level parsing on the client.

Page generation follows an MVVM‑inspired flow: a view controller (VC) extracts parameters from a native scheme, the model layer fetches and parses the network response into a list of card view‑models, each view‑model maps to a view, and the collection of views is rendered in a table view. Custom pages can extend the base VC and model, and new card types are added by defining new view‑models and views.

Performance optimizations involve breaking large cards into multiple smaller items, each rendered as a separate table‑view cell, which raised the frame rate to 56‑57 fps on the device.

Future work includes creating a universal rich‑text card supporting HTML/JS, implementing view‑model to view data‑binding, and adding an event‑handling mechanism based on ReactiveCocoa.