⑴作者团队：应用业务产品研发部张娟、洪鑫、黄鑫、朱利娟
⑵通天塔作为营销活动页的搭建系统，一直以来为运营、商家提供丰富、强大的搭建能力。随着大促、全渠道等全平台活动及频道场景的覆盖，不同的业务对样式提出了不同的个性化诉求，而现有通天塔模板涉及已有样式外的调整大多需要定制开发，存在研发成本且很难快速满足业务需求。
⑶为了解决以上问题，通天塔灵活化模板方案应运而生，致力实现产研提效降本同时对业务输出简单易用、多端体验一致的灵活多样化模板搭建能力。
⑷那么灵活化模板能做什么呢？简单来说，产研通过制定元素协议和规范，保障系统性能与稳定的同时支持生产各种样式灵活、数据多元的元素。用户在B端灵活画布中自由拖拽、调整元素位置及样式，即可自动生成适配多端的活动页面。H和客户端基于同一份活动页面数据进行样式解析、数据寻址及组件复用，实现活动页的渲染效果及交互一致性。
⑸接下来将按照灵活化模板的搭建到多端呈现的顺序，分别从CMS搭建平台、H及原生多个角度阐述模板灵活化在各端的应用与实践。通过本文可以进一步了解在页面样式大爆发的时代，通天塔如何挑战自我、勇于创新，为用户提供更优质的活动页搭建服务和赋能多元化业务场景的解决方案。
⑹图一 灵活化模板示意图
⑺CMS灵活化模板的架构解析整体架构与实现
⑻在灵活化模板的生产与维护方案设计时，打破固有思维局限，将元素独立于模板之外，采用配置+协议的方式动态构建。如下图所示：
⑼图二 CMS灵活化模板的整体架构图
⑽圈定素材池：据根据通天塔接入的素材来源分类，将通用的素材类型分为商品池、图文池、内容池等，便于同类型的素材复用同一元素样式，后续还会接入更多的素材类型。
⑾聚合元素池：将页面楼层元素进行抽象，剥离业务逻辑，沉淀出更加通用、普适的元素类型。分别有文本、图片、价格等基础类元素，以及含固化逻辑的定制类元素，和供开发者根据元素协议参与的共建元素。通过关联素材池字段，生成包含数据属性的元素样式，最终聚合成元素池。
⑿搭建灵活化模板：在页面搭建时提供了更加便捷、轻量级的灵活画布，用户可以基于此自由布局楼层元素，还可以定制事件跳转、兜底过滤等个性化规则。
⒀在灵活化模板的搭建与使用过程中，灵活画布作为核心支持，提供了灵活化模板预设样式的配置及用户搭建自定义楼层样式的双重能力。
⒁图三 灵活画布的实现
⒂如上图所示，主要有三大组成模块：
⒃源数据接入模块：主要负责接入元素池中的元素数据、管理用户已添加的元素等。
⒄画布操作模块：作为用户操作的核心模块，除了需要解析模板内的元素对象，还需要提供方便快捷的元素操作。所以在这里构建了不同的功能模块，包括有：
⒅数据模块提供将元素绑定的字段映射成真实值的能力。通过字段解析器和消费计算器结合用户关联的素材组，解析出元素需要展示的真实素材值。
⒆属性配置模板包括对元素属性的解析以及渲染元素属性操作面板，如宽高、颜色、边距圆角等基础属性项，还提供了如兜底过滤、事件跳转等定制类属性的配置入口，解决了过往用户的个性化场景诉求需要通过定制开发才能实现的问题。
⒇预览模块调用了自研的组件库，与H共用元素渲染逻辑，保证了各元素与线上渲染效果的一致性，提升用户搭建体验的同时也避免了活动页反复发布后修改，极大提高了搭建效率。此外还提供canvas结合drag/drop等能力，为用户创建犹如使用绘画板般自由便捷的搭建场景。
⒈通过联动校验模块对用户行为进行联动与校验，不仅保证了样式搭建的有效性，还能够给予更友好的操作引导。
⒉数据导出模块：将用户操作结果导出为符合既定协议的元素集合，该数据不仅可以结合灵活化模板使用，未来还可以开放赋能给其他类型模板。
⒊H灵活化模板的架构与实现
⒋目前 H 主要承担了以下三个场景的模板呈现：
⒌. Touch Web：将灵活化模板渲染为H页面，宿主环境包括手机浏览器、小程序或微信浏览器等；
⒍. CMS预览：为了实现“所见即所得”的搭建体验，H提供了模板预览组件库；
⒎. 原生降级：当原生App受限于版本管理或发生异常时常被降级，H可提供基于webview的页面兜底。
⒏为了提升模板复用度，将灵活化模板的解析和渲染逻辑封装为独立npm包，方便应用于不同业务场景中。按功能划分，H灵活化模板架构如下：
⒐图四 H灵活化模板架构图
⒑Typescript+React：借助TS在类型检查和代码提示方面的优秀表现，减少了开发阶段出错的概率；同时为了与现有H、CMS的前端框架及渲染机制保持一致，选择使用React开发UI组件。
⒒styled-ponents：SC目前是最受欢迎的“CSS in JS”思想的React组件样式解决方案。特别是在通天塔CMS高频样式变化的场景中，采用一套成熟的动态化样式计算方案尤为重要。通过打包时支持将SC external化，解决SC包体积大的问题。
⒓数据层的字段约束是解析层工作的基础。在服务端下发的楼层数据floor中，依据dataPath字段在数据源中查找消费素材，style字段获取模板样式，通过一整套既定的解析协议从而构建完整的模板数据。
⒔解析的目的是为了得到一颗可以描述当前模板状态的组件树，结合后续的UI组件渲染最终呈现在页面中。首先将楼层数据中的模板类型映射成相应的画布类型；再遍历元素列表，根据dataPath数据路径和style对象动态生成元素对象嵌入到画布中。具体解析流程如下图所示：
⒕图五 H灵活化模板解析流程图
⒖为了解决模板的跳转行为和事件在不同环境（如原生App内、小程序等表现有差异的问题，这里将与环境相关的配置单独提取出来应用到灵活化模板中，不仅实现了APP、H和小程序环境中的正常跳转，同时也达到了“一次配置、多处可用”的效果。
⒗根据既定协议使用React开发相应UI组件，将解析层返回的组件树渲染到页面中。
⒘在前端工程化实践方面，基于 Jest+React Test Library 的搭建单元测试环境，目前单测覆盖率已达%；基于Storybook搭建了UI组件预览页面，可在线查看组件预览情况。同时将单测和组件预览界面更新纳入持续集成中，包发版时自动完成单元测试和预览更新。
⒙客户端灵活化模板的架构与复用逻辑
⒚在方案设计时，为了使灵活化模板不仅可以在通天塔页面内使用还能应用到其他页面或APP，我们选择将灵活化模板渲染成原生控件的逻辑封装成一个SDK，如下图所示：
⒛图六 客户端灵活化模板架构图
①数据&UI渲染：通过对楼层数据的解析，映射出容器、画布及元素，再依赖数据寻址逻辑，最终渲染出各种原生控件。
②应用服务：将依赖宿主APP的网络、图片加载、埋点及跳转等封装为开放接口，以复用网络库或图片库的公共参数，实现自己的埋点或跳转等逻辑，还为开发者提供了元素注册接口，实现定制化元素的共建。
③相对于其他跨平台渲染库，我们将业务逻辑集中放在元素中便于问题排查解决，同时通过容器和元素的双重复用逻辑提高渲染速度和控件复用度。如下图所示：
④图七 客户端复用流程图
⑤容器复用依赖于接入方的列表控件（如RecycleView的复用机制，首先根据灵活画布视图模型获取复用ID，然后根据缓存池中是否有对应视图选择复用还是新建视图；元素复用则是通过在数据更新时比较画布的新旧MD判断，并且通过元素复用池管理缓存元素。
⑥目前灵活化模板.已落地，在降低产研成本和业务应用上都取得了阶段性的进展。
⑦其中通过灵活化模板方案在开发提效和搭建效率方面如下图所示：
⑧图八 开发&搭建效率提升统计
⑨不仅如此，灵活化模板也已支持如全民运动会、京东七夕节等大促会场活动，后续也会继续支持、.等更多的大促活动页面的搭建与呈现。
⑩图九 灵活化模板的应用
Ⅰ元素池+灵活画布的组合方案不仅为用户提供了更自由便捷的模板搭建方式，同时也逐步释放被动生产新模板样式的产研人力。未来我们将会提供更加丰富、精细的搭建能力以支持更多的业务场景，同时逐步通过灵活化模板能力覆盖/替换部分通天塔模板，实现客户端的包瘦身，除此之外，还将继续完善基于元素、画布、楼层等各维度的共建服务，赋能多元化业务诉求。
Ⅱ以上在技术创新和业务赋能等方面取得的成果离不开各端领导和同学的共同努力，感谢产品、后端以及测试团队给予的强大支持和配合，助力灵活化项目稳定健壮的发展。