干货 | 已配置4000+页面，携程前端组件化探索之“乐高”运营系统

作者简介

孙罡，携程市场部活动平台前端工程师，主要负责市场“乐高”平台搭建，组件开发，以及各种定制活动的开发工作。

一、前言

市场部活动组主要负责各种运营活动的相关开发，分为常规运营活动和定制运营活动。常规运营活动因为组件（模块）具有复用性，并且配置化需求非常多，因此我们建设了一个可视化页面搭建平台——乐高（legao）活动平台。乐高平台将活动页面拆分为各种组件模块，运营人员通过自主的配置就能快速上线各种运营页面。

组件承载页面交互和业务。最近的携程20周年系列营销活动涉及营销页面近百张，如果都是人工开发，要花费大量人力，几乎不可能完成。

里面包含了各种业务定制组件（能量入口，大牌订阅模块，定制逻辑导航等），各种“乐高”组件（大促，产品，抽奖，多banner，机票es等等），各种新开发“乐高”组件（秒杀，售卖，对接基础瀑布流sdk等），各种新定制snippets组件等，正是因为能分别开发这些能配置在“乐高”上的组件，才能在有限的开发资源下保证这么多的页面和配置需求能快速保质的上线，更重要的是能够持续配置运营。

因而建设平台的重点之一就是建设组件，在这个过程中，我们针对“乐高”的组件（模块）做了一些探索。

首先是如何丰富组件库。组件库的不断丰富（尤其是包含业务逻辑的组件模块）是为了满足运营方更多且更加灵活的配置需求。我们除了开发产品推出的组件外，从开发的角度推出了更多增强页面配置功能的组件，另外通过协同BU开发同学定制业务组件，也期望能够建设一种面向更多运营人员的“业务模块”中台性质的平台，从而使得更多组件能够配合使用。

其次是如何充分利用平台的组件。“乐高”组件的重心业务模块都有完整的业务流程做支撑，如大转盘抽奖，组件UI和业务逻辑这些有较大的复用价值。于是我们希望组件开发完不仅仅只能留在乐高系统使用，还能给其他框架无关的非“乐高”页面使用，不仅是我们自己的定制运营活动，还有其他BU的活动页面，从而节省公司更多的开发成本。

本文将会从前端角度就“乐高”组件归纳方式，组件技术栈，以及组件复用等分享一些经验。

二、“乐高”介绍

携程“乐高（legao）”系统是市场部活动组开发的运营平台，致力于提供成熟、可靠、快捷的运营系统，期望能够满足各种常规的，自动化的，快速的运营需求。 

目前市场部常规运营活动能够通过组件组合的方式快速配置生成H5页面，平台支持多种方式的领券活动，抽奖活动，产品展示等以及多个裂变类活动（投票，拼团等）的运营配置。

到目前为止已经有超过4000+的页面在乐高上配置，组件（模块）库也增加到了100+（BU定制模块30+），极大的缓解了公司的运营需求压力。

乐高前端结构图（目前）：

乐高组件配置部分负责配置组件原子属性，以及运营基于各个组件配置的所有渲染属性值。渲染引擎部分则负责渲染。

渲染引擎目前是基于JAVA模板的空壳站点，通过唯一标识-页面英文名识别页面，获取页面所需的所有配置属性，并通过JAVA在服务端直出页面以及所有配置信息（基于公司内部框架NFES改造后将走node直出）。

从前端来看，乐高是组件化（模块化）构建页面的实践，也有一些组件“中台”的性质：

1）乐高平台自身收集各种可配置组件或者模块，是组件的集合。

2）乐高组件能够和其他定制活动项目的组件（模块）互用。

例如：为了“聚优惠”活动开发的瀑布流式产品聚合，在这个活动中定制了2列的布局，属于瀑布流式，在改成配置化（组件