今日分享丨 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 低代码开发工具前端开发在前端设计原则的基础上,依赖独有的核心开发框架和设计器渲染等方法,增加了多种实用组件,并借鉴了专属的前端工具,来帮助快捷配置样式及打包独立组件及部署。能够更好的满足业务需求,同时简化了开发流程,极大的提高了研发效能。
![](https://static001.geekbang.org/infoq/63/634a19c6ea0f7ac2f14dcd4e761c5240.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
若想了解更多关于浪潮海岳低代码平台 inBuilder 的更多相关内容,可点击下述地址下载安装浪潮海岳低代码平台 inBuilder 开源社区版
评论