背景
我是一名资深前端从业者，长期以来一直从事前端研发工作，主要集中在后台管理系统、小程序等方面。最近几年深有感触，大多数后台管理系统都近乎雷同，差异的部分主要是页面风格和自定义功能等。
为了解决重复劳动力问题，提高生产力，我在2023-10独立开发低代码平台marsview，在2024-10正式开源。
开源以后，掘金和Github广受好评，今天详细介绍一下marsview的设计理念。
动机
- 后台管理系统如出一辙，存在大量的重复劳动力。
- 部分传统公司前端资源紧缺，后端做前端系统又会造成不够专业的尴尬局面。
- 前端水平参差不齐，经验少的人会导致做出来的系统不好用，资深的人又会带来高成本投入。
Marsview就是为了解决这些问题而诞生的：
- 无需前端人才就能快速搭建企业级后台系统。
- 无需审美观就能搭建既好看又实用的后台系统。
- 大大降低企业研发成本，提高生产力。
开源地址
- 前端仓库：marsview
- 在线体验地址：www.marsview.com.cn
当前默认域名是
www.marsview.cc但由于这个域名近期需要重新备案，因此大家可以先使用www.marsview.com.cn
开源成果
- 开源三个月以来，
Marsview点赞Star突破1.2K。 - 代码贡献者
14+ - 加群人数
500+ - 捐赠者
10+ - 用户
PV突破30w+
使命
让搭建更简单，让开发更高效。
没错，我也有使命，那就是通过技术赋能于企业，让前端开发更简单。
设计理念
欢迎页
我个人还是非常喜欢星空的主题，给人无限遐想，世界的尽头究竟在哪里。
项目列表
首页包含 5 个模块
- 项目列表
- 页面列表
- 组件库
- 精选模板
- 图片云
设计思路
我们通过下面流程图来对比一下传统开发和低代码开发过程。
可以明显看到低代码只需要三步，那为什么marsview提供了5个模块呢？
-
当你拿到一个新项目需求时，第一步需要在
marsview创建一个项目，这个项目支持名称、Logo、主题、风格、开发者权限、菜单等等一系列配置化功能。 -
在页面列表创建这个项目需要使用的页面。
-
假如搭建的过程中
marsview的组件无法满足需求，此时可以自定义组件开发来解决最后一公里问题。 -
有些静态元素需要使用背景图片功能，可以通过图片云进行上传。
所以，这5个模块可以完成整个项目的闭环。
Marsview交互
页面列表
页面是低代码的核心模块，页面需要通过组件拖拽、属性配置、样式配置、事件交互、逻辑编排等一系列组合能力完成，最终保存并发布以后，才能访问。
功能点：
- 新建页面
- 删除页面
- 复制页面
- 访问页面
- 查看各个环境状态
- 查看市场中其他用户创建的页面
设计器
功能点
- 组件物料区。当前开发的组件物料70个左右。
- 自定义组件。用来自定义开发，系统会自动编译并上传OSS，主要为了解决自定义需求。
- 画布区。用来承担组件编排，包含拖拽、ctrl+c/v、Del 删除、上下顺序调整、选中和渲染等功能。
- 配置区。包含：属性配置、样式配置、事件编排和数据交互。
除了以上4个核心模块以外，页面左侧菜单还支持：组件大纲（拖拽排序、选中）、页面源码、页面列表、接口统一管理、变量配置和页面成员等功能。
我看到市面上很多低代码在事件编排和数据交互这块做的很弱，我个人觉得前端离开了事件编排和数据交互就不是一个前端系统，marsview始终以开发的角度思考设计问题，既要考虑开发习惯又要考虑低代码使用的便捷性，我相信marsview在低代码行业中，算得上一批小小的黑马，虽然我们现在关注度还不够，但，我们有信心做到更强。
注意，页面搭建完成后，必须保存并发布才可以访问，类似于我们代码的提交和部署。
事件流
事件流是marsview的特色之一，通过事件流可以完成各种高复杂度的页面交互。
我给大家举一个简单的例子：
1. 搭建一个列表功能，配置数据源和删除按钮。
从上图可以看到操作列有删除和编辑按钮，此时右侧事件配置中可以配置删除事件流。
2. 点击删除按钮时，需要调用删除接口，如果删除成功，刷新列表，删除失败，显示报错提示。
这个需求应该很常见吧，代码实现也非常简单，如何套用在低代码中？
上面这个事件流看起来像是一个流程图，我们通过流程图来表达需求意图，非常直观。
点开第一个节点删除数据时，我们可以查看配置的接口信息。
3.添加分支节点来判断成功和失败的执行逻辑
如何知道在哪些地方可以创建分支呢？接口请求、脚本运行返回布尔值等这一类可以创建分支节点。
其实对于列表删除这个需求不创建分支节点也能实现，因为默认就会按成功状态去执行，只有失败需要自定义逻辑的时候，我们才需要添加条件分支。
举个例子：点击按钮，打开弹框，点击确定以后，刷新列表。 这个过程就不需要配置条件分支，系统会自动在弹框的确定事件中执行下一步动作。
4. 最终简写事件流
也是系统推荐的方式。
如果没有条件分支，系统会自动按成功逻辑去执行。
自定义组件
自定义组件用来解决最后一公里问题，如上图，产品要求开发实现一个股票趋势图，但是，marsview平台中并没有提供这个组件，此时，我们可以自己实现，跟我们平常开发一样，编写react源码，系统会自动编译并预览，符合预期以后，点击保存并发布。
自定义组件如何使用？
打开页面设计器，点击左侧自定义组件，点击组件即可渲染到画布中。
精选模板
精选模板主要是为开发者搭建一些常用的页面模板，比如：CRUD、企业官网、数据分析、数据看板、事件流操作、变量使用等。
未来模板会提供更加丰富的功能，比如：CRM搭建、OA搭建、完整CRUD模板 以及各用户上传的精美模板。
大家可以挑选符合需求的模板，进行复制，变成自己的页面。
图片云
为什么要做图片云功能？
在日常开发的过程中，我们会遇到各种需要使用图片的场景，比如一个Logo、一个背景图、按钮icon等等，有了在线云服务，我们可以直接上传，复制cdn地址，配置在低代码中，这样的功能非常实用和高效。
发布和回滚
在传统开发的过程中，当线上出现问题时，我们第一时间会选择回滚，同样，在低代码搭建过程中，我们也支持发布和回滚。
如上图，每一次发布都会有发布历史，我们甚至可以查看本次发布的所有源码。
如果本次发布有问题，我们可以选择前面的版本进行回滚。
物料加载方式
很多人会有疑问，低代码平台为了完成各种复杂需求，需要开发很多组件，比如marsview平台当前有近70个组件，有的平台高达100多个，那系统会不会越来越卡顿？
答案是：不会。
marsview采用按需加载的方式去加载每一个组件，包括自定义组件。平台默认只加载核心代码包，这一点大家可以通过浏览器的network进行验证。
那marsview是如何实现平台组件和自定义组件的按需加载的呢？ 我将在下一期文章中进行分析，敬请关注。
总结
marsview是一款独具特色的低代码搭建平台，目前平台汇聚了一群热爱低代码的开发者，我们相信在大家的支持下，marsview会变得越来越好。
我是河畔一角，一名前端程序员，热爱编程，热爱低代码。
marsview从今天起，拥有了官方公众号，有兴趣的朋友可以关注，以后会不定期分享marsview开发细节。
