How Tenon Extends Hummer to Bridge Vue/React with Native: A Deep Dive

Introduction

Tenon is an MVVM enhancement framework built on Didi's Hummer cross‑platform runtime. It bridges the Web ecosystem (Vue 3 and React) with native mobile, allowing a single codebase to run on Android and iOS.

Design Philosophy

Tenon customizes the Vue 3 render layer and React reconciler to match front‑end developers’ habits, providing APIs that feel native to Vue/React while leveraging Hummer’s lightweight JavaScript engine.

Technical Advantages

Multi‑framework support: Vue 3 and React out of the box, with plans for additional frameworks.

Easy to adopt: API design follows front‑end conventions, lowering the learning curve.

Extensible plugin system: quickly integrate native components.

High availability: proven in multiple Didi services with crash rate <0.01%.

Cross‑page state management, conditional compilation, and comprehensive style support.

Architecture

Tenon consists of three layers:

Driver layer – implements VDOM rendering and CSS compilation on the Hummer side.

Framework layer – hosts the customized Vue 3 and React implementations; future support for Angular, Svelte, etc.

Application layer – provides component libraries, state management, routing, and other ecosystem features.

Syntax Comparison

Tenon Vue adapts Vue 3’s syntax to render on Hummer; Tenon React does the same via a custom reconciler. A “Hello Tenon” example shows near‑identical component code between Tenon and the original frameworks, with only platform‑specific tags such as <view>, <text>, <image> differing.

Use Cases

Tenon is already deployed in Didi’s ride‑hailing, freight, and international driver applications, demonstrating stable performance and low crash rates.

FAQ

Q1: Difference between Tenon and Hummer?

Hummer offers a native‑style API for performance‑critical scenarios; Tenon adds a front‑end‑style API that aligns with Vue/React, targeting developers who prefer web conventions.

Q2: How does Tenon compare with Chameleon, Weex, React Native?

Tenon focuses on mobile native cross‑platform (Android/iOS) similar to Weex and React Native, while Chameleon also targets mini‑programs and web platforms.

Conclusion

Tenon is a young, rapidly evolving framework that invites community contributions via GitHub. Its goal is to become the default cross‑platform solution for Didi developers, reducing development cost and improving efficiency.