手记

超酷的低代码平台 Marsview

2025-03-05 17:44:1827浏览

河畔一角

1实战 · 14手记 · 5推荐

前沿

大家好,我是河畔一角,慕课网的老讲师,从17年参与讲课,出品过《乐视商城》《小米商城》《React全家桶》《React通用后台》等课程,由于工作原因,基本上每年录一门课程,但近两年受环境影响,需求萎缩,课程已经持续不下去了。​

在 2023 年 开始思考转型,期望做一款好的产品,能够让开发者喜欢,并且从中收益。 由于近些年做了很多的后台管理系统,而且发现这些管理系统都差不多,那有没有什么办法可以快速提高开发效率呢? 这就是动手开发低代码的背景和初衷。

历程

在 2023 年 10 月启动低代码平台搭建,在 2024 年 8 月发布第一个版本,两周后开源了,开源一周就突破了 300 Star,一个月就突破了 1000 Star,目前 Github 已经突破 1430 Star 。参与开源贡献的人数突破 19 人。

开源介绍

开源后,我给它起名叫:Marsview ,它是 mars 和 view 的合并,一个象征对宇宙星球的渴望,一个代表前端的视图,所以称之为 Marsview 。

上图是官网的首页,在漆黑的业务,星空璀璨,没错,就是这个感觉。

使命:让搭建更简单、让开发更高效。

目标:通过 Marsview 赋能每一位开发者,让他们快速、高效完成应用的开发和上线。

开源地址(Github):https://github.com/JackySoft/marsview

开源地址(Gitee):https://gitee.com/jack-bean/marsview

在半年的时间内,受到了很多开发者的关注,在高峰时期,一天有 10000 多的 PV 浏览和使用平台,一个月最高 30 万的浏览量。

当前,平台已经沉淀了 3000 多个项目,8000 多个页面,我们对线上平台做了严格的权限控制,保证用户的使用安全。

平台介绍

Marsview 是一款纯前端的低代搭建平台,面向前后端开发者,主要帮助开发者快速搭建前端交互系统。

Marsview 可以大幅降低企业开发成本,减少企业对前端开发者的过渡依赖。开发者可以在平台上实现完整项目搭建,可视化编排,一键发布,快速回滚等能力。Marsview操作简单,功能强大,所见即所得。

上面是使用低代码平台的操作流程,完全可视化操作,无需一行代码,即可完成项目搭建到发布。

平台首页

上图为自己创建的项目列表,同时也会包含别人授权给你的项目。我们可以对项目做Logo、名称、主题、菜单、RBAC权限等配置操作。

页面列表

上图为项目下创建的页面,支持复制、删除、预览和快速访问。

点击其中一个页面打开以后,会进入到页面的编辑画面,它拥有强大的画布,支持 80 + 组件,支持接口调用、变量定义、事件配置、样式配置等等功能。

上面这个图有没有很熟悉,里面的页面列表就是我们《React通用后台》课程的其中一个页面,也就是说,通过这套低代码平台,完全可以搭建《React通用后台》课程功能。

自定义组件

平台默认提供了 80 + 组件,但可能还是无法满足业务需求,我们又开发了自定义组件的功能,通过源码开发可以满足个性化的场景。

ctrl+s保存后,会自动格式化代码,并且实时预览。

模板列表

为了应对小白用户不了解平台的使用,我们开发了模板列表,一键即可安装。

图片云

为什么需要图片云呢?因为在搭建的过程中,有些组件需要上传图片素材,可以通过图片云上传后拿到图片地址,贴在组件中。其次,每当页面发布的时候,会自动把当前页面进行截图,生成一张图片,上传到服务器。

为什么要自研而不是基于开源搭建?

我目前了解的开源产品主要是amis和lowcodeEngine,其他国外还有很多平台,但是用不习惯,只有国产这两款用起来似乎更符合我们的开发习惯。 但是我体验以后,发现了两个我接受不了的问题:

阿里的lowcodeEngine只是UI层面的搭建,关于事件交互部分依然需要React开发来实现,这种方式最大的好处就是可以实现很多超级复杂的交互,但缺点也很明显。只要是需要前端编写大量代码才能实现的低代码我觉得都不算好平台(只是我个人观点)。
百度的amis哪里都好,唯独两个体验让我无法接受。一个是页面和菜单来回跳,因为amis的搭建包括了菜单配置,当你选中内容区时会隐藏左侧菜单区域,导致页面来回跳转,看的极其难受,大家也可以去体验一下aisuda.github.io/amis-editor… 还有一个就是它虽然是零代码,但是事件流不支持分支判断,比如请求成功走A流程,请求失败走B流程,目前它的事件流是单向串联的。

Mars架构设计

Marsview 分为 3 层,上层为项目的创建、页面解析等,中层为搭建平台,底层为数据服务。

事件流

事件流是 Marsview 中,超酷的一个功能,目前在同行内,很少有这么炫酷强大的事件流,通过事件流可以完成各种高难度的复杂交互。

上面是点击删除按钮后的事件流。通过上图可以看出,点击删除按钮后,先调用了删除接口,当接口成功后,刷新了页面列表,最后结束。 当然这个事件流非常简单,结合 80+ 组件,可以实现上百种功能的调用。

结尾

好了,我是河畔一角,一个老前端,如果你对低代码感兴趣,不妨看看,核心代码已开源,可共搭建学习参考。如果对平台感兴趣,想要交流技术经验,可以添加我个人微信:17611021717,我们有庞大的技术交流群。

0人推荐
随时随地看视频
慕课网APP