欢聚变色龙活动配置平台，以低代码+无缓存更新+可视化+拼凑编辑为开发方向，丰富的灵活度体现在图片、榜单等低交互活动页。但过高的灵活度，使用成本、组件丰富度、业务自定义扩展性等问题，在总结中需要进一步迭代升级。
2020欢聚变色龙平台在提升活动上线效率、活动内容及时变更、活动页交互效果等功能上进行多次迭代与升级，优化方向还是停留在低交互功能性扩展，在使用或配置过程，未能对使用成本、业务组件扩展层面进行较好的优化。因此，降低对使用者的使用成本、提高业务组件自定义、打造成接入组件可视化平台成为了新的方向。
数据分析
- 累计活动上线量: 1413个
- 累计PV: 1600w+
- 支撑业务线： 10+个
- 平均加载时长： 全网大约是1.5s左右（无数据加载情况下秒开）
（图：统计全网加载速度）
（图：页面加载速度）
功能优化
- 云代码（扩展与App进行丰富的交互）
- 生命周期
- 接口函数周期
- 动画
- 轮播
- 进度条
- PK条
- 富文本
- 弹窗
- 倒计时
- 格式化
- 渐变背景
- 组件以时间维度自动显示隐藏
- 组件收藏、复制
- 数据上报
- 头部、底部默认文本
在功能迭代上，基本是无缝、无版本控制上线；最早设计理念以JSON方式，简单组件标签+拼装完成页面渲染，扩展字段来识别新增加的扩展功能，扩展字段对数据灵活处理与功能迭代上有足够的扩展性。但更丰富的表单、抽奖等强业务耦合的未有较好的处理。
Mock数据结构：
{
id: 'SerializedId',
type: 'div',
data: {}, // 组件数据
extend: {
analytics: {}, // 数据上报
api: {}, // 数据接口
event: {}, // 事件处理
// 其它扩展
},
style: {}, // 样式处理
children: [{
// ...
}]
}复制代码
技术实现上，递归遍历上述数据，在高阶组件处理各个字段，特别是针对api字段进行接口数据处理，要考虑是接口数据源和多语言数据，但基本是通过数据字段来合理处理，这样也能做到可视化动态选择接口数据；最终通过type找到对应的组件或createElement，把处理后的字段结果以Props传递到组件中。
如何结合动态接口数据处理？编辑页中提供了可视化的表单配置，可以填入需要调用后端接口名、方法名、参数、返回的Mock数据等；在页面执行时，会以定义的接口生命周期调用相关接口获取数据；
扩展功能上，如在轮播、列表、格式化数据、云代码等功能，其实更多是针对扩展字段进行分析与完善逻辑，封装处理后展示组件。
整体上，可视化平台通过低代码方式，不仅有足够灵活度，也满足使用者在配置过程中及时变化某块组件的位置、增加交互功能等内容。
案例一：榜单显示中，如原本显示是分数，可通过操作区换成其它需要展示的接口字段；
案例二：针对已存在的内容，也可新增加图片、文本，并可相应进行接口字段设置；
活动页效果
问题
- 配置效率
- 一键式多主题切换
- 组件功能可视化介绍
- 强业务组件及业务自定义组件扩展能力
展望
结合EMP方案，推进6.0欢聚变色龙平台升级，以整合各业务独立组件为平台目标，极大地降低使用成本，提高组件复用度，整合以达各业务组件共享。根本还是要解决运营童鞋在配置环节中产生的悲痛~~~
- 全局主题设计与实现（模块化主题设计与实现）
- 组件化整体数据结构设计与实现
- 模块化编辑操作设计与实现
- 业务侧可视化开发方案与实现，组件进行业务下沉
- 预览组件可视化实现方案
- 使用文档组件可视化技术方案与实现
EMP微前端实战之欢聚变色龙
这是我们的开源仓库是efoxTeam/emp，欢迎大家关注。另外，我们的掘金团队账号是：Efox。
