Skip to content
How Founder Securities Built Cross-Platform Xiaofang App with Tencent Kuikly
Mobile Development 30 min read

How Founder Securities Built Cross-Platform Xiaofang App with Tencent Kuikly

Founder Securities adopted Tencent's Kuikly framework for their Xiaofang app, validating it across Android, iOS, and HarmonyOS with performance benchmarks, then built engineering infrastructure including mono-repo integration, multi-module architecture, dual-mode delivery, and custom capabilities like SSE streaming, cross-platform database, dark mode, font scaling, and UI components, progressively applying it to cash options, stock alerts, AI chat, and conditional orders.

Tencent TDS Service
Tencent TDS Service
Tencent TDS Service

Selection: Multi-Dimensional Validation for a Trusted Cross-Platform Foundation

In early 2025, Founder Securities began evaluating Kuikly ahead of its open-source release. The team assessed mainstream open-source frameworks across four dimensions: cross-platform , performance , dynamic updates , and self-controllability . Securities business requirements mandated three-platform support (Android, iOS, HarmonyOS), native-grade experience for trading and market data, rapid hotfix capability for fund-related issues, and the ability to debug and extend the framework internally without vendor dependency.

1. Evaluation Scenarios

Six representative high-interaction scenarios from the Xiaofang app were selected for hands-on verification:

Multi-tab + sticky header + embedded WebView stock detail page : tests complex page structure, scroll linkage, and hybrid native view rendering.

Interactive daily K-line chart with gestures : high-frequency gesture rendering performance and data-driven refresh — the litmus test for market data scenarios.

ETF zone dual-list linkage : verifies dual-list interaction support.

Long lists with complex trading/market interactions : extreme demands on list performance and data update efficiency.

Native-cross-platform-H5 nested interaction and native component reuse : multi-page nesting and embedding native components.

Dynamic update capability and developer experience : release pipeline, debugging, and issue localization efficiency.

2. Performance Testing

Using a 2,000-item simple/nested list with a "cold start → rapid scroll" path, the team measured load time, FPS, memory, and CPU on real devices across all three platforms. Results: scrolling approached full frame rate (110–120 FPS), page memory stayed under 20 MB, CPU increase ~2%. Native artifact load time matched native baseline; dynamic artifacts were slightly slower but with no perceptible experience loss. Kuikly met expectations on all four dimensions, resolving prior pain points of mini-program/H5 approaches.

Engineering Construction: Integrating Cross-Platform Capabilities into a Large Brownfield App

The Xiaofang app already had a mature native engineering system. To avoid blurred code boundaries, version coupling, and upgrade difficulties, the team built a dedicated engineering framework around Kuikly.

1. Main Repo + Sub Repo Integration Model

Adopted "Native main repo + Kuikly sub repo" . The native main repo continues to host the app host project, native infrastructure, and existing business. The Kuikly sub repo centrally manages the cross-platform framework, shared components, and cross-platform business code. Collaboration occurs through well-defined boundaries. Benefits: (1) independent evolution of framework, shared components, and business modules via stable interfaces and versioning; (2) low integration cost for the brownfield app — Kuikly enters as a clear-bounded dependency, and framework upgrades are validated in the sub repo before syncing to the main repo.

2. Kuikly Multi-Module Architecture

As cross-platform business grew, a single module caused coupling, slow builds, and inability to independently release dynamic updates. The team built a "main module + physically nested sub-modules" hierarchy. Common capabilities sink to a common module; each business sub-module depends on the common library via API and remains decoupled. The main module collects three-platform resources and produces a single compilation entry. Implementation uses Gradle command-line parameters to switch between embedded artifact (compile all modules) and dynamic artifact (target sub-module temporarily becomes main, excluding other business deps to avoid blank screens) modes. Three platforms merge sub-module resources via specified resource directories; packaging scripts form an automated pipeline. This enables independent development, decoupled evolution, on-demand dynamic releases, and standardized new-module onboarding with a three-platform config checklist.

3. Dual-Mode: Dynamic Updates and Native Cross-Platform Simultaneously

The engineering system does not lock Kuikly to a single runtime mode. It supports both dynamic (for high-iteration features needing rapid delivery) and native cross-platform (for trading flows and core paths prioritizing stability, performance, and deep native integration) delivery shapes. Both modes reuse the same Kuikly business code, base components, and platform capabilities; build configuration and pipeline select the final artifact form. Business teams choose per feature characteristics, release cadence, and stability requirements without maintaining two implementations. A dual-layer loading strategy — "fetch on page open + pre-fetch at launch per remote config" — lets dynamic artifacts take effect transparently and fall back to local native artifacts.

4. Kuikly Toolchain

To reduce multi-repo, multi-team, multi-platform collaboration complexity, a unified toolchain encapsulates key operations as standard commands:

Sync Kuikly : automatically pulls specified branch/version from Kuikly sub repo into the native main project, handling code fetch, dependency updates, and project integration. Developers update cross-platform code without knowing repo topology.

Generate Kuikly Dynamic Artifact : automates dynamic code build and artifact generation for fast-iteration business. Dynamic and native artifacts share the same business code, shared components, and base capabilities.

Four-Repo Branch & Sync Kuikly : one-shot creation of business branches across four repos (Kuikly sub repo + Android, iOS, HarmonyOS native repos) and syncs Kuikly sub repo code, ensuring all platforms develop against a unified code version and business baseline. Consolidates scattered operations into a single standard flow, reducing branch/version mismatches.

Sync Kuikly toolchain flow
Sync Kuikly toolchain flow
Four-repo branch and sync flow
Four-repo branch and sync flow

Custom Capability Extensions: Filling Securities-Specific Cross-Platform Infrastructure Gaps

Beyond UI development efficiency, production readiness in complex securities scenarios depends on network, storage, and base components. The team extended Kuikly via its Module and custom component mechanisms.

1. Network Capability Extension: SSE Streaming

Kuikly's built-in network covers regular HTTP request/response. With Xiaofang AI, streaming content generation required server-pushed continuous data. The team built SSE streaming network capability on top of Kuikly: native layer encapsulates each platform's networking, exposing a unified Module interface to Kuikly; each platform handles connection, data reception, error handling, and resource release; cross-platform business logic stays platform-agnostic. This yields a "regular request + streaming request" cross-platform network stack now reused beyond AI chat for other real-time data scenarios.

SSE Streaming Design Rules (Four-Layer Pipeline):

Protocol parsing lifted to common layer : native layer only passes raw byte chunks; SSE framing/field parsing lives entirely in commonMain — zero duplicate implementation across three platforms, strong behavioral consistency; new platform only implements "read HTTP stream".

Frame parser covers TCP boundary realities : half-frame buffering, multi-frame concatenation splitting, end-of-stream residual frame emission ( finish), comment/heartbeat line ignoring — full robustness.

Reuse native network library : shared network lib used for auth and other needs, maintaining consistency.

SSE streaming four-layer pipeline diagram
SSE streaming four-layer pipeline diagram

2. Data Storage Capability: Cross-Platform Database

Simple key-value storage became insufficient for structured data, lists, and complex business state persistence. The team built a cross-platform general database capability , unifying each platform's database implementation behind a consistent data access interface for Kuikly. Business side performs CRUD without caring about iOS/Android storage differences; supports schema upgrades (table additions, column changes); platform side manages lifecycle, threading, and execution. Securities-grade data encryption is built-in from day one. This unified storage reduces multi-platform duplicate development and provides common infrastructure for offline caching, history records, business state recovery , with unified specs for schema upgrades, concurrent access, exception recovery, and sensitive data protection.

Cross-Platform Database: Three-Layer Design

"Control at upper layer, execute at native" declarative schema design : table structures and migration SQL declared entirely in cross-platform Kotlin code; native layer is a stateless executor. Adding tables/upgrading versions requires zero native code changes ; three platforms share one schema definition, eliminating multi-platform DDL drift.

Reactive query subscription (Room InvalidationTracker + LiveData style) : turns passive queries into active pushes. UI calls subscribe(table, selection...); any write to that table automatically triggers re-query and callback. Business code shifts from imperative "request-refresh" to declarative "data-driven UI". In AIConversationManager, network writes to DB and zero lines of UI refresh code are written — the subscription chain handles it automatically.

Cross-page broadcast via clever reuse : no custom global event bus; reuses Kuikly's built-in NotifyModule for "table change" broadcasts, solving scope mismatch between per-Pager DatabaseModule instances and the global database singleton — zero extra infrastructure cost.

Security built into DAO layer : encryption/decryption consolidated in conversationToValues / rowToConversation conversion functions; business side is unaware; persisted data is all ciphertext.

Notification noise reduction details : batch writes/deletes returning 0 rows skip broadcast (avoid wasteful full refresh); execSQL checks for SELECT, lightly parses SQL to extract table name before broadcasting; precise control over which subscribers react; upsertBatchWithoutNotify for bulk backfill scenarios that shouldn't trigger UI refresh.

Cross-platform database three-layer architecture diagram
Cross-platform database three-layer architecture diagram

3. Dark/Light Mode Adaptation

Growing demand for night mode clashed with platform differences in theme switches, color resolution, and image resource paths. The team built a unified cross-platform dark mode adaptation: KMP layer defines ThemeModule bridge interface and BasePager theme logic; each native Module reads global night switch, resolves colors by token, and sets status bar style. Business calls unified getColor, commonAssets, pageAssets for color and image adaptation. Implementation: colors use "token + night flag" resolved by native side via values / values-night resource systems; images use "path insert dark/" switching; a custom Gradle task at build time traverses all sub-module assets directories to auto-generate missing dark copies, avoiding runtime fallback inconsistencies. Result: business pages adapt dark mode with one call, ignoring iOS/Android/HarmonyOS theme differences; unified status bar style, gradient color resolution, and multi-module dark resource merging.

4. Five-Level Font Scaling

Securities pages have high information density and strict design specs for font enlargement levels; different page regions need different scaling factors. The solution passes the user's selected five-level font tier via page launch parameters, declares supported tiers per Text via Kotlin extension functions, and combines both to compute the final scaling factor.

5. General UI Component Library

Around securities scenarios, the team continuously precipitates cross-platform UI components: Keyboard (unified layout, input rules, interaction for price/quantity/amount high-frequency input, reducing trading business duplicate dev), Pull-to-Refresh (unified gesture, loading states, result/exception handling; business focuses on data logic), and other common components (dialogs, date pickers, Toast, auto font scaling). On this foundation, they further precipitate securities-specific components (market data display, trade confirmation, risk warnings) forming a reusable, experience-consistent cross-platform component system .

Business Rollout: From Pilot Projects to Complex Trading Flows

Rollout followed a steady rhythm: let business scale grow in step with cross-platform capability, progressively deepening application.

1. Cash Options (Pilot)

Chosen for small scope, low risk, and large trial-and-error space. Contains rule description, underlying info display, declaration form filling, result feedback. Demands high process integrity and multi-platform consistency . Kuikly unified page structure, validation logic, and state display, reducing Android/iOS implementation divergence. Cross-platform pages still access native account, routing, and business services via unified Modules, preserving connection to native trading system.

2. Stock Alerts

Larger scope after successful pilot. Typical assisted monitoring scenario: real-time quote tracking, multi-dimensional alert conditions (price, amplitude, turnover, valuation), rule validation, notification delivery. Solved "scroll dead loop and overshoot bounce" in bidirectional linked lists with a lightweight UI scroll control lock absorbing layout-lag events, ensuring smooth deterministic scrolling. Precipitated highly reusable input and dialog components.

3. Xiaofang AI (Internal Beta at Publication)

Complex interaction, tight schedule — cross-platform was the efficient delivery path. Pre-validated number scrolling, carousels, Lottie/PAG, Canvas K-line flicker. Beyond interaction, streaming network had no precedent. User asks question → server pushes via SSE → Kuikly page incrementally parses and refreshes answer content while handling connection drops, re-requests, loading states, and page lifecycle changes. The team built a custom SSE Module per official guidance, shielding platform network differences; cross-platform layer owns session state and presentation logic; clear boundary between network capability and UI state management. Xiaofang AI uses dynamic mode release: non-native features don't depend on app releases, enabling rapid iteration. Kuikly's dynamic updates are page-granular; each dynamic artifact holds independent global singletons and static variables. Inter-page data sharing, post-exit caching, singleton/static usage all unified via native persistence or native in-memory cache. This validated Kuikly's support for streaming content, complex page state, and continuous UI updates, and pushed cross-platform network infrastructure from generic HTTP to real-time data transport.

4. Conditional Orders (Brownfield Reconstruction)

After three business validations, the cross-platform system covered diverse scenarios. Seizing a business optimization window, the team reconstructed the existing conditional orders business cross-platform. Unlike greenfield, brownfield reconstruction proves Kuikly entered deep application stage. Conditional orders have many pages and complex business : market data, condition configuration, price/quantity input, rule validation, risk warnings, submit confirmation — rich interaction states, high demands on input components and business correctness. Custom keyboard, unified network access, cross-platform state management all applied centrally. By sinking common capabilities to the base layer, business modules focus on condition rules and trading flows. Conditional orders also depend on native features like self-selected stocks, requiring native page interaction reuse — this reconstruction validated Kuikly's native UI interop capability. The rollout shows Kuikly's application boundary can expand from content/display pages to interaction-heavy securities trading, but critical trading links still need robust testing, monitoring, fallback, and rollback mechanisms to ensure efficiency doesn't sacrifice stability.

Summary

Kuikly's adoption in Xiaofang is not a one-off framework integration but a continuous cross-platform engineering evolution.

Engineering : Native main repo + Kuikly sub repo and Kuikly multi-module integration models clarify boundaries between cross-platform base capabilities, shared components, and business code; unified toolchain lowers multi-repo, multi-team, multi-platform collaboration cost.

Base Capabilities : Built SSE streaming, cross-platform database, dark mode adaptation, five-level font scaling, keyboard, pull-to-refresh around securities needs, enabling Kuikly to support more complex scenarios.

Business : Cash options, stock alerts, Xiaofang AI, and conditional orders validated Kuikly in info declaration, dual-list linkage, streaming dialogue, and trading flows . Xiaofang AI especially strings streaming network, session storage, and dynamic release into a reusable capability combo, best demonstrating the cross-platform system's completeness.

Kuikly's production-scale landing in Xiaofang benefited from the official team's continuous support — timely Q&A and steady version updates provided critical assurance. Going forward, Xiaofang will further refine the cross-platform component system, quality assurance, and R&D toolchain, precipitate more common capabilities to the base layer, and explore scaled rollout in more business scenarios.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

cross-platformUI componentsKotlin Multiplatformdark modeKuiklySSE streamingcross-platform databasesecurities app
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.