前端组件库HaloE的开源之路

不止于提效--前端组件库HaloE的开源之路「大前端新趋势」专场陈罡

移动云首席产品体验专家2023年5月28日HaloE建设背景外因【国家导向】国家“十四五”规划纲要明确提出支持数字技术“开源”发展。其中

“完善开源知识产权和法律体系，鼓励企业开放软件源代码、硬件设计和应用服务”被列为加强关键数字技术创新应用的重要举措。【行业趋势】开源是互联网技术共享发展的沃土，行业内各开源社区蓬勃发展，例如云计算领域国外L

i

n

u

x、

OpenStack，国内龙蜥、欧拉、木兰等，软件、硬件设计多上传到GitHub或Gitee上进行开源管理，国内各互联网企业也都深耕其中。【集团战略】《中国移动关于新时期加快科技创新的行动纲要》明确提出“加强成果转化和协同研发，促进内部各专业公司共享共性代码、实现联合开发。旨在提高开发效率和开发质量”，开源是实现中国移动在软件领域联合研发、技术创新和成果共享的重要方式，可助力中国移动世界一流“力量大厦”构建。内因【公司战略】【业务需求】【质量需求】公司战略目标转型，全公司凝心移动云产品发展迅速，产品量已达到缺少前端界面设计与交互体验设计方面的聚力全力冲刺国内云服务商第一230余款，产品多包含订退改续等共约束，导致移动云产品开发过程中设计样阵营，公司和技术条线的工作会性业务流程，重复开发量大，产品开式不统一，交互体验不一致，相同组件重议报告对云产品用户质量提升的发需求并发量大，前端人力支撑不足；复开发等问题，影响产品用户体验与质量；相关工作要求；目的全面提升页面还原度拉齐前端开发技术水准提升前端开发工作效率提供前端开发优秀实践落地渠道12342016-19扬帆起航HaloE建设历程紧贴云改，设计组件库经过7年积累，移动云设计组件库生态建设机制完善，6套设计资源-WEB端基础组件库、WEB业务模版、移动端组件库、移动端业务模版、ICON组件库、图表组件库，公司产品全覆盖。众心合力，加大参与广度官网开发静水深流，探索设计深度

UIUE前端10发布稳定版本产品使用情况31款产品225个优化JIRA产品使用情况百款产品开发WEB组件400+官网线上使用发布稳定版本15优化JIRA502个众心合力，前端组件库历时5年积累，于21年完成立项，尝试低代码框架开发，服务了百余款产品，累计发布了30+稳定版本，经调研使用组件库的前端开发使用组件库后效率提升70%，产品原型还原度达到95%以上。WEB基础组件库ICON库NEWNEW2020日趋完善WEB业务模板库WEB图表库WEB移动云组件库NEWNEWIMPROVE2021层出不穷移动端组件库移动端业务模板库WEB业务模板库WEB组件库NEWNEWIMPROVEIMPROVE2022丰富成熟NEWNEWIMPROVEIMPROVEWEB通用流程模版WEB深色组件库移动端组件库移动端业务模板库WEB业务模板库IMPROVE2018-2019扎根基开始O4项目组件库研发NEW2020萌新芽基于O4组件库基础开始移动云组件库研发订购流程模版页开发NEWNEW2021长躯干立项，完成两个里程碑低代码框架开发搭建新增代码化移动端研发NEWNEWIMPROVE2022结硕果技术栈VUE2.0增加业务组件技术栈升级至VUE3.0品牌升级，正式更名HaloE集结兄弟部门研发力量，共创生态公司内部开源面对社会全面开源NEWNEWNEWNEWNEW300+开发WEB组件HaloE价值观设计价值观——普适、多元、共生、开放HaloE基于[普适]、[多元]、[开放]、[共生]的设计价值观，试图建立一套企业级设计体系。Halo的含义是光环，寓意组件库是围绕着移动云的光环，既依托移动云散发能量，又能为移动云赋能添彩。Ecloud的含义是移动云，这是组件库的源起之地，也是组件库的依托之本。HaloE官网组件库官网以当下流行的视觉风格3D效果和轻拟物风格展开设计，包含组件设计价值、基础组件、生态组件、设计度量、设计资源、设计云课堂等多个模块，覆盖从组件设计到组件开发、组件使用全链路流程，角色覆盖产品经理、设计师、研发工程师、运营等多角色。前端、设计知识云课堂Halo

E官网HaloE多角色共建机制设计工程化，设计师&研发工程师高效协同、减少误差多角色的协同导致写作过程中存在信息不对等，比如设计师更新了设

计稿，而前端没有更新，就会造成最终的组件效果产生差异，针对这

个问题我们通过设计工程化的方式，提升HaloE

组织协同和生产效率。按月份进度更新组件库+模板库设计，并在月末最后一周周五周会上评审更新的设计设计接口人整理迭代内容并交付开发前端接口人完成开发+发起走查代码化组件库发布新版本设计师根据本轮迭代版本进行设计走查下一轮迭代走查无问题走查问题修改更新组件反馈问题HaloE工程师HaloE设计师产品设计师开发工程师反馈设计生产使用研发敏捷化：移动云组件库高效迭代、服务稳定，共创共建10天：设计沉淀

10天：前端开发&设计验收设计企标WEB端基础组件业务组件APP端基础组件业务组件管理

维护UX虚拟组输出需求HaloE设计资产赋能全业务Token

Syetem命名/分层/设计资产表基础组件库全局样式/组件统一/丰富主题业务模版库视觉统一/官网风格/交互一致通用设计系统基础设计系统业务设计系统HaloE设计资产Design

TokenToken与前端架起样式变量的桥梁在具体实现上，将Token的值与组件公用特性进行关联。

Token可以是颜色、圆角、阴影、动效等。优势：一致性：使用Token可以保证各组件通用样式保持一致；灵活性：无需修改组件代码，修改Token就可以做到同步修改样式。设计公共样式提取研发全局调用为了打造一致的用户体验感受，在进行需求设计的同时，也逐步沉淀出一套适用于多平台、多业务的组件库，以此来提升设计和协同效率，并最终实现专业价值和产品价值的平衡。基于产品的业务场景，详细地梳理了产品界面中的通用组件并制定了统一的规范，包含web端基础组件、业务组件、模版页面，输出了40类原子组件，业务模版174页。基础组件

业务模版HaloE设计资产WEB端WEBHaloE设计资产APP端移动云-移动端设计组件库产出了63个原子级基础组件，全面覆盖布局、数据展示、数据输入、反馈等交互场景；21个业务模版，帮助用户更快速的从0到1构建项目。基础组件

业务模版A

P

PHaloE研发资产WEB端Vue3.0

WEB端基础组件库Vue

3+自研Vue2.0

WEB端业务组件库Vue

2

+

HaloEWEB端Vue2.0

WEB端基础组件库Vue

2

+

iViewHaloE-Web端历时5年积累，服务了百余款产品，公司多部门在陆续使用中。服务稳定，累计发布了30+个稳定版本，经调研使用组件库的前端开发使用组件库后效率提升70%，产品原型还原度达到95%以上。30+稳定版本40+大类组件20+种业务场景HaloE研发资产APP端Vue3.0移动端基础组件库基础组件开箱即用灵活定制63个基础组件，满足80%以上的业务搭建诉求Vue3.0移动端业务组件库业务组件智能连接覆盖多场景提高界面一致性，前端还原度高达95%HaloE-Mobile

基于Vue3.0开发，历时近3年积累服务了移动云百余款产品。并基于基础组件打造了一套专属B端业务场景的业务组件库，累计发布了6个稳定版本。经调研，使用Halo

E

Mobile后前端研发工程师效率提升85%，产品页面还原度高达95%以上。HaloE应用成效前端侧设计侧产品侧HaloE组件库的搭建做到里三侧提升，既提升了设计师和前端的效率，同时也赋能到产品侧。在没有使用组件库之前，设计1个界面需要1天，使用组件库之后，设计10个界面只需1天，设计侧效率提升了90%前端工程师缺陷密度从11.9(个/人年)降至7.1(个/人年)，降低了40%,界面还原度从70%上升到90%以上产品经理可以用设计师整理的axure组件模板快速搭建需求框架，完成产品的需求原型图，直接利用组件库实现了产品界面设计,且无需关注线上还原度。HaloE组件库架构设计设计思路模块化设计按组件进行代码间解耦，并保持一定的代码复用性和二次开发特性Vue2/Vue3兼容开发Vue2代码到Vue3的适配模块；一套代码逻辑，可无缝切换Vue2.0、Vue3.0组件间通信Vue2.0、Vue3.0保持一致性通信总线样式管理使用Less预编译器，样式组织模块化，增强主题扩展性HaloE创新技术路线业务从产品业务中积累共性需求，落实到组件库中，形成标准化功能，复用和扩散。云原生探索产品前端-组件库使用结合新方向，基于云原生架构下，构建新一代组件库使用方式。AI基于代码生成模型，通过大量组件库使用的相关训练集，在开发者使用组件库时提供AI生成代码的补全建议。低代码结合低代码平台，搭建高还原度的公有云产品页面，快速建立完善统一的中台设计。HaloE创新技术路线权限-基层自组织控制一套组件行为控制方案，粒度下放到基础组件，通过一组配置可让指定的一组组件进行相关展现，事件相关控制。以往的页面控制往往限于元素级，即dom渲染出来后，在针对已出现的元素或者模块进行样式、事件、行为控制，此类存在弊端为：需要等dom元素全部出现后在进行控制，性能并不好，会引起页面在此发生重绘；针对不同的页面控制均需要进行代码开发，效率很低；待控制的元素、模块需要事先显性标定id等，在使用SPA框架（VUE等）时，一些动态出现的元素无法进行控制，需要长时间监听；此方案优势：将网格化控制的思想融入页面元素控制中，以组件库为基础控制单元，将控制执行逻辑下放到组件中，将配置规则归集在模块中进行挂载，充分调动VUE框架vdom性能以及数据驱动方式，隔绝直接操作dom导致的性能低下等问题；HaloE创新技术路线基于云原生的前端技术架构前端模块热更新，前端技术中台devops一体化，提升开发、上线部署效率通过组件懒加载以及热更新技术，前端开发相关接口层以及前端组件，通过平台发布，即可实时更新页面功能；前端后端职责分离，提升核心业务聚焦度通过该平台，后端聚焦产品底层功能开发；前端聚焦业务逻辑整合（中台）以及前端功能模块的实现，有助提升前端对产品业务方面的理解，进而提高产品功能体验度和易用性；运维统一一体化运维从原来单产品均需要运维，统一到一个平台，降低运维投入的成本提升组件复用度组件均可通过平台进行复用，并可对功能点（细粒度）进行版本控制，可快速切换版本并上线；HaloE前端开发平台即业务模块开发、运维、部署、上线、运营一体化平台，该平台接入后端不同产品底层服务能力，供开发中台进行函数式调用，真正实现serverless模式。HaloE创新技术路线依托HaloE基础组件库，前端工程师将页面结构、组件封装成组件库，各个产品实现功能时可直接调用。这其中又以"可配置的营销案"最为优秀：在不同的营销活动中，通过不同的组件组合，实现不同的业务需求，提高了前端代码复用率。前端研发，在对产品营销案进行开发时发现了如下特点：营销方案（订购页）根据UI规范页面布局，样式比较固定。各产品之间页面部分组件逻辑类似，比如资源池选择器，计费方式等。各产品都总会有些特殊的定制化的改变和业务需求。针对这些特点，各个产品的营销页的开发呈现出了重复代码、难更新维护、二次开发困难等问题。模型参数数量大小：60亿包含组件库代码做为专项训练集进行训练HaloE创新技术路线Acepilot是一个基于AI模型的编程辅助工具，在你使用IDE时提供AI生成的代码补全建议大模型技术多语言支持隐匿模式

低延时安全保证

插件式集成VScode基于代码生成模型，AIGC（AI

generated

content）技术支持总结6种编程语言，C,C++,Go,Java,JavaScript以及Python补全建议显示为灰色隐匿状态，不影响原有编程习惯通过模型加速手段，使代码生成时间更短保证代码安全性，其他类似工具需要将代码上传云端可直接在IDE的插件市场找到，安装后填写服务地址即可使用，后续更新简单

JetBrains

to

do大量基础组件代码Acepilot模型训练实现输入代码自动补全移动云自研HaloE开源路线提升产品一致性95%+

提高页面开发效率70%Vue2.0基础组件库Vue3.0基础组件库Vue2.0业务组件库Vue3.0基础组件库Vue3.0业务组件库WEB端移动端30+个稳定版本浪潮、东软国际、科大国创、博特信工、云从科技、创新信息、极限科技等公司10+外部公司级用户5

210+大组件库

人参与5+集团内技术活动/大赛300+内部用户社会开源对外扩大影响力，发挥社会担当面向社会开源赋能，打造技术名片。公司内开源对内降本增效，实现公司内首个自发性的共创共建项目，服务于90%+上云产品提升一致性。集团内开源对集团内开源，对内助力集团内各单位凝聚研发力量形成合力，提升企业创新能力，降本增效。HaloE开源管理架构HaloE

Design开源建立以来也逐渐有了很多积极参与建设的核心贡献者，HaloE也开始了开源社区及贡献者路线的建设。组件库技术委员会组件库设计委员会BoardHaloE开源社区理事会组件库品牌委员会Committer贡献者设计负责人品牌负责人HaloE

Design开源社区架构图Board：是HaloE

Design前端组件库社区的领导机构技术委员会：技术委员会成员需要一起制定开源目标，并保障每项工作按时完成，同时进行方案决策，发展方向把控设计委员会：设计委员会成员负责根据移动云业务场景输出基础组件、业务组件、模版页面，并负责把控前端组件库还原情况品牌委员会：品牌委员会成员负责前端组件库的品牌宣传工作用户贡献者Committer荣誉贡献者完成第一个任务后自动成为贡献者持续活跃三个月后，主动申请经TC审核通过成为Committer贡献最高的5%将成为荣誉贡献者HaloE

Design贡献者路线在发展路线上，HaloE

Design

设计了「用户、贡献者、

Committer、荣誉Committer」的四级成长体系。开发者可以根据自己的时间和精力来进行组件库的贡献，并通过自己的持续贡献成为更高级别的贡献者。贡献者HaloE开发者心声目前HaloE已经形成了共创共建的机制，感谢参与共建共创的近200+位同学的支持，在HaloE

从0到1的过程中贡献了宝贵的经验；代码、组件、文档、建议等等所有的付出，使HaloE得以起步，得以服务用户。感谢所有使用者和关心者，你们是HaloE的启明灯，指引HaloE的前进方向，HaloE

与大家共成长。程世龙HaloEDesign是我入职后参加的第一个前端项目，虽然贡献不多，代码书写不规范但是也有一些收获。在项目中首先跨部门的项目提升了团队合作能力。其次提升了前端开发规范认知。最后当然是提升了Vue3.x的代码能力。茆玉庭希望能集思广益，不断完善，做到既强大又丰富。不仅满足所有基础开发和业务需求，还要做出符合移动云的独有特色，逐步推广应用至公司所有移动云产品。周绚一方面是为了提升移动云界面实现的一致性，目前各个产品界面组件基于不同的开源组件，交互方式不同，给用户带来不好的体验，比如不信任和不能培养操作习惯等；另一方面如果统一了组件，通过维护组件就可以快速提升所有产品的交互。王小峰我首先学习到是整个组件库工程目录设计

合理清晰，对于开发和维护提供了便利，

这对其他项目具有一定的启发性其次是组

件粒度划分也值得学习，其高内聚和低耦

合的逻辑抽象也比较合理和规范，再有就

是建议多考虑下扩展性和易维护性等方面。李敏军pc和h5端相关技术拉齐，同时也跟随业界，支持基于vue和React2个版本。顾志晖明年可以和技术部制定的一些编码规范等结合起来，推进相关前端工程化工具的建设。翟雄峰HaloE主要服务于移动云内部，后续成熟之后会逐步对外开放。在逐步和移动云融合的过程中，将和移动云的业务特征紧密相连，并且充分满足出云业务用户的需求特征。在此基础上，如果能够不断深化开发者界面，为开发者提供更加灵活、丰富的接入面，能够促