日前，ZStack Cloud v4.0发布，相信大家看了都有一种焕然一新的感觉，本轮发布最大的变化是 UI 端进行了完全的重写，技术栈由原来的 Vue 体系升级到 React，其中采用了一些全新的技术，如 UMI、GraphQL、微前端、低代码开发等，接下来，我们一起来探秘ZStack Cloud v4.0 漂亮 UI 的技术原理，本文将为您解读：低代码开发。

一、为何要引入低代码开发？

在新版 UI 中，所有列表页、权限控制、主题外观、界面文字都不是由前端开发人员手动编写的，而是借助低代码开发平台根据响应的配置自动生成。低代码开发是最近非常火的概念，本质上非编程人员利用工具按照自己的想法生成可运行代码。在本文中，非编程人员特指 ZStack 的产品、设计、文档、测试等角色，当然低代码开发也可以服务于开发人员，标准化输出代码，降低编程中的低级 bug，提升产品质量和开发效率。

随着项目的进展，越来越多的非编程问题暴露出来，设计师提供给开发人员的虽然在样式上是高保真，但其中的逻辑细节并没有暴露出来。以云主机为例，云主机在不同 License 下显示的字段、操作、创建时涉及的约束条件、云主机列表需要支持搜索和排序的字段、中英文版本、不同主题色版本等等，设计稿是静态的，而最终实现的系统是动态的，这中间会有很大的 gap。在传统的开发模式中，弥补这些 gap，完全依赖于开发人员的想象以及手头有限的素材，而在全新的低代码开发模式中，产品、设计、文档、测试也可以利用各种工具介入开发工作，将自己的想法直接落地，而无需告知开发。

二、ZStack如何引入低代码开发？

目前在前端低代码开发领域，走在前沿的当属阿里淘系团队的 imgcook，imgcook 利用开源的深度学习框架 TensorFlow 针对设计稿进行像素级分析，结合系统代码库生成 DSL，最后经过程序员修正后生成可运行的代码。笔者曾和 imgcook 团队沟通过，询问是否能生成复杂的企业级管理系统代码，得到的答复是因为类似云计算这种带有复杂业务逻辑的，因为有大量的约束条件，无法通过设计稿来直接生成代码，目前 imgcook 主要应用于 C 端领域。既然高大上的 AI 行不通，那我们只能另辟蹊径，采取更加简单有效的方式服务各个团队。

首先需要定义哪些是非逻辑功能，类似自定义列、操作项、权限、界面文字、主题外观这些带有配置属性的都可归类为非逻辑功能。非逻辑功能具有编写容易但配置复杂两大特征，每个配置项在程序中都代表了一个逻辑分支，一旦写错，就会导致整个界面的展示不符合预期。

我们选取了在 3.x 开发时期耗费巨大精力开发和测试的权限体系来作为低代码开发的突破口。3.x 的权限实现，是由开发人员在代码中添加大量 if-else 判断来实现的，比如在社区版隐藏某个按钮，就在这个按钮上加一行 if-else 判断，随着分发的版本及账户体系愈来愈复杂，判断逻辑也越写越多，最终导致 bug 频出，以致无法维护。

这种滥用 if-else 的做法显然是不可取的，优雅的解决方式应该是类似防火墙的实现，被拦截对象和拦截策略解耦，UI 中的被拦截对象是页面中一切可见元素，包含菜单、按钮、表格列、字段等，而拦截策略又分为 OEM、License、角色等，高等级安全系统拥有多层防火墙，而 ZStack UI 的界面元素也可以根据当前生效的策略进行多层交叉控制。

三、 ZStack-Assist配置系统揭秘

基本原理清楚了，接下来就需要解决如何配置的问题。在研发体系中，最明晰用户需求的是产品经理，而最清楚产品使用逻辑的是测试人员。一套权限配置下来是否能够工作，不会阻断正常的工作流，需要产品和测试共同协作，这里面开发人员不参与任何配置工作，只是提供合适的工具将产品和测试的工作固化下来，这套配置系统称为 ZStack-Assist。具体实现上分为数据采集、可视化配置系统、代码生成引擎、Debug 模式四大块。