今日分享丨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社区