Cross‑Platform Dynamic Development with MCube: Practices, Architecture, and Lessons Learned

As the demand for cross‑platform dynamic development grows, our team summarizes the MCube dynamic‑UI practice to provide experience and reference for others.

Background : Rapid iteration exposed large business demands, high multi‑platform development and release costs, and performance gaps when using H5 pages instead of native. After evaluating several solutions, we selected MCube for its low integration cost, rich atomic components, component market, and reusable XML templates.

Advantages of MCube :

Mature solution with low entry cost for JD ecosystem apps.

Highly flexible atomic components.

Comprehensive component market.

Reusable XML templates across platforms.

During integration we faced compatibility issues, but MCube’s team responded quickly, providing efficient custom development and support.

Single‑Floor Dynamic Transformation : We wrapped MCube SDK interfaces and created local modules. The data layer includes module , templateID , data , nativeData , and groupID to support native fallback and section grouping.

In the view layer we built a DynamicViewModel ‑based CommonTableViewCell to load dynamic views. The cell capabilities include parsing module/templateID, downloading templates, rendering DynView , handling fallback views, and exposing native layout IDs via callbacks.

self.successBlock = ^(DYNContainerView * _Nonnull dynamicView) {
    UIView *nativeView = [dynamicView getRrenderViewWithLayoutId:@"100"];
    if ([nativeView isKindOfClass:[原生视图类名 class]]) {
        // native event handling
    }
};

Full‑Page Dynamic Transformation : We aim for every floor on a page to be dynamically delivered, allowing native and dynamic floors to coexist, driven by data and configurable switches for downgrade.

We redefined the backend result structure to a dynamicFloors array, where each element contains type , module , templateID , groupID , and data . Floors with module and templateID are parsed by DynamicViewModel and displayed via CommonTableViewCell .

{
    "result":{
        "dynamicFloors":[
            {
                "type":"楼层类型",
                "module":"页面名",
                "templateID":"模版ID",
                "groupID":"part1",
                "data":{ }
            }
        ]
    }
}

Q&A and Pitfalls :

Installation/compilation errors after adding JDBDynamicModule due to class/method name conflicts.

Choosing floors suitable for dynamic conversion: flexible UI, simple interaction, and minimal iOS/Android differences.

Template loading failures often stem from incorrect module / templateID or missing network bridge implementation.

Network bridge example:

+ (void)load {
    [DYNMapperManager registeProtocolName:DYNProtocolConfig.networkProtocolName handlerClassName:NSStringFromClass(self)];
}

Implement required protocol methods such as getServerURL , requestWithSetupModel:finish:cancel: , and getNetworkType to route requests through the bridge.

For image loading, create UIImageView+DYNBImageViewHandler category and use third‑party libraries like SDWebImage.

Using Native Views in Templates :

#pragma mark - DYNCustomViewProtocol
- (id)getCustomView {
    return self;
}
- (void)setDataWithValue:(id)value object:(id)object sender:(DYNViewLayout *)sender {
    if ([value isKindOfClass:[原生模型 class]]) {
        // refresh native view with model
    }
}

Register the mapping in +load :

+ (void)load {
    [DYNMapperManager registeProtocolName:@"模版元素名" module:@"模块名" handlerClassName:@"原生视图组件类名"];
}

Template snippet:

<FlexboxLayout layoutId="999" width="match_parent" height="wrap_content" flexDirection="column" justifyContent="flex_start" bgColor="#FFFFFF">
    <模版元素名 layoutId="100" width="100%" height="100%" data="${原生模型对应key}" bgColor="#FFFFFF"></模版元素名>
</FlexboxLayout>

Platform Differences : Android may have issues with nested scrolling components, FlexboxLayout 100% width scrolling, ImageView scaleType, and gradient syntax, requiring platform‑specific adjustments.

Complex Logic in Templates :

<ImageView height="$calc(44*SCREEN_WIDTH/375)" width="$calc(SCREEN_WIDTH)" />
<ImageView src="@{${data.img1}?${data.img1}:${data.img2}}"/>
<View visibility="@{${data.show}!=null?1:2}"/>
<FlexboxLayout bgColorList="$joint(${startColored},$unescape(comma),${endColored})">
    <TextView text="$joint((${data.text1}  ${data.text2}))"/>
</FlexboxLayout>

Template Upload & Release : Upload templates to the configuration platform, create app/module/floor entries, publish versions, and optionally use whitelist or gray‑release controls.

Downgrade Strategies :

View level: use nativeData when dynamic view loading fails.

Data level: control presence of module / templateID to switch between native and dynamic.

Business level: configure a dynamicWhiteList on the platform to enable/disable dynamic rendering per module‑template pair.

{
    "dynamicWhiteList":{
        "页面名module":{
            "模版templateID 1":true, // downgrade
            "模版templateID 2":false // dynamic
        }
    }
}

By following these practices, teams can achieve efficient cross‑platform dynamic UI development while minimizing integration pain points.