How Weex Enables Lightweight, High‑Performance Cross‑Platform Mobile UI Development

Key Features

Lightweight

Small size, simple syntax, easy to get started.

Extensible

Business teams can horizontally customize native components and APIs.

High Performance

Fast loading, fast rendering, smooth experience.

Other Advantages

Embraces standards: designed based on Web standards.

Responsive UI: simple templates and data binding easily synchronize data and view.

Multi‑platform consistency: iOS, Android, HTML5 share the same effect; write once for cross‑platform consistency, saving time and effort.

Complex logic description: dynamic not only in visual effects but also in real‑time adjustment of data processing and logic control.

Componentization: components are isolated via webcomponents design and can exchange data and events in specific ways.

Ecosystem & toolchain: provides packaging tools, debugging tools, deployment platform, playground, examples, guides, and documentation, so developers are not starting from zero.

How It Works

1. Local Component Development

We split a component into <template>, <style>, and <script>, corresponding to structure, style, and data & logic.

Detail 1: This is also considered best practice for describing UI.

Code example:

<template>
  <container style="flex-direction: column;">
    <container repeat="{{itemList}}" onclick="gotoDetail">
      <image class="thumb" src="{{pictureUrl}}"></image>
      <text class="title">{{title}}</text>
    </container>
  </container>
</template><style>  .thumb {width: 200; height: 200;}  .title {flex: 1; color: #ff0000; font-size: 48; font-weight: bold; background-color: #eeeeee;}</style><script>  module.exports = {    data: {      itemList: [        {itemId: '520421163634', title: 'Item 1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},        {itemId: '522076777462', title: 'Item 2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}      ]    },    methods: {      gotoDetail: function () {        this.$openURL('https://item.taobao.com/item.htm?id=' + this.itemId)      }    }  }</script>

Since native apps cannot directly recognize this code, we perform three steps:

Use a local tool called transformer to convert the code into pure JavaScript.

Run a JavaScript engine on the client to execute the JavaScript.

Design a JS Bridge on the client so native code and the JavaScript engine can communicate.

Thus, the second step is to transform the code into client‑runnable JavaScript.

Local development also involves decomposing complex UI into components and establishing proper composition and invocation relationships.

Finally, we bundle simple components into a complex UI and package it as a program package (essentially a JavaScript bundle).

Detail 2: Although Weex component development is close to Web component development, the transformer adds friendly reminders to avoid common mistakes.

2. Client‑Side Rendering

The client runs a JavaScript engine with a JS Bridge. Communication between native rendering and the engine falls into three categories:

UI rendering (one‑way JS → native): JavaScript sends structure and style to native for final UI.

Event binding & triggering (two‑way): Native handles thin event layer; logic runs in JavaScript, which listens for interactions and receives callbacks.

Data/Info requests & responses (two‑way): JavaScript can request server data, system info, or native features via the JS Bridge, and native returns results.

With Weex instance management, the whole mechanism works smoothly.

Detail 3: Native rendering mainly uses images and text, heavily relying on standard CSS for fine‑grained styling.

Detail 4: All framework‑level JavaScript is pre‑loaded locally, making the transmitted bundle tiny and initialization cost low, which directly impacts launch speed.

Detail 5: We use data listening + dependency collection instead of dirty checking or full Virtual DOM diff, which suits the small‑scale data changes typical on mobile.

Detail 6: Common business components are packaged with standardized tags, attributes, styles, events, and hierarchy constraints, enabling rapid UI assembly.

Detail 7: Common business APIs are also wrapped and exposed as standardized JavaScript APIs.

3. Server‑Side Deployment

The server provides package publishing, assigning each package a unique page ID. Clients fetch packages by page ID, enabling dynamic deployment, client‑side rendering, and logic processing.

Detail 8: Besides UI, the client‑side JavaScript engine and parts of native implementation also support dynamic updates.

4. Browser Rendering

When a user does not have the native app, the same JavaScript bundle can be rendered in a browser as an HTML5 page. We achieve this by reusing the JS Bridge logic and component definitions for the web.

Detail 9: The HTML5 version shares the same abstractions for JS Bridge, component, and API definitions, though it may have performance trade‑offs compared to native.

5. Tooling

We also provide developer tools for native debugging and visual editors for UI composition, which are under active development.

Recap of Weex Characteristics

Lightweight

We focus on minimizing development effort, network payload, and runtime overhead while reducing multi‑platform adaptation costs.

Horizontal Extensibility

Component definitions and business functions are designed for easy horizontal extension, allowing teams to customize native components and APIs and publish dynamic packages.

High Performance

Optimizations in network transfer, instance initialization, JavaScript execution, and native rendering deliver significant speed and smoothness improvements, especially on low‑end Android devices.

Performance comparison from a recent QCon presentation demonstrates these gains.

Conclusion

Weex aims to:

Target mobile platforms.

Fully leverage native capabilities.

Address performance bottlenecks.

Provide flexible extensibility.

Achieve multi‑platform consistency.

Gracefully degrade to HTML5.

Maintain low development cost.

Support rapid iteration.

Enable lightweight real‑time publishing.

Integrate with existing native ecosystems.

Offer engineering management and monitoring.

Weex continues to improve performance, extensibility, cost efficiency, and ecosystem completeness while exploring broader business integration.