Why Weex Became Our Mobile Development Choice: A Practical Guide

What is Weex?

Weex is an open‑source cross‑platform solution from Alibaba for building high‑performance native apps. It supports page development with Vue or Rax, can be extended to other front‑end frameworks, and runs JavaScript logic in a JS engine while native components render the UI.

Key Features

Page development currently supports Rax and Vue (others possible with custom integration).

Write once, run on Android, iOS and web (requires SDK integration and some visual adaptation).

UI is drawn by native components; JavaScript runs in JavaScriptCore and communicates via WXJSCoreBridge.

Native extensions: custom native UI components (modal, webview, image) and modules (storage, network).

Each page is bundled into a single JavaScript file via webpack and rendered by the Weex SDK.

Why Choose Weex for Mobile Development?

Weex reduces development effort: a page that would normally need two developers (Android + iOS) can be built by one. Build times drop from minutes per native compile to seconds for UI changes. Bug verification is faster because many issues can be tested by simply restarting the app.

Dynamic updates are possible because the bundled JavaScript can be delivered over the air, enabling hot‑fixes and full page replacements without reinstalling the app.

Weex proved its maturity during Alibaba’s 2016 Double‑11 event, covering almost all pages with a 97 % instant‑open rate and 93 % overall page coverage. The project was later donated to the Apache Foundation.

Practical Usage at Youzan

We built a closed‑loop workflow covering development, debugging, building, publishing, and data management.

Development Tool – zweex‑toolkit

zweex‑toolkit is a scaffold based on the official weex‑toolkit, currently supporting Vue. It allows running only selected page directories, e.g.: npm run start hi,helloworld This command launches only the hi and helloworld directories.

Add new pages with zweex page.

Start debugging with zweex debug.

ZanWeex SDK Features

Configuration‑driven dynamic page replacement (h5 URL, js bundle URL, minimum app version, md5 checksum).

Independent configuration per module to avoid coupling.

Pre‑loading of page templates and configuration cache for near‑native rendering speed.

Hot‑reloading via a webpack‑dev‑server websocket that pushes render commands to the SDK.

Environment variables for view height, width, status bar height, and bottom height (iPhone X).

Development‑time log view accessible from the Weex page.

Parameter passing: forward (URL, params, data) and backward via a temporary storage class ZParamStorage; also supports BroadcastChannel for inter‑page communication.

Page Development Tips

Determine Weex usage by the need for native capabilities; custom modules or components are added when required.

Custom modules are needed for native features such as image picker, phone calls, SMS, opening other apps, encryption, or login logic.

Custom components are used when a native UI component must be wrapped or when a feature cannot be implemented in Weex (e.g., maps).

Layer ordering: lower layout nodes appear on top; place modal layers at the bottom of the hierarchy.

Animations can use the built‑in animation module or BindingX for complex effects.

Code reuse is achieved by extracting UI components, utility JS functions, CSS files, or using mixins.

Build and Release Platform

Projects are built with webpack, supporting multiple branches and repositories, and can be published to offline storage or CDN. A dedicated Weex release platform enables one‑click deployment, gray‑release, full release, rollback, and displays runtime metrics such as render time and errors.

Common Issues and Solutions

Iconfont caching is supported (memory cache keyed by family name, file cache by md5 of URL).

Module functions run on UIThread (asynchronous, callback required) or JSThread (synchronous, direct return).

Configuration update mechanism includes three retries, network‑state‑triggered pull, and fallback to built‑in config.

Versioned configuration ensures only compatible bundles are delivered based on the app’s minimum version.

Screen rotation is supported; Weex renders according to the new dimensions.

Future Work

Expand the component library.

Collect performance metrics (frame rate, memory, CPU).

Implement incremental and push updates for configuration and JS files.

Handle downgrade scenarios gracefully.