How Youku Built HarmonyOS Widgets: A Deep Dive into Mobile Development

Background

With the release of HarmonyOS 2.0, many manufacturers partnered with Huawei. Youku, a leading video platform in China, has closely collaborated with Huawei and quickly began researching the HarmonyOS system and developer SDK. The Youku technical team explored new HarmonyOS features to develop applications.

Ability Model

HarmonyOS deploys applications as Abilities. There are two types: Feature Ability (FA) with a UI and Particle Ability (PA) without UI. Each type provides templates for specific business functions.

Application Package

HarmonyOS apps are distributed as APP Packs, which consist of one or more HAPs (HarmonyOS Ability Packages) and a pack.info describing each HAP. HAPs are the deployment units for Abilities.

Card Development Mode

On the phone’s home screen, sliding up the Youku icon reveals a HarmonyOS card that recommends recent hot shows. Clicking the card opens a half‑screen landing page, and clicking the landing page launches the corresponding Youku client page. The card can be pinned to the desktop. The card’s package must be under 10 MB to appear in the Service Center without installation.

Card Styles

HarmonyOS provides four card sizes: 1x2, 2x2, 2x4, and 4x4. Youku implements the 2x2 (mandatory) and 2x4 styles.

Card Declaration

Cards are declared in each module’s config.json under the abilities array. Setting formsEnabled to true indicates the Ability defines a card, and the forms array describes one or more card definitions, including layout files, supported dimensions, update settings, and request codes.

{
  "formsEnabled": true,
  "forms": [
    {
      "landscapeLayouts": ["$layout:youku_widget_2_2", "$layout:youku_widget_2_4"],
      "portraitLayouts": ["$layout:youku_widget_2_2", "$layout:youku_widget_2_4"],
      "isDefault": true,
      "defaultDimension": "2*2",
      "name": "youku_widget",
      "description": "$string:yk_widget_description",
      "colorMode": "auto",
      "type": "Java",
      "supportDimensions": ["2*2", "2*4"],
      "updateEnabled": true,
      "updateDuration": 1
    }
  ]
}

Lifecycle

HarmonyOS cards have three callbacks:

/** Create card callback */
protected ProviderFormInfo onCreateForm(Intent intent) { ... }

/** Update card callback */
protected void onUpdateForm(long formId) { ... }

/** Delete card callback */
protected void onDeleteForm(long formId) { ... }

Data Transmission

Card content is provided by a ComponentProvider. It can be created either in onCreateForm() by obtaining the provider from a ProviderFormInfo instance, or directly in onUpdateForm().

// In onCreateForm()
ProviderFormInfo form = new ProviderFormInfo(layoutId, context);
ComponentProvider cp = form.getComponentProvider();

// In onUpdateForm()
ComponentProvider cp = new ComponentProvider(layoutId, context);

Data Caching

Card data returned from network requests is cached locally using SQLite. One table stores data for each card size, and another table records each card’s metadata (unique ID, size, reference to the data record). This allows rendering cached content when the network is unavailable.

Error Handling

If a user adds a card without network and no cache exists, the card shows a gray placeholder. Clicking it displays a loading‑failed message until the network recovers.

Outlook

Future work includes improving performance (reducing WebView overhead), adding JS crash monitoring, and implementing remote configuration without increasing package size.

Upcoming

The second article in the “Youku HarmonyOS Development Practice” series will cover the Android/HarmonyOS mixed packaging process.