Weex – Alibaba’s High‑Performance Mobile Front‑End Framework: Architecture, Performance, and Usage

At the first day of the 2016 QCon conference, Alibaba senior director Zhuang Zhuoran announced the immediate internal testing of Weex, a high‑performance dynamic solution for mobile, with plans to open‑source it in June, prompting enthusiastic reactions from developers.

The following day, Alibaba front‑end experts Zhao Jinjiang and Xu Kai delivered an in‑depth analysis of Weex, the content of which is presented here.

How does Alibaba view mobile development?

Alibaba identifies the biggest pain point for mobile developers as the extreme complexity of the environment, expressed by the formula: mobile development complexity = number of applications × number of platforms × variety of device models.

To address this, Alibaba first forecasts the future of mobile development, emphasizing a balanced approach that combines performance with dynamism, and an open, interoperable ecosystem based on widely adopted technologies without platform barriers.

Based on this vision, Alibaba introduced the Weex solution.

Weex was validated during the previous year’s Double‑11 shopping event, showing strong performance, and has since been repeatedly employed by Alibaba’s technical teams across a variety of scenarios.

The framework splits all mobile UI into individual pages, introduces routing logic, and exposes various capabilities through APIs, reflecting Alibaba’s model for mobile development.

Weex adopts familiar front‑end syntaxes—HTML, CSS, and JavaScript—providing a rapid, easy‑to‑learn development experience while respecting web standards.

Weex’s Working Principle

Designed for three platforms (iOS, Android, and H5), Weex files (with a .we extension) are transformed into a JavaScript bundle on the server. On the client side, the first layer is a JS framework, followed by the RenderEngine.

The input is a Virtual DOM; the output is a native or H5 view reconstructed into an in‑memory tree structure, from which views are created, events bound, and properties set. Weex’s renderer operates across three threads, giving priority to the JS thread to ensure smoothness.

Performance, Extensibility, and Usability

Alibaba conducted extensive performance testing on loading time, frame rate, memory consumption, and CPU usage (both idle and peak), with Weex consistently delivering excellent results.

Unlike typical native UI development, which often lacks server‑side JS loading, Weex bundles the JavaScript within the client, eliminating download overhead and further boosting performance.

Compatibility is a major focus, addressed through comprehensive unit testing for both JS and H5, as well as UI automation that includes screenshot comparison and layout result verification.

In terms of extensibility, Weex supports numerous pages linked via routing mechanisms, enabling developers to build complex applications.

Weex is currently in open beta, with ongoing improvements to usability features such as Playground, debugging tools, scaffolding, AppHub, and editors; most of these are expected to be completed by May‑June.

Three Working Modes of Weex

1. Full‑Page Mode : Supports single‑page usage or entire app development with Weex (still maturing, requiring router and lifecycle management), comparable to React Native.

2. Native Component Mode : Treats Weex as an iOS/Android component (similar to ImageView), widely used in Taobao’s main flow for stable native pages while addressing frequent dynamic updates.

3. H5 Component Mode : Integrates Weex into existing H5 pages (akin to WVC) for complex or special pages that cannot yet be fully converted to full‑page or RN, solving issues like memory spikes, janky scrolling, and poor animation/gesture experiences.

WVC will be merged into Weex as its H5 component mode.

Scan the QR code to access more technical resources.