Automated Tracking and Dynamic Layout with MTFlexbox in Mobile Development

Background

Cross‑platform dynamic UI technology is a key focus in the mobile Internet field because it can save manpower and enable rapid business rollout. After ten years of evolution, Meituan’s App has become a super‑platform that hosts many business lines. Traditional static mobile development suffers from large package sizes, difficult bug fixes, and long release cycles, which cannot meet the fast‑changing business needs. To address these issues, Meituan built a cross‑platform dynamic solution called MTFlexbox .

MTFlexbox Overview

MTFlexbox follows the CSS Flexbox specification and defines a unified XML layout format for Android, iOS and React‑Native. The XML layout is uploaded to a backend service; the client downloads the JSON representation, binds data, and finally renders native views. The architecture consists of three cache layers (XML file, Node tree, View tree) and a Node layer that decouples XML from native views.

Applicable Scenarios

MTFlexbox is suitable for complex, frequently changing layouts with simple interactions, such as Meituan’s home page and search results. It works well when multiple business units need customized UI styles while the interaction logic remains straightforward.

Challenges of Manual Tracking

Embedding tracking (埋点) directly in XML layouts leads to high communication cost, high development cost (about 30% of layout coding time), and frequent online incidents caused by missing or incorrect tracking.

Automated Tracking Solution

The solution decouples tracking configuration from layout authoring. Data engineers configure tracking on a visual UI that displays the layout hierarchy and screenshots, while developers only write the layout. The workflow includes:

Developers create XML layout files and upload them with backend data.

The backend renders the layout on a remote device, captures screenshots and hierarchy information, and stores them.

Data engineers select UI elements in a visual tree and configure tracking tags.

The system generates a new XML layout that embeds the tracking attributes.

The client receives the enriched XML and reports tracking data automatically.

Code Example – Layout with Tracking Attributes

<Container style="width:360pt;justify-content:center;">
    <Var name="see_MGE4" type="json">
        {
        "bid":"xxxxx",
        "cid":"yyyyy",
        "lab":{
            "isDynamic":true,
            "gather_index":"{extra.gather_index}",
            "index":"{extra.index}"
        }
        }
    </Var>
    <Container
          see-mge4-report="{see_MGE4}"
          click-url="{business.iUrl}"
          visibility="{{display.itemDynamic.imageUrl}?visible:displaynone}">
        <Img style="width:331pt;height:106pt;justify-content:center;"
            border-radius="5pt"
            scale-type="center-crop"
            src="{display.itemDynamic.imageUrl}"
            background="#FFF8F8F8" />
    </Container>
</Container>

Generated XML after Tracking Configuration

<?xml version="1.0" encoding="UTF-8"?>
<Container>
    <Var auto-mge="true" name="ff510aa110844bb78c0b86fb04b26460" type="json">
        {
            "bid" : "xxxxx",
            "cid" : "sssss",
            "lab" : {
                "index" : "{_index}"
            }
        }
    </Var>
    <!-- 整个容器 -->
    <Container background="#FFFFFF" border-radius="10pt"
        click-mge4-report="{ff510aa110844bb78c0b86fb04b26460}"
        click-url="{_iUrl}" padding-left="10pt" padding-right="10pt">
        <!-- 左半部分 -->
        <Container style="flex-direction:column;justify-content:flex-start;margin-top:15pt;">

Results and Outlook

The automated tracking solution has been deployed in Meituan’s homepage and other high‑traffic services, reducing tracking cost by about 80% and eliminating tracking‑related incidents. Future work includes standardizing backend data formats to enable fully dynamic tracking configuration and further reducing manual effort.