Upgrading Tencent Video Search from Hippy 2.0 to Hippy 3.0: Process, Optimizations, and New Features

Hippy is an open‑source cross‑platform framework from Tencent that is widely used in internal business scenarios. The Tencent Video Search team originally built its search pages with Hippy 2.0, but during a year of operation they encountered several pain points such as inconsistent animation rendering, divergent image and style handling between iOS and Android, and the lack of a usable horizontal‑scroll component.

The upgrade to Hippy 3.0 reconstructed the underlying implementation logic, achieving unified rendering on iOS and Android, standardized processes, and greatly reducing compatibility issues. After the migration, development efficiency improved and the search homepage achieved near‑instant loading.

1. Problems with Hippy 2.0

Image style inconsistencies (e.g., rounded corners work on Android but not on iOS) required extra wrapper div elements.

Font style also needed extra wrapper div elements.

Horizontal scrolling had to be implemented with Scroll List View , which caused OOM issues and required strict node count limits.

Animation behavior differed between iOS and Android, requiring extensive compatibility code.

Child nodes could not inherit parent style properties (size, weight, etc.), forcing repetitive style declarations or costly runtime queries such as Vue.Native.getElemCss(this.$el) .

2. Hippy 3.0 Upgrade Process

The upgrade required only updating the Hippy dependency package; no code changes were needed for business logic. The team used the Shiply offline‑package platform and ensured that Hippy 3.0 and 2.0 packages had distinct names to avoid maintenance conflicts.

2.1 Front‑end Engineering Upgrade and Release

All teams adopt different offline‑package solutions; the Video Search team integrated Shiply and emphasized package name separation.

2.2 Performance Optimizations

Engine Pre‑loading: The Hippy engine is pre‑loaded and homepage cache data is read in advance, reducing engine start‑up and resource loading time by about 26%.

JSI Integration: By calling JS APIs through JSI instead of the traditional JSBridge, the call overhead was cut by roughly 90%.

SDK Hippy‑Vue Optimizations: CSS algorithm refactoring: the framework now implements only a subset of CSS, dropping heavy selectors and simplifying parsing, which lowered iOS rendering time by 18% and Android by 10%. CSS calculation frequency reduction: caching computed CSS results and skipping unnecessary calculations saved ~30 ms on the search result page. Event model redesign: event registration is decoupled from node property updates, eliminating redundant CSS recomputation and reducing node‑property updates by over 300 occurrences, saving ~30 ms.

These optimizations led to a clear downward trend in first‑screen and result‑page rendering times after the July release.

3. New Feature Support and Consistency Improvements

Unified animation driver moved to the C++ DOM layer, ensuring consistent animation across iOS and Android.

Native horizontal‑scroll component available on both platforms, eliminating the need for custom Scroll List View work‑arounds.

Unified image style handling removes the need for extra wrapper div elements for rounded corners.

Scoped CSS support added, removing the need for custom Webpack plugins.

Automatic inheritance of parent style properties by child nodes, reducing redundant style declarations.

4. Hippy 3.0 Application Development Scaffold

The team built a scaffolding tool called generator‑athena that integrates the Shiply offline‑package platform, CI/CD pipeline configuration, and provides 11 common components. This scaffold standardizes file naming, variable naming, and supports multi‑platform (Web, Mini‑Program, App) conversion.

5. Future Expectations for Hippy 3.0

5.1 Hermes Engine Exploration

Although other teams have successfully integrated Hermes on separate branches, Hippy 3.0’s NAPI layer now supports engine swapping. Hermes integration is ~80% complete and has been verified in a demo. Performance tests on iOS showed ~40% speedup over JSC, while Android showed an 11% gain on the homepage without pre‑loading (V8 performed better with pre‑loading).

5.2 Upcoming Capabilities

Android waterfall‑flow component upgrade for richer list layouts.

Performance API and Aegis‑Hippy SDK enhancements for better front‑end monitoring.

Animation API with transformOrigin support.

Intersection Observer API for node exposure tracking.

Remote @font-face support for custom fonts.

6. Conclusion

The Tencent Video Search team was the first to adopt Hippy 3.0, collaborating closely with the framework team to resolve the issues of Hippy 2.0 and achieve the performance targets set for the second half of the year. The migration demonstrated the benefits of a unified cross‑platform framework and opened the door for further enhancements.

Readers are encouraged to share their upgrade experiences and discuss challenges with the Hippy community.