"Tencent products span Mini Programs, H5 web apps, and native apps. How would you design a cross-platform UI component library that maximizes code reuse while respecting platform-specific constraints?"
Tencent operates dozens of products across multiple platforms. A frontend engineer who can design reusable, cross-platform component systems provides massive leverage — this question tests architectural thinking and practical knowledge of platform differences.
Define the architecture: a core logic layer (platform-agnostic state, validation, formatting) and platform-specific render adapters (React for H5, Mini Program custom components, React Native for native).
Describe the component API contract: a unified props interface defined in TypeScript, with platform-specific extensions where needed.
Explain the build pipeline: a monorepo structure with shared source that compiles to platform-specific bundles using build-time transforms.
Address the hard problems: CSS differences across platforms, event system incompatibilities, and component lifecycle mapping.
I would architect this as a three-layer system in a monorepo. The bottom layer is "Core" — platform-agnostic TypeScript modules handling component state, data validation, formatting, and accessibility logic. The middle layer is "Adapters" — thin rendering layers for each platform: React components for H5, WXML templates with WXS for Mini Programs, and React Native components for native apps. The top layer is "Themes" — a design token system (colors, spacing, typography) that compiles to CSS variables for H5, WXSS variables for Mini Programs, and StyleSheet objects for React Native. The key challenge is styling: I'd use a "style primitive" abstraction — components define styles using a platform-neutral object format that build plugins transform into the target CSS dialect. For the event system, I'd define a normalized event interface that each adapter maps to platform events. The build pipeline uses a custom Babel plugin that analyzes imports and tree-shakes unused platform code. Testing runs against all three targets in CI using the same test specifications but platform-specific test runners.
Mention Tencent's open-source projects like Taro or Omi as reference points to show awareness of existing solutions.
Focus on the hard engineering problems (CSS normalization, event mapping) rather than just the high-level architecture.
Discuss versioning strategy for the component library — how do you ship breaking changes across platforms safely?
Taro compiles React-like JSX code into Mini Program WXML/WXSS, H5 HTML/CSS, and React Native components using AST transforms at build time. It normalizes component lifecycles and event handling through a runtime adaptation layer. However, complex platform-specific behaviors still require conditional code.
CSS inconsistencies top the list — flexbox behaves differently across platforms, and Mini Programs lack many CSS features. Event timing and propagation differences are second. Third is performance: abstractions that work fine on H5 may be too heavy for Mini Programs due to the setData bottleneck.
HireMe AI listens to your interview in real-time, detects questions, and generates instant answer suggestions — so you never freeze up again.
Try HireMe AI Free