HelloTalk's Kuikly Journey: One Codebase, Native UI, AI Efficiency

Why Choose Kuikly

HelloTalk evaluated cross-platform solutions to eliminate duplicate iOS/Android development. They selected Kuikly for its alignment with their Kotlin tech stack, native UI rendering (reusing platform UI components instead of custom drawing), and lightweight footprint. Key advantages: platform-consistent behavior, native performance, seamless integration with existing native components, and controlled app size increase.

Actual Benefits

Development efficiency: Single codebase for both platforms eliminates duplicate work, ensures consistency, reduces cross-team communication, and accelerates iteration.

Lightweight & high performance: No heavy rendering engine; uses system native UI components for near-native performance.

Dynamic capability: Supports dynamic page configuration and hot updates.

Full cross-platform scope: Unifies both UI and business logic (via CommonMain).

Extensibility: Open framework allowing custom cross-platform components, native capability bridging via DeclarativeBaseView, and flexible multi-module architecture.

Integration Challenges

Initial investment required: building missing base components, aligning with HelloTalk's design system, developing custom components (e.g., multi-language display), wrapping existing native UI components and utilities, and handling platform implementation differences. Complex business rules like RTL layout, performance optimizations, and native-Kuikly navigation compatibility also needed adaptation. The team views this upfront work as necessary to pave the way, establish best practices, increase reuse ROI, and unlock Kuikly's full value.

Development Practices

Pager Fundamentals

Pager is the page entry point (similar to Activity/ViewController). Basic usage: annotate with @Page("routeName"), implement body() returning a ViewBuilder DSL, and access parameters via pagerData in created(). Lifecycle methods: created() (before body, for data fetching), pageDidAppear() (for analytics/animations), pageDidDisappear() (pause tasks), pageWillDestroy() (cleanup; cannot call native modules). Must call super first.

Reactive State Management

Kuikly uses observable for reactive UI updates. Example: private var count by observable(0); modifying count triggers automatic UI re-render.

Extending Native Views with DeclarativeBaseView

To reuse existing native components (e.g., HTAvatarView), wrap them as Kuikly declarative components. Kotlin side (commonMain): define

NativeAvatarView : DeclarativeBaseView<NativeAvatarViewAttr, NativeAvatarViewEvent>

with viewName(), attribute class using "key" with value syntax, and DSL extension function. Android side: implement IKuiklyRenderViewExport with setProp() handling custom props (avatarSize, avatarUrl) and register via registerExternalRenderView. iOS side: implement KuiklyRenderViewExportProtocol with hrv_setPropWithKey:propValue: and hrv_prepareForReuse; auto-discovered by class name. Comparison table shows differences in interfaces, prop methods, reuse cleanup, registration, required macros, and language.

Shadow for Layout Measurement

Shadow delegates layout measurement to native side. Used by text components (HTTextView) where native text measurement is complex. Kotlin side implements MeasureFunction, creates Shadow in willInit(), syncs props via didSetProp(), and calls shadow?.calculateRenderViewSize() in measure(). Native side provides calculateRenderViewSize returning "width|height". Shadow creator registered alongside view creator.

Multi-language Adaptation

Reuses host app's localization resources via Module bridging. Kuikly maintains only key list ( KRStrings), actual strings fetched via LocalizedStringModule → native KRLocalizedStringModule → host resources. Android uses StringResMap to map keys to R.string IDs; iOS uses NSLocalizedString. Convenience extension String.localizable() simplifies usage. Module auto-registered in BasePager.

Arabic RTL Support

Rewrote HTTextView and HTRichTextView to handle RTL correctly. Key improvements: smart text direction detection (pure RTL → right-aligned, mixed → natural, pure LTR → left-aligned), mixed-text handling, intelligent alignment, paragraph style optimization (baseWritingDirection, first-line indent from right, consistent spacing), and cross-platform consistency. Also added RTL-aware layout extensions: marginStart/End, paddingStart/End mapping based on CommonResConfig.isRtl.

Multi-module Architecture

Project structure: androidApp, iosApp (hosts), base (foundation components/tools), shared (business pages). Each module configures KSP with moduleId, isMainModule (only shared=true), enableMultiModule=true. Shared depends on base. KSP scans @Page annotations per module, generates registration code, aggregates in main module, enabling unified routing. Benefits: faster compilation, clear separation, reusability, better team collaboration.

AI-Assisted Development

Built ai-prompts/ system: role definition (Kuikly expert with KMP/Android/iOS skills), 6-stage workflow (Understand → Analyze → Find Components → Design → Code → Document; stage 3 mandatory), layer configs (L1 business pages to L5 native views), knowledge base (quick references, detailed docs, guidelines), and code templates. AI loads prompts, follows workflow, queries knowledge base to reuse existing components, ensuring consistency and efficiency.