How Baidu’s BlendUI Makes Webview Transitions as Smooth as Native Apps

Background

Baidu lightweight apps have been available for over half a year, offering strong distribution channels but lagging behind native apps in user experience, especially as applications become more complex.

Historically, mobile web sites attempted page‑transition effects without full reloads, but performance on even high‑end phones was unsatisfactory, leading developers to avoid complex effects on lower‑end devices.

Consequently, JavaScript‑based page transitions are now rare on Android, and many Baidu products have switched from JavaScript scrolling to native scrolling, focusing development resources on native apps.

Research Findings

Surveys and reports highlight performance as the primary obstacle for webapps:

46% of developers cite performance as the main reason for not using HTML5, followed by lack of APIs (37%) and integration with native elements (29%).

Analysis of 30,339 Google Play apps shows HTML5 alone could implement 37% of them, PhoneGap 49%, and Appcelerator 63%.

Within Baidu’s own 16 webapps, 87.5% of engineers identified transition and animation issues as the top bottleneck.

Implementation Idea

Business Scenario of Lightweight Apps

Lightweight apps are launched from mobile search or the Baidu Search app. Inside the Baidu Search app a special runtime (the “Clouda API”) exposes native capabilities such as the Device API and MBASS API to JavaScript code.

Technical Choice

Because lightweight apps already run in a native‑enhanced environment, the team chose native techniques for page transitions instead of pure JavaScript solutions. Early attempts to emulate Appcelerator’s approach—compiling JavaScript to native code—were rejected due to poor developer flexibility and a cumbersome Java‑like API.

Every Element Can Be a Webview

The core concept is that each UI element can be rendered in its own webview. This reduces the DOM size of any single webview, eliminates heavy repainting, and raises frame rates from roughly 30 fps to 60 fps.

In practice a single‑page webapp is split into multiple webviews—for example, a header webview, a content‑area webview, and separate webviews for individual pages. The Baidu Reader app demonstrates this architecture:

Core Implementation

Design Principles

Model Simplicity : BlendUI gives JavaScript direct control over webview instances.

Event‑Driven : All communication between webviews, JavaScript, and native code is handled via events.

Maximum Flexibility : Developers can continue to use any libraries or frameworks; BlendUI imposes no UI style constraints.

System Overview

The architecture consists of two layers. The native layer (blue) provides a lightweight runtime with a plugin mechanism and the BlendUI component that controls webviews. The web layer (green) wraps these capabilities and exposes a unified JavaScript API.

Key Concepts

Layer represents a single webview; LayerGroup is a collection of layers that can be swiped or transitioned together.

new Layer({
    url: "/path/to/tab.html",
    top: 0,
    left: 0,
    height: "30px"
});

A LayerGroup can manage the remaining screen area:

new LayerGroup({
    url: "/path/to/content.html",
    top: 30,
    left: 0,
    layers: [
        { url: "/path/to/content1.html" },
        { url: "/path/to/content2.html" }
    ]
});

These JavaScript APIs are injected into the window context via the native window.lc_bridge method.

Event listeners enable UI updates during transitions:

document.addEventListener('groupScrolled', function(index){
    highlightSwitch(index);
});

Native components such as a Slider can be loaded dynamically through the bridge:

new Slider({
    "images" : [
        { "url": "/path/to/photo1.jpg" },
        { "url": "/path/to/photo2.jpg" }
    ]
});

Applicable Scenarios

The approach is valuable for lightweight‑app developers who need native‑level experience without writing native code. Once BlendUI is integrated into the Baidu Search app runtime, any lightweight app can benefit from smoother transitions and reduced DOM overhead.

It also suits large applications with multiple independent channels (e.g., sub‑sections of a social platform) by allowing rapid, low‑cost deployment while maintaining high customization and performance.