前端低代码架构设计 (思路构建)

3,121 阅读5分钟

前世今生

该篇章主要讲述,我从业之后,对于低代码设计的一些经历见识,如果不感兴趣的可以直接跳过这个篇幅。

前端初代(DW)

第一代的网页时代,其实大家都不会陌生于,一个叫做Adobe Dreamweaver的软件,当然人们通常会叫它另一个名字“DW”。也有人会说,早期的前端,被叫做切图仔。

不知道多少人会熟悉这个页面,我记得我学生时代,写的第一个页面,用的是微软的"Frontpage"软件。使用很简单,你甚至不需要去写代码。我们通常使用一些网格化布局,然后找个设计好的图片,使用 ps 去切开,然后布局在网格中。

我愿意成他为 1.0 的低代码时代,也是我梦开始的地方。相信很多人,一句代码都不会的时候,也用过这个类似的软件。那时候是不是通常做个门户网站,然后贴个鼠标特效呢。

这时候,我们来总结一下,这个软件有什么特点,和解决了什么痛点?你会发现,你不会写代码,你甚至不知道什么叫做 JavaScript,这和 Word 、ppt 类似,只要你足够的细心,你就能布局出一个老版的门户网站,它拥有工具栏,你可以给样式新增各种样式。当然后面我们知道,那个样式的名字叫做 CSS。

最早的时期,大家采用的是 Dw 这样的工具,那么为什么后面突然就不发展了?我的记忆中,后面前端界,进入了移动端时代,jQuery、html5、CSS3。响应式的时代,呼之欲出,不知道,你是否还记得那个经典的 Bootstrap时代。而也预示着,DW 这样的网格化布局的样式,被人们淘汰。人们开始更加追求页面的动画,页面中特效,页面的响应式。

后端时代降临 (phpMyAdmin)

其实低代码的发展,绝对不是只有前端最初的 DW 设计,同样你不需要学会写什么代码,你需要使用这个系统,他就能给你生成一些,简单的单表 mysql 设计。这时候,你稍微会一点后端语言,例如 php、java,你就可以写出一些接口,去操作数据。

模板时代

你现在已经了解,原来前端可以生成,后端sql也可以生成。 那么后端代码可以生成吗、前端代码呢?当你的思路打开后,你会发现,那你写一个模板,然后替换内部的内容不就好了。

可以通过一些模板,生成后端的语言/前端的语言,这样是不是就实现了基础的低代码。这个技术,广泛的运用在表单设计中。

低代码设计器

表单设计器

阅读完上文后,你会发现,其实低代码最好运用,最容易运用的地方,其实就是表单设计器。通常业务代码,被人们戏称为 CURD (增删改查)嘛。这类数据,最广泛运用在后端的管理系统中,我们对基础数据需要有一些维护。

最常见的页面,就是这样的一个 curd 的表单、新增、删除的表单。这时候,我们通常需要一个表单设计器。

我们通过拖拉拽的方式,构建出一个表单,这时候,和后端结合,就可以写出 curd 的页面。

流程设计器

通过表单设计的新增后,我们发现,很多内部的表单、流程、其实每次写死不大可能。比如说一个通用申请流程。你永远不知道下一个审批人会变更为谁,这时候你需要有一个设计器,可以填一些脚本,控制单据流程的流转。

移动端设计器

通过上述的表单设计,那么也可以诞生出,移动端设计,你可以是vue/react 的网页,当然也可以是 uni-app/taro。

大屏设计器

产生出数据之后,不论是运营、还是成果展示,和 echart 结合后,就会有一些大屏的需求。这时候大屏设计器的作用就体现出来。

低代码架构设计图

这是我认为比较常见,并且通用的前端架构设计图。

低代码的流程设计

  可以通过业务实体的新建,类似与 phpMyAdmin 这样的设计,管理我们的数据。也可以通过表单设计器来反推实体的类型。

  这样一个表单的 curd 就完成了。不论表单的设计是跟着表格的导入,还是跟着流程设计器的流程。其实一个简单的 PC 管理平台就初步构造完成。

总结

  虽然说低代码平台的构建能够极大的提高工作效率,但是还是有很多声音,各种定制化的功能,它就是无法完成。但是不可否认它的确可以解决很多低级程序员的搬砖问题。其实作为一个工具,在代码的开始之初,就有人推动着发展,本质上并不是一个很新鲜的实物。而互联网+的结合,才是产品的出路。

  这是我最近对低代码的一些感悟,如果有机会,针对代码的实现写一些续作。