阿里低代码引擎开源两年啦~

本文正在参加阿里低代码引擎征文活动~

在编程领域,低代码也算是一个经久不衰的话题了,每个公司、甚至每个开发者都有着独属于自己的一套开发范式,用来提高编程效率。

相较于后端的封装开发框架、封装常用工具包,前端的低代码编程发展会更有成果一些,因为页面、表单、表格这些可视化的东西,天然适合用低代码进行赋能。

国内的一些大厂,比如阿里巴巴就开源了 LowCodeEngine 这个低代码引擎,并在此基础上发展了一些商业化性质的低代码平台(Lab、UIPaaS)。

今天就带大家一块体验一下 LowCodeEngine 的低代码能力~

LowCodeEngine 介绍

LowCodeEngine 是一款开源的低代码引擎,没错它是一个引擎,并不是一个完整的低代码平台,为了让大家有一个清晰的印象,我找了一张图来说明这点:

从上往下看,LowCodeEngine 已经完成了下面三层,你可以借助生态这一层的能力对LowCodeEngine 进行很多的自定义设置和封装操作,让它成为一个完整的低代码平台。

或者如果你对页面要求不高,也可以直接使用 LowCodeEngine 进行搭建,因为它自身也附带了许多物料,但是整体样式上不够精美,对于一些复杂页面还是比较吃力的。

如果你是一个前端开发者,需要通过这个引擎定制一个低代码平台,那么你关注的侧重点应该在生态这里,LowCodeEngine 的生态分为:物料生态、设计器生态和插件生态。

这三个生态也是三处扩展点,可以让定制开发者对其进行任何修改与开发。

LowCodeEngine 在模块化划分上可以分为以下几个模块:入料、编排、渲染和出码。

入料:是指将一些已经存在的组件给注册到低代码引擎中,然后在编辑器中进行使用,比如可以注册许多开源的前端组件库。

编排:是指对一个初始页面进行布局与组建的配置,在其官网例子中就有一个AntD组建例子。

渲染和出码:都是低代码引擎的内部流程,一般用户无需关注。

这几个模块各司其职,也正是这种模块化的划分,LowCodeEngine 预留了许多扩展点,这些扩展点为LowCodeEngine 的生态做出了技术保障。

LowCodeEngine 试用

对于一个用户来说,使用一个低代码平台,它起码要具备以下功能:

  1. 可视化页面搭建
  2. 可视化模型设计
  3. 可视化流程设计
  4. 可视化报表及数据分析

虽然 LowCodeEngine 只是一个引擎,但是其官网上也给了一些简单的在线可编辑器Demo,我们可以从中一窥用法:

如果想使用 AntD 组件低代码一个页面,那么可以选择 基础AntD组件 这个例子:

然后点击图标这个按钮,就会出现许多 AntD 中的组件,可以将其随意拖动到画布中去,然后在这个页面上进行可视化的编辑操作。

但是这个例子中的只有固定的一个页面,无法进行多页面操作。


多页面操作中需要点击 应用级设计器,在这个例子中,可以看到它多了一个资源页面层级:

在这个页面里面每创建一个页面就是一个菜单栏选项卡,我们可以点击右上角的预览看一下效果:

可以看到侧边栏和我们之前创建的页面层级是一一对应的,通过这种方式可以方便的在多个页面中同时进行前端设计。

以上这些就是官方利用低代码引擎设定的一些模板,你也可以利用这个引擎的扩展点设置一些自己常用的模板。

有兴趣的同学可以去 Github 下载一下 LowCodeEngine 进行研究或者定制化开发~

相关推荐
我叫张小白。14 分钟前
Vue3监视系统全解析
前端·javascript·vue.js·前端框架·vue3
WYiQIU5 小时前
11月面了7.8家前端岗,兄弟们12月我先躺为敬...
前端·vue.js·react.js·面试·前端框架·飞书
谢尔登5 小时前
简单聊聊webpack摇树的原理
运维·前端·webpack
娃哈哈哈哈呀5 小时前
formData 传参 如何传数组
前端·javascript·vue.js
zhu_zhu_xia6 小时前
vue3+vite打包出现内存溢出问题
前端·vue
tsumikistep6 小时前
【前后端】接口文档与导入
前端·后端·python·硬件架构
行走的陀螺仪7 小时前
.vscode 文件夹配置详解
前端·ide·vscode·编辑器·开发实践
2503_928411567 小时前
11.24 Vue-组件2
前端·javascript·vue.js
Bigger8 小时前
🎨 用一次就爱上的图标定制体验:CustomIcons 实战
前端·react.js·icon
谢尔登8 小时前
原来Webpack在大厂中这样进行性能优化!
前端·webpack·性能优化