In‑Depth Analysis of Qunar’s Mobile Hybrid Solution (Hy)

Lin Yang, a senior front‑end engineer at Qunar, introduces the company’s mobile hybrid solution called Hy , which has been developed over nearly two years to combine the user experience of native apps with the rapid development cycle of web apps.

What is a Mobile Hybrid Solution?

Hybrid development uses web technologies (HTML, CSS, JavaScript) wrapped in a WebView (e.g., Adobe Air, RubyMotion, Titanium, React Native) to create apps that sit between pure web apps and native apps, offering native‑like interaction and web‑like development speed.

Hybrid vs. WebApp vs. Native App

A comparison table (shown below) highlights differences in native capabilities, performance, development cost, and update mechanisms. The author emphasizes that the biggest advantage of web technology is hot‑update capability, reducing user‑side update friction.

Why Qunar Adopted Hybrid

Two main pain points drove adoption: (1) the cost of user updates (hot‑update) and (2) app size limits on iOS (100 MB Wi‑Fi‑only download restriction). The Hy solution addresses both.

Hy Architecture Overview

Hy consists of several layers:

Front‑end framework: UI framework Yo , SPA router/view manager QApp , and component library Kami .

Bridge between front‑end and native: QunarAPI , which also adapts to WeChat, etc.

Native core Hytive (similar to Cordova) providing a plugin mechanism and multi‑WebView support.

Plugins (sharing, login, etc.), offline resource update mechanism, development tools, Jenkins‑based CI, and analytics.

Front‑end Framework Details

Yo is a Sass‑based CSS framework designed for mobile UI, resembling iOS style. QApp is a lightweight SPA framework handling view lifecycle, routing, and plugins, with a view‑management architecture similar to native Activity. Kami is a lightweight component library offering 20+ reusable components.

Hytive + QunarAPI + Plugins

Hytive provides a bridge for JavaScript‑native communication, improving on Cordova by supporting multiple WebViews, which solves performance and exception‑isolation problems of a single WebView.

Multi‑WebView Strategy

Multiple WebViews reduce memory usage, isolate crashes, allow selective destruction of deep navigation stacks, and enable cross‑business data sharing.

Offline Resource Update Mechanism

Unlike HTML5 AppCache, Hy’s offline package system checks for updates on entry, silently downloads packages over Wi‑Fi, uses gzip compression and differential (xdiff) updates, and ensures resources are usable both online and offline.

Development Tools

Hy provides code packaging, project building, hot‑refresh, local DNS and proxy services, iOS build automation, Iconfont and Source platforms, and other utilities to streamline development.

Challenges and Solutions

SPA on Multi‑WebView : QApp view lifecycle mirrors native Activity, allowing seamless hand‑off to Hytive’s WebView.

Third‑Party Page Embedding : A sandboxed WebView with a whitelist/blacklist mechanism offers common APIs (share, network type, location, QR scan) while maintaining security.

CrossWalk Decision : Although CrossWalk improves performance, its large size (10‑20 MB) and stability issues on some devices led to a conditional hot‑update approach—download only for devices not on the blacklist.

Future Outlook – Hy 2.0

Planned improvements include a unified concept model, migration to ReactJS for the front‑end, stronger server‑side routing, lighter development tools, and a more stable client framework.

Hy vs. QRN (Qunar React Native)

QRN is a React Native‑based solution targeting developers comfortable with native‑like performance, while Hy focuses on pure web developers. Both coexist, complement each other, and are chosen based on project needs.

Conclusion

The mobile front‑end landscape is evolving with Hybrid, React Native, and Weex. Qunar’s Hy solution offers a mature, extensible hybrid architecture, comprehensive tooling, and practical lessons that can help other teams evaluate and adopt suitable mobile development strategies.