摘要：从浏览类页面到治理类页面，看华为云官网如何依据业务场景分阶段构建低代码平台，晋升页面迭代效率。
本文分享自华为云社区《华为云官网前端的技术演进与低代码实际【寰球软件大会技术分享】》，原文作者：技术火炬手。
前端团队演进往往会经验组件化、配置化、可视化的阶段，而低代码是团队演进中的一个必然结果。
在第七届寰球软件大会上，华为前端研发工程师郭晓，分享了华为云官网如何依据业务场景分阶段构建低代码平台，晋升页面迭代效率的实际心得， 以下是现场演讲内容速记。
前端团队面临的三大难题
为什么低代码一词近期如此炽热，在日前的 Qcon 大会上也有 5 个以上低代码相干的分享，根本原因还是近年来前端团队遇到的一些问题。
首先是页面数量的激增， 依据 IDC 在 2020 年中国 ICT 市场趋势论坛中发表的演讲，近几年，数字经济的倒退将孕育出超过 5 亿个新利用 / 服务，这与过来 40 年间呈现的利用数量相当。数字经济的高速倒退须要传递海量的信息，而前端页面作为传递信息的一个重要途径，数量也在激增。
其次是前端人力不足，早早聊大会近期针对 535 位团队主管进行的一项考察显示，这些团队年内冀望招聘总计超过 9000 名前端，但理论只招到了大概 5000 人，不到预期的 60%，而且从人才市场的数据看，前端人力的增速从 14 年就开始逐渐降落，前端的新鲜血液在逐年缩小。需要变多，人力持平或缩小，问题曾经非常明显。
最初是需要激增带来的运维压力， 前端业务需要大部分来自经营和产品，和业务的强关联性导致了需要的不稳定性。一个已上线的页面很可能须要依据一个轻微的调整从新走上线公布流程，耗时耗力。而且，页面数量过多后，一些传统的通过人力的内容质量检查会十分吃力，上线页面的品质很难失去保障。
那么，在此背景下，团队如何进行技术演进？
技术演进之路：从刀耕火种到可视化
最开始前端处于原始的“刀耕火种”阶段，只有有 html，css，js 三大基座，页面都能堆进去。慢慢的，咱们开始把一些罕用的办法抽成办法库，通用的组件规整到组件库，并且联合工程化思维进行一些模块的复用，即组件化阶段。这个期间，尽管还是编写代码，但代码的复用开始晋升我的项目的效率。
组件化前期，咱们发现在很多业务场景下，一些组件常常组合在一起，组件库中开始呈现业务组件。比方页面中常常会有这样的楼层，上方居中一个主题目一个副标题，上面几个卡片，每个卡片有个背景图而后一段形容。那咱们就构建这样的大颗粒组件，不便复用。
随着组件粒度的加大和业务组件的增多，新增简略页面需要所要写的代码会变的越来越少，常常只须要引几个组件，传一些参数就行，因为很多逻辑曾经封装到组件外面。此时，咱们把组件和参数写到配置文件中，再写一套解析逻辑（渲染引擎），将配置文件中的内容解析为指标代码。这样，后续只需保护一个配置文件，初步进入了配置化的阶段。
在配置化阶段，编写 DSL 无需感知技术栈和业务流程，最终渲染的成果齐全由渲染引擎管制。此时咱们能够将配置文件的保护权限裸露进来给利用侧的开发：咱们保护渲染引擎，组件库，由利用侧的开发保护配置文件。这样就缩小了团队和业务的耦合性，进一步节约了人力。
思考到利用侧不肯定须要开发，同时也为了利用化的体验，咱们能够提供一个让用户拖拽组件并且编辑的页面，将用户在界面的操作后果转为 DSL，这样最终用户不须要感知 DSL 也能生成最终页面。简略的操作使得非开发也能把握，于是慢慢造成了谁的需要谁本人实现的场面。
能够看到，咱们在开发流程中，一直的抽取公共能力，并且形象业务流程，最终达到了低代码，无代码的能力凋谢，极大的升高了前端团队的保护压力。
业界有很多相似演进的例子，至此，低代码也缓缓进入大家的视线。
低代码平台如何选型？
低代码在海内起步较早，这个概念也是海内率先提出，outSystem 和 mendix 等企业的低代码平台早已占据大半江山。国内倒退较晚，几年前才有第一个商用的低代码平台，但现在已呈百家争鸣之势，包含华为也推出了 AppCube。
低代码的“低”能够从两方面了解：
一是利用生产成本升高， 低代码不仅是指开发过程中写更少的代码，也是指利用部署老本等整体流程老本的升高。
二是利用生产的技术门槛升高， 底层业务逻辑，技术栈的屏蔽使得非专业开发人员在简略的 IT 培训后也能疾速投入利用生产。
那在低代码浪潮中，一个前端团队如何抉择？
首先看前端团队是否肯定须要低代码平台。据估计，中小型企业 95% 以上的场景能够用低代码平台搭建，而大中型企业也有 70% 以上的场景能够由低代码平台搭建。刚刚咱们也提到，低代码是前端团队技术演进过程中一个必然结果，所以低代码平台是必须的。
问题随之而来，是间接购买应用还是自研呢？咱们从扩展性、易用性和人力老本三个维度进行了比拟。
扩大和易用性性方面，如果购买业界平台，只能应用它们裸露的平台能力，尽管平台会凋谢一些定制能力，但并不能满足华为云官网简单业务的须要。老本方面，从开发到上线整个流程的平台，蕴含了数据模型、UI、逻辑、流程的低代码构建，构建的人力老本高。
如果团队规模较小或者业务场景较为对立或者团队还处于组件化阶段，我倡议应用业界平台，比方华为云的 AppCube，省时省力。
但如果团队较大，业务场景简单，且团队演进曾经在配置化或者可视化阶段，那自研一套短暂来看会更好。因为 当企业或者组织倒退到肯定水平当前，肯定会逐渐放弃各种外购的部件，构建自研能力，以适配本身组织的须要。
对于咱们团队来说，思考到扩展性的重要性高于人力老本，因而咱们抉择自研一套低代码平台。
那华为云官网是如何进行低代码实际的？
华为云官网低代码实际
华为云官网次要蕴含三类页面：
浏览类页面， 如产品介绍页、文档页，此类页面的特点是以楼层为维度，页面组件多以卡片、文字、图片为主，楼层间互相独立，交互也比拟少，语言是基于 xtpl 的。
治理台页面， 如账单核心，外部治理页，因为以图表页面为主，这类页面的交互比拟固定，包含搜寻，增删改查等，语言是 vue。
购买类页面， 如流动页、价格计算器，这类页面多出现产品规格，页面交互比较复杂，语言同样是 vue 的。
这其中，浏览类和治理台类页面大略占 90% 以上。
在低代码实际中，华为云官网的总体目标是实现面向经营和开发者的高效利用生产平台，咱们外部称作 HPA，平台的性能蕴含但不仅限于数据模型、逻辑、UI、流程的低代码或者无代码生成。
依据业务背景，咱们将指标初步分为两个阶段，首先是针对浏览类页面，实现浏览类页面的无码化生成，同时，构建平台能力，实现页面从生产到公布的无码化。
第二阶段，针对治理台类页面，加强平台的无码化能力，将页面的低代码生成拓展到数据模型，逻辑和流程维度。
阶段一：浏览类页面低代码化
最先低码化的是浏览类页面，因为这类页面数量多，消耗人力大，而且页面形成比较简单，低代码的老本绝对较低。咱们对于 UI 低代码的构建形式是先组件化，再配置化，最终实现可视化。
组件化
其中，组件化的关键在于解决页面的共性和定制性。浏览类页面的共性是以楼层为维度，并且楼层间独立。定制性在于局部页面会有一些非楼层组件，比方浮窗或少许全局逻辑。
咱们先按不同的定制性将页面进行分类，造成一些页面模板，比方通用页面模板以及其余一些产品页面，新闻页面的模板。页面模板往往蕴含了页头页尾，以及方才提到的页面定制逻辑，比方官网服务保障页，用的就是只蕴含页尾的通用页面模板。
而后是解决共性局部，咱们把页面按楼层拆分，官网服务保障页面能够由 5 类组件组成，组件 2 和 3 都是步骤条组件，能够复用。咱们将页面的定制性收编到不同的页面模板中去，共性局部就是能够复用的一个个楼层组件。
配置化
组件化后，就是如何用配置化信息形容页面。配置信息里蕴含页面模板、页面构造、页面数据和依赖信息。
页面模板形容页头页尾和页面定制信息。页面构造形容用了哪些楼层组件以及组件的程序，用户在画布上拖拽组件或者删除组件其实都是在批改页面构造文件。同时，页面构造也记录了楼层组件和页面数据的关联性。
页面数据则是形容了楼层组件具体的配置数据，用户在画布上的组件内容编辑，就是在调整页面数据。
最初加上楼层组件和三方件的版本依赖信息，再通过 DSL 渲染引擎就能够渲染出最终的 html 页面
可视化
页面配置化后，便是思考最终用户如何通过交互界面生成配置化信息。
下图为页面构造编辑和页面数据编辑的示意图，页面构造编辑是从画布右边的组件市场中拖拽组件到页面指定地位。其中组件市场的组件是通过本地 IDE 开发而后通过 npm 公布上传。页面数据编辑是点击指标组件后，在弹出的组件编辑框中进行编辑操作，组件编辑框采纳相似 JSON-schema 的语法定义在组件中，编辑实现后能够抉择公布，预览等性能。
页面拜访
公布时，画布会将页面配置数据寄存到后端数据库，后续通过对立数据微服务调用。
在现网拜访时，如果 CDN 生效回源，BFF 会依据页面 url 去对立数据微服务获取以后页面的页面配置，蕴含页面模板，页面数据以及依赖信息。而后依据依赖信息去 OBS 获取对应的楼层组件内容，再依据 BFF 挂载的 DSL 渲染引擎渲染出最终页面。
预览态和运行态的区别在于是否有 CDN，而后这些数据信息都是前端传给 BFF 的，不须要 BFF 去对立数据微服务取。
HPA 平台 1.0
下面次要介绍了浏览类页面从组件化到可视化过程以及最终运行态的成果。但作为平台能力，后盾和基础设施的撑持也十分重要。
咱们第一阶段做出的 HPA 平台的模块图次要有四层。
基础设施层 是华为云云服务、数据库 RDS、云搜寻 CSS、对象存储 OBS、Redis，分布式音讯告诉，一站式 AI 开发平台 ModelArts。
微服务层 提供了用户权限治理，配合工作流，音讯告诉指定该用户能够编辑哪些页面，编辑当前须要给谁审核；内容质量检查和灰度测试作为页面上线前的品质和款式格调的报障；内容治理就是上文提到的对立数据微服务接口。
数据中台层 是 BFF 依据 url 或者调用参数返回渲染好的页面。
前端画布层 次要蕴含组件市场、资产治理、利用治理、版本治理和页面编辑。这里的利用治理还比拟广义，只限于 UI。版本治理性能次要提供了页面的回退，比照等性能。
阶段一总结
HPA1.0 上线后，获得了显著的成果。咱们目前保护了大概 100 个楼层组件，也有些定制的楼层组件，基本上笼罩了官网所有浏览类页面。从经营的使用量也能够看出对开发侧的工作量缩小，经营人员均匀大概在平台中自助变更 6000 次。
而且，公布流程也大幅简化，很多变更不须要再通过需要传递给开发再转测上线，能够经营自主操作，从天级降落到小时级。最初，主动全面的内容查看也大幅晋升了页面的品质。
在获得显著功效的同时，也必须留神到仍存在一些可优化的点。比方 DSL 是为了渲染浏览类页面，场景比较简单，那后续解决治理台类页面会很吃力，须要加强；其次，这 100 个楼层组件是须要开发在本地 IDE 保护的，绝对公布周期仍然较长；最初，不足无码化的流程编排能力，如果新增权限组配置流程简单。
因而，咱们持续进入阶段二，以治理台页面低代码为业务目标，加强平台能力。
阶段二：治理台类页低代码化
组件化
治理台页面是目前国内低代码平台反对较多的一种页面类型，下图是一个简略的治理台页面的例子，图中局部信息做了暗藏。
主体是一个表格，上面有分页组件，下面是新增和搜寻，表格内有查、改、删的按钮。页面特点在于组件品种绝对固定，个别有表格、搜寻、分页、弹窗、按钮和图组件。而且根底逻辑比拟固定，能够泛化为针对底层数据模型的增删改查。它的定制性在于增删改查接口的差异性和页面的一些定制性能。
对于共性局部，咱们能够提供上述提到的页面组件，并且提供对立的数据处理办法；甚至能够按默认逻辑组合起来造成一个大而全的业务组件。
对于定制性局部，如果定制较少，能够通过业务组件裸露肯定的定制能力。较多的话，只能应用提供的独立组件自行拼接逻辑。所以治理台类页面的组件化能够分为用对立的业务组件或者应用根底页面组件自行拼装逻辑。
配置化
治理台页面所须要的配置信息和浏览类相似，只是将页面构造和页面数据做了合并。为了减少渲染引擎的泛化性，咱们将两种不同场景的组件化在 DSL 层做对立。
首先，为了反对通用场景，咱们引入了自定义布局，用于表白页面的简单款式；其次，借鉴 json-schema 递归的数据结构，标识组件的父子关系。而后引入了 functionList 去表白此组件会触发的事件，建设组件关联性；最初，除了 components，咱们还有 jsapi 模块去示意页面逻辑。
可视化
这么简单的 DSL 必定不能间接裸露给最终用户，所以咱们在可视化阶段提供了组件设计器，能够先由业务侧开发在组件设计器上设计出所需的大颗粒组件，再裸露给最终用户。
在可视化阶段，除了浏览类页面阶段构建的页面设计外，咱们还提供了数据模型设计和组件设计。
数据模型设计整体是为了满足实现对立的增删改查接口。其中蕴含两局部，一部分是数据模型的无码化生成，一部分是逻辑的低码化生成。它的构建能够看做定义表单，对于一个表单，有通用的接口能够满足增删改查、排序过滤等接口能力，也能够通过逻辑构建自定义。
这里须要强调一下组件设计，对有定制诉求的业务能够自行批改组件，而后公布到组件市场中，供最终用户在页面设计时应用。
在设计器的场景中，数据模型创立能够填写数据模型相干信息、表单信息，蕴含了表单字段，字段类型，是否必填等。新增按钮当前就会在后盾数据库创立此表单构造。
另外，表格设计器中咱们会先预置一个大而全的业务组件，业务侧能够在此基础上进行批改，可能会存在须要自定义 function 的状况。
到页面设计阶段，组件市场除了原本的楼层组件外，又多了 UI 组件、流程组件、逻辑组件等其余抉择，在这里能够选取到从表格设计器公布的组件，也就是说组件的公布能够不仅仅通过本地 IDE 开发，也能够在页面配置生成，大大缩短了公布流程。
阶段二总结
HPA2.0 平台整体还在需要迭代中，很多业务曾经接入，但具体数据目前还未放出。然而 2.0 阶段咱们加强了咱们的 DSL 渲染引擎，使得简单的购买类页面，比方价格计算器进入了配置化阶段，代码量减少 70%，变更工夫也从天级降为小时级。
另外，咱们在构建治理台类页面低代码生成的同时，也实现了数据模型、逻辑等模块的低代码 / 无代码生成，并发现这些能力能够独立或者组合应用。
比方能够用全功能：新建一个利用，从新建数据结构开始，到配置页面，抉择数据源直至公布；也能够只配 API 模块，疾速裸露后盾接口；或者对接本人的数据源，只配置页面并公布，配置局部页面并集成到已有工程中，裸露为组件，集成到单个页面中。
结语
低 / 无码化是前端团队演进的一个必然结果，各团队应依据本身团队须要自研或者购买业界低代码平台。并且在初期就明确好低代码平台的定位：是解决团队本身的业务痛点还是后续商用，前者重定制性，后者重通用性，联合业务各取所需。
福利
看完华为云官网的前端低代码实际，大家是否有播种或者有问题想交换呢，欢送在 【原文】 评论区留下你的问题或感想，咱们将抽取 3 条，请专家与你 1V1 交换，并且送出开发者大礼包一份。
本次，还有两位华为的专家给大家带来网站高可用保障计划和智能化体验实际的分享，他们也答复了开发者关怀的问题，例如网站高可用保障的最佳计划，内容智能举荐的几点心得等等。欢送扫码观看视频，演讲全文后续也会公布在云社区，大家敬请期待。
最初，附上华为前端研发工程师郭晓在本次寰球软件大会上的技术分享 PPT，点击【华为云官网前端低代码实际】可在文末下载查看。
点击关注，第一工夫理解华为云陈腐技术~