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

今日分享丨inBuilder低代码平台有关前端的“道、法、术、器”_第1张图片

“道、法、术、器”出自老子的《道德经》,“道”,指的是事物循环变迁中不变的法则,是指导思想;“法”,指的是在探索“道”的过程中通过实践思考归纳出的规则体系和具体方法;“术”,指的是在规则和原则指引下的具体操作技术;“器”,是指实体的物质或工具。
浪潮海岳低代码平台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社区

你可能感兴趣的:(低代码,前端)