Hippy — Cross-Platform Framework by Tencent

Introduction

Hippy is an open-source cross-platform framework developed by Tencent. It enables developers to build native-rendered mobile applications for Android and iOS using JavaScript with either React or Vue as the UI layer. Hippy has powered dozens of apps within the Tencent ecosystem serving hundreds of millions of users.

What Hippy Does

• Renders native Android and iOS UI components from JavaScript without a WebView
• Supports both React and Vue as frontend frameworks with framework-specific renderers
• Provides a C++ core engine shared across platforms for consistent behavior
• Handles layout with a built-in Flexbox engine optimized for mobile performance
• Includes a module system for bridging native device APIs to JavaScript

Architecture Overview

Hippy uses a three-layer architecture: a JavaScript runtime layer (V8 or JSC), a C++ core layer handling layout and DOM diffing, and native renderers on each platform. The C++ core acts as a bridge, translating virtual DOM updates into native view operations. This shared core reduces platform-specific code and ensures consistent rendering behavior between Android and iOS.

Self-Hosting & Configuration

• Clone the repo and follow the Getting Started guide for Android or iOS targets
• Install JavaScript dependencies: npm install in the project root
• For Android, open the android directory in Android Studio and sync Gradle
• For iOS, run pod install in the ios directory and open the Xcode workspace
• Configure entry bundles and native modules in the platform-specific configuration files

Key Features

• Dual framework support: use React or Vue with the same native rendering pipeline
• High-performance C++ core shared between platforms for consistent layout and rendering
• Battle-tested at Tencent scale across apps like QQ Browser and Tencent Video
• Module bridge system for accessing camera, storage, network, and other device APIs
• Web target support for rendering the same components in a browser environment

Comparison with Similar Tools

• React Native — larger ecosystem and community; Hippy offers a shared C++ core and dual React/Vue support
• Flutter — uses Dart and its own rendering engine; Hippy uses JavaScript with native platform views
• Weex — similar JS-to-native approach by Alibaba; Hippy has more active development and Tencent backing
• NativeScript — direct native API access from JS; Hippy uses a bridge with optimized C++ layout
• Lynx — newer ByteDance framework; Hippy is more mature with wider production deployment

FAQ

Q: Can I use both React and Vue in the same Hippy project? A: No. Choose either the React or Vue renderer when initializing the project. Both produce native output through the same C++ core.

Q: How does Hippy compare to React Native in performance? A: Hippy's shared C++ layout engine can be faster for complex layouts. Real-world performance depends on the specific use case and native module implementation.

Q: Is Hippy production-ready? A: Yes. It has powered major Tencent applications with hundreds of millions of monthly active users.

Q: Does Hippy support hot reloading during development? A: Yes. The development server supports live reload and hot module replacement for rapid iteration.

Sources

• https://github.com/Tencent/Hippy
• https://hippyjs.org/