Hippy Cross‑Platform Development Framework: Introduction, Features, Project Structure, and Setup Guide

Hippy Cross‑Platform Development Framework

Introduction

Hippy is a newly created cross‑platform development framework that enables developers to write a single codebase and run it on iOS, Android, and Web. It is designed for traditional web developers, especially those familiar with React Native or Vue, making front‑end cross‑platform app development easier.

To date, Tencent has deployed Hippy in 18 popular apps, reaching hundreds of millions of users daily.

Features

Designed for traditional web front‑ends, officially supporting React and Vue frameworks.

Consistent APIs across different platforms.

High‑performance front‑end‑to‑native communication via a JS engine binding model.

Provides a high‑performance reusable list component.

Seamlessly migrates to web browsers.

Fully supports Flex layout engine.

Project Structure

Hippy
├── examples                     # Front‑end example code
│   ├── hippy-react-demo        # hippy‑react example
│   ├── hippy-vue-demo          # hippy‑vue example
│   ├── ios-demo                # iOS native example
│   └── android-demo            # Android native example
├── packages                    # Front‑end npm packages
│   ├── hippy-debug-server      # Debug service
│   ├── hippy-react             # React bindings
│   ├── hippy-react-web         # Web conversion library
│   ├── hippy-vue               # Vue bindings
│   ├── hippy-vue-css-loader    # CSS‑to‑JS loader for Webpack
│   ├── hippy-vue-native-components # Native components missing in browsers
│   └── hippy-vue-router        # vue‑router for hippy‑vue
├── ios
│   └── sdk                     # iOS SDK
├── android
│   ├── support_ui              # Android native components
│   └── sdk                     # Android SDK
├── core                        # C++ implementation of JS modules (binding)
├── layout                      # Hippy layout engine
├── scripts                     # Build scripts
└── types                       # Global TypeScript definitions

Getting Started

Environment Preparation

macOS users need:

Xcode and iOS SDK for compiling iOS apps.

Android Studio and NDK for compiling Android apps.

Node.js for running front‑end build scripts (recommended via Homebrew).

Windows users need:

Android Studio and NDK.

Node.js.

Windows users cannot develop iOS apps due to platform limitations.

Compile Your Hippy App

Use the hippy‑react or hippy‑vue example projects to launch the iOS simulator (recommended for iOS developers). If you are experienced, you can also install the app on a real device.

Install front‑end dependencies: npm install .

Build the front‑end SDK package: npm run build .

Select an example project to compile: npm run buildexample -- [hippy-react-demo|hippy-vue-demo] .

Open Xcode and start compiling the native app: open examples/ios-demo/HippyDemo.xcodeproj .

Run Android App to Test hippy‑react or hippy‑vue Example

Android developers are advised to use a real device because the X5 JS engine used by Hippy does not provide x86 libraries, making x86 emulators unsupported and ARM emulators slow.

Before starting, ensure the SDK and NDK versions match the examples and do not update the toolchain.

Install front‑end dependencies: npm install .

Build the front‑end SDK package: npm run build .

Compile the desired example: React: npm run buildexample hippy-react-demo Vue: npm run buildexample hippy-vue-demo

Open the native project in Android Studio: examples/android-demo .

Connect your Android phone via USB, enable USB debugging and installation.

Run the project and install the APK.

If Android Studio reports the error No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android , refer to the provided solution.

Project Repository

Download address: https://gitee.com/Tencent/Hippy