本文整理了华为云主任莫春辉 GMTC 2021年全球大前端技术会议(深圳站) 演讲《多技术栈与高低代码混合开发-华为云低代码平台架构探讨》。

目前，华为云部门的前端技术栈并不统一，如华为云官方网站 Console 控制台使用 Angular 技术栈开发，其他内部 IT 系统使 Vue 技术栈开发。因此，华为云应该建立一个低代码建设平台，同时考虑内部效率 Angular 和 Vue 两种技术栈，同时支持对外生态建设 Vue 和 React 技术栈。

此外，业内大多数低代码建设平台都局限于简单的应用程序开发。在华为云自身的业务逻辑中，有复杂的页面需要高代码开发，也有一些简单的页面。你很难完全通过可视化拖拉来构建这些复杂的页面，但对于简单的页面，你希望使用可视化拖拉来快速生成。因此，支持高低代码混合开发的需求摆在我们面前。

在 Gartner 低代码平台被称为企业级低代码应用平台，支持快速应用开发，实现一站式应用部署、执行和管理的应用平台，采用陈述性、先进的编程抽象(如基于模型驱动和元数据编程语言)。与传统的应用平台不同，它支持开发用户界面、业务逻辑和数据服务，以牺牲跨平台的可移植性和开放性为代价提高生产效率。

由于牺牲了跨平台的可移植性和应用程序的开放性，制造商开发的低代码平台都朝着低的方向发展。越低越好，即使没有代码和智能生成代码，也很容易忽视高的需求和高的结合。此外，制造商希望用户从头到尾在自己的平台上开发和托管整个过程，因此很容易忽略委托或集成的需求，以及与股票应用程序的结合。此外，制造商希望用户从头到尾在自己的平台上开发和托管整个过程，因此很容易忽略委托或集成的需求，以及与股票应用程序的结合。

这种忽视其实是必须的。如果不牺牲跨平台的可移植性，可以支持不同平台的不同技术堆栈，生成可移植代码，结合现有的高代码（纯手写代码）；如果不牺牲应用程序的开放性，可以更好地支持集成的需求，并灵活地与存量应用程序相结合。事实上，企业内存量应用很多，这些存量应用也希望通过低代码平台提高开发效率。

目前，华为内部有几个低代码平台。华为云的低代码平台涉嫌重复轮子吗？2021 年 7 月北京的 GMTC 在会议上，阿里巴巴研究员玉波在谈到前端现状时说：阿里巴巴有很多低代码平台，但当你深入到业务层面时，你会发现这些轮子是合理的，它确实在解决特定领域的特定问题。华为云低代码平台的初衷是通过低代码平台解决华为云领域内部存量应用想要提高开发效率的问题。

华为云低代码平台如何在不牺牲跨平台可移植性和应用开放性的情况下建设？这是本文要讨论的问题。在以下内容中，我们以华为云领域股票应用的业务需求为线索，分析这些业务需求背后的实质性问题，讨论用什么样的技术方案来处理这些问题，用什么样的平台架构来承载技术方案，最后讨论我们在施工过程中踩到的坑。

内部有一个华为云 CRM 该系统已开发并在线运行，属于存量应用。由于新面有新的需求，需要开发新的页面，那些新的页面和原来的页面非常相似，所以有很多重复的开发工作，所以 CRM 开发人员希望使用低代码平台来构建新页面。

由于新页面与原页面非常相似，CRM 需求实际上是将原始页面包装成可配置的页面模板。这样，在面对新只需在低代码平台上配置页面模板即可生成新的页面，无需重复开发。可配置的页面模板也是由 CRM 开发人员在低代码平台上建立，生成的新页面必须提供源代码 CRM 原系统一起编译构建，形成完整的应用，如下图所示：

左图是开发人员日常使用的 IDE（Visual Studio Code），作为低代码平台 IDE 插件嵌入 IDE 里。开发人员在平台上可视化地构建页面。当保存页面时，平台将生成页面的源代码（中图），并与原始纯手写代码（右图）一起编译生成应用程序。开发人员在平台上通过可视化构建页面。当保存页面时，平台将生成页面的源代码（中图），并与原始的纯手写代码一起编译生成应用程序（右图）。这里的可视化构建相当于部分工作取代了原始的手写代码。

CRM 低代码需求背后的实质性问题实际上是 ProCode 与 LowCode 混合开发。ProCode 是我们传统意义上的高代码开发，即所有代码都是纯手写的， LowCode 用可视化工具构建页面，只需编写少量代码。所谓的高低代码混合开发是：在本地 IDE 有的场景直接手写代码，有的场景用可视化工具构建，向当地工程生成代码。混合开发的目的仍然是充分利用低代码平台的能力，提高开发阶段的生产效率。

让我们来看看华为云另一个领域的低代码需求。这个需求来自 DevOps 系统。在 DevOps 在装配线上，我们允许用户添加自定义插件，以干预构建和部署过程。

在使用插件之前，插件的参数需要通过一些页面来配置，这些页面目前是由 DevOps 团队开发。为了减轻团队的负担，他们希望用户能够使用低代码平台的能力 DevOps 页面直接在网站上建立，页面保存后也生成源代码，集成到 DevOps 系统里。这个需求与 CRM 有三点不同：

相信很多低代码平台都可以生成不同技术栈的源代码，但我们面对的是不同技术栈的组件。例如，钮，CRM 是用 Angular 开发的，DevOps 是用 Vue 开发的。两个技术栈开发的按钮，其属性、方法、事件甚至功能都不一定相同。例如，我们必须为这个按钮设置颜色，Angular 属性名称叫 type，属性的值是 success，而 Vue 属性名称叫 color，属性的值是 green，如下图所示：

所以，用 Angular 构件构建的页面，生成的 Vue 源码跑不通。有些人可能会说，通过 DSL 但是，如果功能不同，则使用属性映射 DSL 也无济于事。有些人可能会说，通过 DSL 但是，如果功能不同，则使用属性映射 DSL 也没用。那么，我们是否应该为不同的技术栈和领域搭建不同的低代码平台呢？

如果我们这样做，我们的成本将非常高，包括软硬件资源的投资，还包括研发和运维的投资。而且各技术栈的低代码材料不通用，也会导致材料生态分裂。因此，我们的低代码平台方案应该能够支持不同的技术栈。

嵌入低代码平台 IDE 通过可视化构建生成源代码 20 年前流行的 Delphi/ C Builder/ J Builder/ Visual Studio 非常类似，当然，今天还有人在用这些工具。

如下图所示 Visual Studio，左边是可以拖动的组件，中间是画布，左边的组件可以拖动到画布，中间是代码编辑区，右边是文件系统和组件的属性配置面板。

低代码平台本身与语言开发无关。即使在平台上写了少量代码，也是前端通用的 JavaScript 语言。在高低代码混合开发方案中，不懂编程的业务人员可能需要掌握 JavaScript 语言，用来编写业务逻辑的一小部分。此外，由于本文的低代码方案可以生成不同技术栈的源代码，专业编程人员需要掌握 Angular 或 Vue 只有在前端开发框架时，才能调用低代码平台生成的源代码。Visual Studio 可视化工具和 IDE 自然集成，子产品只支持开发语言，如 Visual Basic 等。由于主流前端框架没有统一的组件库，Visual Studio 没有这样的系列 Visual Angular 或 Visual Vue 市场上没有类似于成熟前端框架开发的子产品的可视化 IDE，因此，低代码平台的可视化搭建工具正好弥补了这一空缺。
协同开发

让业务人员参与低代码平台的开发

业务人员需要参与数字化转型