DOCSEARCHbyAlgolia
Submit Docs

Hippy Framework Documentation

repository·main·Indexed 27 days ago

https://github.com/tencent/hippy

An open-source cross-platform development framework from Tencent that allows Web developers using React and Vue to write once and run on iOS, Android, Ohos (OpenHarmony), and Web. It features a decoupled three-layer architecture (Driver, DOM Manager, and Rendering Layer) and supports multiple renderers including Native, Voltron (Flutter), and Web. The ecosystem includes specialized packages such as hippy-react, @hippy/vue-next, hippy-vue-router, and a dedicated DevTools Backend for debugging.

Tokens
120.5K
Snippets
221
Records
627
Agent score
93%

What's inside Hippy

  2. Overview of Hippy Vue

    main
    Hippy Vue allows developers to write cross-platform applications using Vue web technology. It is designed to be fully compatible with the Vue ecosystem, including directives and Vue-Router. A single codebase can output web pages, iOS, and Android versions simultaneously. It uses flex layout by default.

  3. Overview of Hippy Cross Platform Framework

    main

    Hippy is an open-source cross-platform application development solution from Tencent. It acts as a lightweight browser engine that abstracts differences between iOS, Android, and Ohos (OpenHarmony).

    Key Features:

    • Web-like Experience: Aligns with browser DOM APIs (events, network, logs, timers, Performance) and supports Flexbox layout and common CSS properties.
    • Framework Compatibility: Supports React and Vue, allowing for near-seamless migration of web projects.
    • Multi-platform: Write once and run on Android, iOS, Ohos, and Web.
    • High Performance: Optimized for startup speed, rendering, animation, memory usage, and package size.
    • Extensible Architecture: Uses a decoupled three-layer design (Driver, DOM Manager, and Renderer).

  4. Introduction to hippy-vue-router

    main

    hippy-vue-router is the official router for hippy-vue. It is a fork of vue-router specifically designed to work within the Hippy native environment. It supports all standard vue-router features and adds native-specific capabilities:

    1. Android Hardware Back Button Support: Enables navigation to the previous page using the Android hardware back button.
    2. Safe Area Wrapper: Provides compatibility for different hardware layouts within hippy-vue apps.

  5. Overview of the WebRenderer solution

    main
    The Hippy WebRenderer solution introduces a conversion layer based on a common communication protocol. This allows developers to write business logic using standard Hippy syntax, which is then mapped to JS-implemented components and modules. This architecture enables compatibility across different frameworks like React, Vue, or other third-party libraries.

  7. Use Hippy React for cross-platform development

    main

    Use hippy-react to write Hippy cross-platform applications using React. This binding provides several optimized features for the Hippy runtime:

    • Touch Events: All components support touch events.
    • Optimized Lists: Includes a built-in recyclable ListView for high-performance list rendering.
    • Animations: Supports deployed animations.

    For detailed setup and implementation guides, refer to the official Hippy-React documentation at https://hippyjs.org/#/hippy-react/introduction.

  10. Understand Flatten UI in Android Native Renderer

    main

    Flatten UI is a UI hierarchy optimization solution introduced in Hippy 3.0. Unlike version 2.0, which only optimized nodes that participate in layout, 3.0 allows child elements to be rendered directly onto the parent view. This significantly reduces the depth of the terminal UI hierarchy.

    Optimization Stages:

    • No Optimization: DOM $\rightarrow$ Render $\rightarrow$ View (1:1 mapping).
    • Hippy 2.0: Optimizes nodes that only participate in layout; Render nodes and Views have a 1:1 mapping.
    • Hippy 3.0 (Flatten UI): Further optimizes the View hierarchy by rendering some child nodes directly onto the parent's View.

  12. Understand the JS Runtime Environment in Hippy 2.0

    main

    In the Hippy 2.0 architecture, the JS runtime environment is composed of three main parts:

    1. Business Logic: The application code written by developers.
    2. Framework Wrappers: Packages like hippy-react and hippy-vue that encapsulate Hippy's base functions and protocols.
    3. C++ Injected Logic: Code injected into the JS engine during creation to provide global APIs (e.g., setTimeout) and environment variables required for UI frameworks to run.