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

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

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

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

国内的一些大厂,比如阿里巴巴就开源了 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 进行研究或者定制化开发~

相关推荐
tryCbest1 分钟前
第二篇:CSS3 全部知识点全解 + 项目样式实现
前端·css·css3
一木 之林4 分钟前
Agent智能体学习总结:从一次调用到模型自主规划、工具调用与 ReAct 循环的项目实战-6/6
前端·人工智能·学习·react.js
程序员大阳5 分钟前
副队长CSS教程(36)–移动布局与响应式
前端·css·响应式·媒体查询·移动布局
程序员Sunday8 分钟前
React 的 useEffect 怎么工作?依赖数组、清理函数和重复执行如何理解?
前端·javascript
lank_M18 分钟前
Word裁剪图片转HTML走样,该在渲染层修还是入口修
前端·图像处理·人工智能·计算机视觉·html·word
IT_陈寒20 分钟前
深入理解Redis:核心原理与最佳实践
前端·人工智能·后端
Zhu75828 分钟前
开源项目-Sablewisp-轻量、现代的 Chrome 书签管理扩展(Manifest V3)
前端·chrome
wespaul29 分钟前
一条自然语言命令的 49 个节点:可视化编排与每段强校验
前端·数据库
OH_TPC30 分钟前
【鸿蒙优选三方库】@ohos/axios:前端转鸿蒙,网络层几乎不用改
前端·华为·harmonyos·鸿蒙
程序员大阳32 分钟前
副队长CSS教程(38)–transform 变换
前端·css·变换·transform