CoralSea Cross‑Platform Dynamic UI Solution: Architecture, Implementation, and Performance Evaluation

CoralSea is a cross‑platform dynamic UI solution created to address the performance, dynamic‑update, and integration‑cost challenges of existing frameworks such as H5, React Native, and Flutter in high‑traffic mobile applications.

The framework is driven by a domain‑specific language (DSL) called D2X, which provides dynamic data binding, layout description, and logic capabilities while ensuring compatibility across Android, iOS, H5, and mini‑programs.

Key components include a low‑code visual editor for product teams, the D2X‑Tool for developers, a modular component library, and a mobile engine built on Flexbox/Yoga that supports layout, styling, events, and custom actions.

Performance tests show CoralSea’s layout engine achieving comparable frame‑drop rates to Tangram and better than native layouts, while its dynamic package delivery (Arbitrary Door) enables rapid hot‑updates without full releases.

Real‑world deployments in Anjuke and 58 Tongcheng demonstrate significant development‑efficiency gains (up to 50% cost reduction) and the ability to handle regulatory‑driven UI changes through dynamic updates.

The architecture also incorporates a backend BFF service for API aggregation, a plug‑in component versioning system, and plans for AOT compilation to further reduce runtime overhead.

Future work focuses on enhancing the low‑code and D2X‑Tool experience, expanding component libraries, supporting mini‑program engines, and open‑sourcing the project.

{
// API and local variable definitions
"state"
: {
"api"
: {
"sqf"
: {
"name"
:
"sqf"
,
"method"
:
"GET"
,
"url"
:
"https://api.anjuke.com/mobile-ajk-broker/3.0/packall/coralsea-bffcustom/broker/getBrokerExtend"
}
    },
"store"
: {
"hideCardStyle1"
:
"true"
,
"hideCardStyle2"
:
"true"
,
"hideCardStyle3"
:
"true"
}
  },
// Lifecycle
"lifeCycle"
: {
"onCreate"
: [
      {
// Action expression to invoke API
"interfaceType"
:
"Expression"
,
"type"
:
"Action"
,
"value"
:
"InvokeApi"
,
"params"
: [
          {
"interfaceType"
:
"Expression"
,
"type"
:
"JSON"
,
"value"
: {
"name"
:
"sqf"
}
          }
        ],
"extra"
: {
// Success callback
"onSuccess"
: [
            {
// Action expression to send log
"interfaceType"
:
"Expression"
,
"type"
:
"Action"
,
"value"
:
"SendLog"
,
"params"
: [
                {
"type"
:
"JSON"
,
"value"
: {
"logId"
: [
                      {
"interfaceType"
:
"Expression"
,
"type"
:
"API"
,
"value"
:
"sqf.data.score.cards[0].sendLog.onAppear"
}
                    ]
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  },
// Layout start
"node"
: {
"id"
:
"RQRxyZiE7imzxfak"
,
"name"
:
"View"
,
"className"
:
"Container"
,
"child"
: [
      {
"id"
:
"jaxi3JdC3hxmkc2S"
,
"name"
:
"View"
,
"className"
:
"Column"
,
"child"
: [
          {
"id"
:
"WTeHWx4TjZzNExMd"
,
"name"
:
"View"
,
"className"
:
"Container"
,
"child"
: [
              {
"id"
:
"WHe4W8JiXBSxxj2h"
,
"name"
:
"View"
,
"className"
:
"Row"
,
"child"
: [
                  {
"id"
:
"kNGRmnm5QMJmsyRD"
,
"name"
:
"Image"
,
"className"
:
"Image.network, GestureDetector, GestureDetector"
,
"layout"
: {
"width"
:
"54px"
,
"height"
:
"54px"
},
"style"
: {
"display"
:
"flex"
,
"borderRadius"
:
"28px"
,
"borderWidth"
:
"1px"
,
"borderColor"
:
"#f0f0f0"
},
"props"
: {
"url"
: [
                        {
"interfaceType"
:
"Expression"
,
"type"
:
"Store"
,
"value"
:
"Local.userAvatar"
}
                      ],
"scaleType"
:
"aspectFill"
},
"event"
: [
                      {
"name"
:
"onClick"
,
"action"
: [
                          {
"interfaceType"
:
"Expression"
,
"type"
:
"Action"
,
"value"
:
"Jump"
,
"params"
: [
                              {
"type"
:
"String"
,
"value"
:
"openbroker2://vip.anjuke.com/mine/brokerinfo_act"
}
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}