Template-Container-Component三层结构实现页面布局的结构化与动态化，结合DX动态组件、keypath数据绑定协议和内置核心服务（如布局、数据、埋点等），提升了开发效率30%-50%，实现了双端一致性、体验优化开箱即用（如无极缩放转场、多媒体浏览）以及页面的远程动态更新。同时，依托Skyline模板发布平台，支持高效、安全的模板管理与AB测试，最终形成了一套可复用、易扩展、高稳定性的Native页面底层构建引擎，已在穿搭星球等多个场景落地并持续演进。背景介绍
|
|
||
|
|
为什么需要⻚⾯搭建
TurboUIBuilder设计
/*** 引擎上下文** 用于获取引擎的配置和微服务** */interface TurboEngineContext {/*** 获取服务* @param serviceClass 服务类* @return 服务* */fun<T:IService> getService(serviceClass: Class<T>): T/*** 获取Context的上下文* @return 上下文* */fun getContext(): Context/*** 获取引擎配置* @return 引擎配置* */fun getTurboEngineConfig(): TurboEngineConfig/*** 获取引擎的唯一实例id* @return 实例id* */fun getInstanceId(): String}
3. Service
服务是对独⽴模块的封装，单⼀职责设计，对外通过接⼝提供能⼒，实现⾼内聚低耦合。
/*** 微服务接口** */interface IService {/*** 服务创建* */fun onCreateService(context: TurboEngineContext)/*** 服务销毁* */fun onDestroyService(context: TurboEngineContext)}
引擎内置了核⼼服务的实现, 这些服务包含了平时Native开发必须的，但是相对固化和通⽤的能⼒；经过对以往Native⻚⾯开发分析整理，我们梳理了如下核⼼服务:
核心服务 |
|
class TemplateFactory {companion object {const val LAYOUT_TYPE_DEFAULT_TEMPLATE = "defaultTemplate"const val LAYOUT_TYPE_LIST = "defaultListTemplate"const val LAYOUT_TYPE_TAB = "multiTabTemplate"}private val layoutServiceMap:MutableMap<String, KClass<out TemplateComponent>> = mutableMapOf()init {registerTemplateType(LAYOUT_TYPE_DEFAULT_TEMPLATE, DefaultTemplateComponent::class)registerTemplateType(LAYOUT_TYPE_TAB, MultiTabTemplateComponent::class)registerTemplateType(LAYOUT_TYPE_LIST, DefaultListLayoutComponent::class)}fun createTemplateComponent(type: String, context: TurboEngineContext): TemplateComponent? {return layoutServiceMap[type]?.java?.getConstructor(TurboEngineContext::class.java)?.newInstance(context)}fun registerTemplateType(type:String, layoutComponent: KClass<out TemplateComponent>) {layoutServiceMap[type] = layoutComponent}}
Container:
Contaienr则对应Template中的某个区块(对应户型中的某个区块，如阳台, 主卧等)，每个Container由一个Component列表组成，比如上下布局页面，整个页面会包含topBar, body, bottom, pop 4个区块；而一个多tab的布局则包括header, segments, tabs等区块， 业务可以随意配置各个区块长什么样。
Component:
Component是页面搭建系统中最小的组成单元，表示了独立的业务模块，可以是一个卡片或者导航条。一个Component负责渲染该模块的UI，并根据数据模型的更新进行UI刷新。
/*** 组件基类*/abstract class BaseComponent<MODEL, VIEW : View> : IComponentLifecycle<MODEL> {protected abstract val context: Contextvar view: VIEW? = nullprivate setvar data: MODEL? = nullprivate setvar state: State = State.NOT_CREATEprotected setoverride fun onCreate(data: MODEL?, triggerType: TriggerType) {checkAndHandleStateError(State.CREATE)this.data = datastate = State.CREATE}/*** 创建组件视图* @return 创建的视图*/open fun createView(): VIEW {val view = createViewImpl()view.setTag(R.id.turbo_component_tag, this)this.view = viewreturn view}protected abstract fun createViewImpl(): VIEWoverride fun onStart(triggerType: TriggerType) {checkAndHandleStateError(State.START)state = State.START}override fun onResume(triggerType: TriggerType) {checkAndHandleStateError(State.RESUME)state = State.RESUME}override fun onPause(triggerType: TriggerType) {checkAndHandleStateError(State.PAUSE)state = State.PAUSE}override fun onStop(triggerType: TriggerType) {checkAndHandleStateError(State.STOP)state = State.STOP}/*** 更新组件数据* @param data 更新的数据*/fun updateData(data: MODEL) {this.data = dataupdateDataImpl(data)}protected open fun updateDataImpl(data: MODEL) {}override fun onDestroy(triggerType: TriggerType) {checkAndHandleStateError(State.DESTROY)state = State.DESTROY}}
业务示例
最外层是⼀个上下布局的defaultTemplate, 有顶部topBar导航区，body内容区，bottom底部区块以及poplayer弹窗区4个Container, 在频道⻚只需要topBar和body两个 Container，其中topBar这个Container内部只有⼀个DX Component进⾏渲染， ⽽body由另外⼀个⼦Template进⾏渲染。 body对应的⼦Template为defaultMultiTabTemplate, 有header, segments以及tabs 3个 Container, defaultMultiTabTemplate负责对多Tab进⾏⼦tab渲染/切换以及⽣命周期管理。
|
|
||
"segment": [{"type": "dress_tab_layout", //dx模板名称"data": "{{$.tab}}" //绑定原始数据上的tab字段}],"tabs": [{"type": "infoflowListComponent", //native组件名称"data": "{{$.tab.tabs}}", //绑定原始数据上的tab.tabs字段"isRepeat": true}]
▐ 设计⻚⾯模板协议
核⼼协议结构标准化, 采⽤统⼀的JSON Schema格式, 降低学习成本； -
清晰的层次关系, template → root → page/components/layout 的层次结构清晰明了； root: 主模板⼊⼝ page: 模板基础配置信息 components: 模板组件列表信息(⽐如dx url版本信息) layout:模板的container配置信息，和components中的组件相关联 ⼀致的命名规范：所有字段命名遵循统⼀的驼峰命名规范。
{"data":{}, //业务数据，与模板数据完全隔离，对服务端无侵入"template": { //页面模板数据"bizId": "bizId", // 业务标识,用于区分不同的业务场景，如穿搭频道，穿搭详情"version": "1", // 模板版本,版本控制字段,ab/版本隔离"root": { // 根模板定义，页面加载入口"page": { // 页面配置"type": "defaultTemplate", // 模板类型,描述页面渲染结构"config": { ... }, // 页面配置，页面样式，缓存配置"utParams": { ... } // 埋点参数"customConfig": { ... }, // 自定义配置},"components": [ ... ], // 组件定义，包括组件版本信息"layout": { // 布局结构"topBar": [ 组件 ], // 顶部栏"body": [ 组件 ], // 主体内容"bottom": [ 组件 ] // 底部栏"pop": [ 组件 ] // 浮层区}},"subTemplates": [ ... ] // 子模板定义，用于模板嵌套/复用}}
{"template": {"bizId": "dressUpFeed","version": "2","root": {"page": {"type": "defaultTemplate","config": {"enablePageCache": true},"utParams": {}},"components": [{"type": "dress_home_navbar","renderMode": "dx","dx": {"name": "dress_home_navbar","version": 15,"url": "cdn url","columnType": "one"}}],"layout": {"body": [{"data": "{{*}}","isTemplate": true,"refId": "dressup_multitab"}],"topBar": [{"type": "dress_home_navbar","data": "{{*}}"}]}},"subTemplates": [{"name": "dressup_multitab","page": {"type": "multiTabTemplate","config": {"initTabIndex": "{{$.tab.selectedTabIndex}}"}},"components": [{"type": "dress_tab_layout","renderMode": "dx","dx": {"name": "dress_tab_layout","version": 14,"url": "cdn url","columnType": "one"}},{"type": "infoflowListComponent","renderMode": "native"}],"layout": {"segment": [{"type": "dress_tab_layout","data": "{{$.tab}}"}],"tabs": [{"type": "infoflowListComponent","data": "{{$.tab.tabs}}","isRepeat": true}]}}]}}
⽆极缩放转场
多媒体浏览体验
|
|
|
收益
双端从零构造新页面，页面框架、数据加载、UI渲染逻辑混合在一起，在稳定性/复用和双端一致性难以保证 |
|||
可复用的页面搭建框架, 开发规范，稳定性，持续优化和演进
双端一致，AI Coding更提效 |
思考和后续规划
进⼀步模板协议标准化, 建⽴完善的模板协议设计规范，确保协议结构清晰、易于理解和扩展。 端侧模板/组件能⼒标准化建⽴统⼀的组件设计规范，构建丰富的通⽤组件库，确保组件接⼝双端⼀致、业务解耦，提⾼复⽤性和可维护性。 模板/组件⽣态⽀持更多样化的⻚⾯布局模板和组件能⼒扩展，建⽴更丰富的组件和模板库。
⻚⾯搭建平台提升易⽤性，包括配置参数的可读性/错误检验能⼒进⼀步提升，发布监控能⼒等等。 端侧接⼊⽅能快速接⼊，调试成本低，提供强⼤易⽤的扩展能⼒。 提供完善的性能/异常监控能⼒，帮忙业务接⼊⽅快速排查问题。
团队介绍
本文作者水军，来自淘天集团-推荐客户端团队。 本团队负责手淘推荐域、Tab2等亿级流量核心场域，直面高复杂度业务挑战，打造千万用户每日体验的内容生态与沉浸式交互！同时突破端智能应用前沿技术，主导推荐场景端智能落地（智能重排、AI探索实践）、架构演进，用技术驱动业务创新！
招聘:
🔥 【淘天集团·Android/IOS客户端急招！推荐 & 端智能应用，主导手淘亿级核心场域！】 🔥
✅ 成长双引擎驱动
业务深度：参与手淘核心链路技术建设，深度优化性能、稳定性及用户体验；
技术高度：探索客户端与AI融合场景（端侧智能、实时推荐），打造技术竞争力！
✅ 团队轻松有爱
🏃 周三C区健康日：全员跑步打卡，半马选手领跑（程序员的第一公里）
🍻 生活充电站：每月盲盒主题聚餐（露营烧烤/杭帮菜探店）+ 户外徒步（西溪湿地/梦想小镇）
🧠 硬核分享会：每周五技术技术开放麦（端侧推理实战/AI业务落地/跨端前沿实践)
📍 Base地：杭州
⏳ HC有限，招满即止！流程闪电推进：简历→面试→Offer，全程高效！
如果你渴望在业务架构设计领域继续精进，共同探索AI时代技术演变路径，欢迎联系我们junqing.wjq@taobao.com或shuijun.wsj@taobao.com。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
