今日分享丨 inBuilder 低代码平台有关前端的“道、法、术、器”

“道、法、术、器”出自老子的《道德经》，“道”，指的是事物循环变迁中不变的法则，是指导思想；“法”，指的是在探索“道”的过程中通过实践思考归纳出的规则体系和具体方法；“术”，指的是在规则和原则指引下的具体操作技术；“器”，是指实体的物质或工具。

浪潮海岳低代码平台 inBuilder 的前端也有一套自己的“道、法、术、器”，分别是“前端开发基本原则”、“前端核心技术”、“前端具体实践技巧”以及“前端工具”。

一、 道 —— 前端开发基本原则

十大前端设计原则

浪潮海岳 inBuilder 低代码工具基于如下的十大前端设计原则进行开发，以用户为中心，致力于为用户提供更美观、易用、高效的开发体验。

1. 可见性（Visibility）：界面元素和功能清晰可见，用户可以一眼找到所需的信息或功能，减少用户的搜索和猜测。

2. 反馈（Feedback）：在用户进行操作后，给出及时的反馈。

3. 约束（Constraints）：通过界面元素、图标等方式，强制用户遵循一定的规则和约束，防止用户的错误操作。

4. 一致性（Consistency）：整体设计风格保持一致，让用户更容易使用和掌握产品。

5. 易记性（Memory）：用户能够轻松地记住各种操作方式，减少用户的犯错率。

6. 易学性（Learnability）：让用户在第一次接触产品时就能够快速掌握基本的操作和使用方法。

7. 可预测性（Predictability）：使用户能够准确地预测到产品的反应和结果。

8. 灵活性（Flexibility）：适应用户的不同需求和使用场景。

9. 简洁性（Simplicity）：设计和功能简洁明了，用户可以轻松地理解和使用产品。

10. 直觉性（Affordance）：用户可以通过界面元素和设计来预测和理解产品的功能和使用方式。

二、 法 —— inBuilder 前端核心技术

浪潮海岳 inBuilder 前端核心技术包括但不限于：低代码开发框架、表单设计器渲染及 Farris UI 组件设计。

inBuilder 低代码开发框架

浪潮海岳 inBuilder 低代码开发框架具有极高的灵活性和扩展性，可以根据不同的需求和业务场景进行定制和扩展。无论是企业级应用还是个人开发项目，都可以通过 inBuilder 低代码开发框架来快速搭建高质量、易维护的应用程序。

inBuilder 低代码开发框架遵循多种设计原则与模式，包括：1.单一职责原则：inBuilder 低代码开发框架将一个类或方法的职责尽可能地分离，提高代码的可读性、可维护性和可扩展性。2.接口隔离原则：inBuilder 低代码开发框架通过接口，减少不必要的依赖，降低耦合度。3.MVVM 模式：inBuilder 低代码开发框架将应用程序分为视图、模型和视图模型三个部分，将业务逻辑与界面逻辑分离，提高代码的可测试性和可维护性。

除此之外，在 inBuilder 低代码开发框架中，还运用了“开放封闭原则”、“依赖导致原则”、“装饰器模式”、“观察者模式”、“命令模式”、“命令与查询分离原则”等多项原则。同时，inBuilder 低代码开发框架强调“Write Less Do More”的设计原则，通过注解代替冗余代码，降低了开发难度，提高开发效率。开发人员可以通过简单的配置和少量的代码编写，完成复杂的业务逻辑和界面设计。

表单设计器渲染

浪潮海岳 inBuilder 使用 JS 和 Angular 来渲染表单设计器，致力于提供更加灵活的 UI 组件和业务逻辑、更高效的开发、更好的用户体验等。

表单设计器使用纯 JS 渲染的表单画布。UI 组件和业务逻辑更加灵活，且表单设计器更加易于扩展和个性化定制。同时，表单设计器使用 Angular 进行开发。angular 提供了丰富的组件和指令，从而可以更加方便地实现数据双向绑定和依赖注入。这些功能可以帮助开发者更快速地创建复杂的 UI 组件和表单，提高开发效率。

Farris UI 组件

Farris UI 是一套基于 Angular 框架的 UI 组件库。

Farris UI 组件库支持 Farris 内置的不同主题，具有多项优势：

1.丰富的组件库，覆盖了大部分常用的 UI 组件，包括 button 按钮、form 表单、datagrid 表格、modal 弹框、dropdown 下拉菜单等，可快速搭建一个美观、高效的界面；

2.支持响应式布局，可以在不同的屏幕大小下自适应调整，适应各种设备；

3.易于扩展和自定义，提供了丰富的主题样式和定制化选项，可以根据项目需要定制自己的主题样式和组件；

4.完善的文档和示例，易于学习和使用，减少开发人员的学习成本。

三、 术 —— inBuilder 前端具体实践技巧

浪潮海岳 inBuilder 前端具体实践多种多样，包括响应式列宽编辑器、交互面板、代码视图等。

响应式列宽编辑器

浪潮海岳 inBuilder 表单设计器中内置了响应式列宽编辑器来实现响应式布局。响应式列宽编辑器支持响应式设计，可以自动适应不同的屏幕尺寸和分辨率，使得界面 form 组件区域可以在不同的设备上呈现出最佳的视觉效果。

响应式布局中的 12 栅格布局是一种经典的布局方式。12 栅格布局将界面的水平宽度分为 12 个栅格，将组件放置在不同的栅格中，实现不同屏幕分辨率下的布局优化。

响应式列宽编辑器同样支持 12 栅格布局，使得开发人员可以更加方便地配置组件的布局，并通过简单的拖放和点击操作实现 form 组件区域布局的可视化编辑。同时，响应式列宽编辑器也支持不同分组，可以确保同组组件不因分辨率变化而产生错位情况。

总之，响应式列宽编辑器支持多种屏幕分辨率、不同分组、响应式、实时预览视图、自定义和标准模式切换等功能，并支持经典的 12 栅格布局方式，使得界面 form 组件区可以自动适应各种分辨率大小，极大的提高了开发效率。

交互面板

事件交互面板是一款在浪潮海岳 inBuilder 低代码开发框架中提供的工具，它可以帮助用户快速绑定所需事件，选择方法，以及填写参数。通过事件交互面板，用户可以快捷的进行事件绑定和交互操作。另外，事件交互面板也具有很高的灵活性和扩展性。开发人员可以根据自己的需求和业务场景，添加自定义方法，并进行参数设置，满足不同的需求和操作要求。

代码视图

代码视图页面是 inBuilder 低代码开发中的一个重要界面，它为开发人员提供了一个自由编写和调试代码的界面。代码视图页面可以让开发人员更加方便地编写自定义的方法，实现特定的功能和需求。

在代码视图页面中，开发人员可以自由地编写代码，也可以自行编排方法的执行顺序。这大大提高了编写效率，使得开发人员可以更加灵活地调整代码，快速编写自定义方法。此外，代码视图页面还内置了代码结构规范，可以帮助开发人员更好地组织代码，减少代码冗余和错误，提高代码的可读性和可维护性。

四、 器——inBuilder 前端工具

浪潮海岳 inBuilder 在表单设计器开发中，常用的工具包括：主题编辑器、打包工具 roll-up 等。

主题编辑器

主题编辑器提供了一个可视化的界面，使得零基础开发者可以轻松地选择和配置页面的颜色、字体、布局等元素，无需深入学习 CSS 代码。同时，主题编辑器在配置主题颜色后，点击导出，可以自动生成对应的 CSS 样式文件，从而大大减少了开发人员编写 CSS 代码的时间和精力成本。

此外，主题编辑器还提供常用的主题样式和组件示例，通过刷新界面，可以实时查看组件及界面整体样式，极大的提高了界面配置效率。

打包工具：roll-up

浪潮海岳 inBuilder 表单设计器在前端开发过程中采用打包 roll-up 工具，支持快速打包已有的组件，显著提高了开发效率和可维护性。其将各组件打包为独立可部署的文件，可以方便后续调试和部署。

roll-up 打包工具支持自动化构建，自动执行许多繁琐的构建任务，例如合并、压缩、混淆和优化代码，从而节省开发人员的时间和精力。roll-up 打包工具还支持模块化开发，方便开发人员轻松管理和维护大量的代码文件。

使用打包工具可以降低开发成本和出错的风险，是浪潮海岳 inBuilder 表单设计器开发中不可或缺的工具。

总结页

浪潮海岳 inBuilder 低代码开发工具前端开发在前端设计原则的基础上，依赖独有的核心开发框架和设计器渲染等方法，增加了多种实用组件，并借鉴了专属的前端工具，来帮助快捷配置样式及打包独立组件及部署。能够更好的满足业务需求，同时简化了开发流程，极大的提高了研发效能。

若想了解更多关于浪潮海岳低代码平台 inBuilder 的更多相关内容，可点击下述地址下载安装浪潮海岳低代码平台 inBuilder 开源社区版

inBuilder社区