我花了8个月，做了一款高颜值零代码平台Mars

背景

      长期以来，我都是低代码的坚定支持者，尽管业界有各种各样的声音，我依然看好低代码，并希望自己参与其中，感受低代码带来的快乐。

      在数字化时代，企业的运营非常依赖于信息系统，而中后台系统便是其中之一，它的场景相对确定，主要以表单、表格和图表为主。对于企业而言，如果招聘资历浅的前端开发，可能会出现交付周期长、交互体验差等问题；如果招聘资历深的前端，会出现成投入成本大，而对于资深前端来说，挑战反而一般。所以，我认为对于垂直行业，应该大力发展低代码平台，来解决垂直场景的搭建问题，让产研都可以平等的参与其中，不论资历，人人平等。

      可能很多前端看完会喷我，觉得有些中后台是很复杂的，低代码根本做不出来；我上面举的例子是基于大多数中后台而言，确实有些后台是极其复杂的，这个在于低代码平台的设计和扩展能力。

      下面我想介绍一下，我在公司是如何利用8个月的个人时间，开发了一款，我理想中的低代码平台，而最终无法落地推广的个人低代码实践之路。

代码开发方式

• Code：基于JavaScript+HTML原子化开发。
• ProCode：基于框架开发（jQuery、Vue）。
• LowCode：基于可视化配置，需要编程辅助（LowCodeEngin、opentiny）。
• NoCode： 基于可视化界面完成整个应用搭建和发布，无需编码或少量语法定义（amis、nocobase、budibase）。
• AICode： 根据图片（草图、海报、网页截图….）、UI设计稿、大模型生成代码和应用（img-cook、gpt）。

现在的代码开发方式跟无人驾驶有点类似，刚好5个等级；目前大部分开发者基于框架开发页面和应用。已经有少量的企业投入大量的人力在研发和使用低代码平台，比如：百度、华为、字节、阿里、腾讯、网易等等；基于大模型生成代码也已经出现苗头，但还无法生成完整的页面和应用，不过我相信在不远的未来这些通通都可以实现。

近期武汉的无人驾驶非常火爆，百度在武汉投入了400多辆无人车，武汉全区开放运营，国内有两种声音，一种是抵制。一种是鼓励。抵制的人认为无人出租车抢了底层人民的饭碗，以后铁人三项保不住了，万千家庭会没有收入。鼓励的人认为科技潮流，大势所趋，无人车作为国家战略，科技高地，必须大力提倡；

其实任何事物的发展都有两面性，每个人的观点都有其一定的道理。就我个人而言，历史洪流滚滚向前，我们应该积极拥抱科技，拥抱变化，于不变中应万变，在茫茫人海中找到属于自己的位置。作为一名开发者，每次低代码出来时，我们都杞人忧天，以后要失业了，与其哀声长叹，倒不如努力奋斗，跟上新时代，现在低代码虽然不温不火，但或许几年后，直接跳过了低代码，大模型直接生成可运行的系统，到那时，或许真的不再需要基层开发者了，只需要会算法、会大模型、会提示词的程序员了。

适合低代码场景

• 企业官网搭建（百度云、华为云）

官网建设类似于过去的Dreamweaver；通过百度云或者华为云已经可以满足绝大部分场景的网站建设，而且有成千上万的模板供你选择，一年才几百块，已经相当成熟。传统企业想要一个官网，我觉得这种最便宜的建站方式。

• BI大屏可视化（百度Sugar、阿里DataV、华为大屏）

这种大屏在一些政府部门尤为常见，他们都是通过低代码拖拽来实现的，上面提到的平台都是基于云收费模式，民间也有不少开源项目，比如h5-dooring等。这一类大屏项目，他们的页面构造也相对单一，主要是图表+简单的表单构成； 但是需要支持页面自适应，数据交互；图标定义等；

• 中后台管理系统（lowcodeengine、amis、opentiny、nocobase）

后台管理系统可以说难度逐步变大，虽然他的形态也只是表单、表格和图表组成，但难度远比大屏、网站建设要更高。因为用在后台系统中的组件多达上百个，这些组件又都可以随意组合，同时要支持表单显隐、表单联动、逻辑表达式、变量定义、接口数据加载；表格还要支持不同的数据渲染，比如日期、金额、数字千分位、状态、进度、操作按钮、图片、图表等。所以，开发好一款中后台难度很大。

这一类低代码平台也有不少开源的，比如鲁班H5、飞冰等；这一类一般都不是很通用，主要取决于公司业务；一般是开发一个低代码基座，然后针对公司业务开发一系列活动组件，然后通过可视化进行活动配置。

最后再说一个题外话，现在大模型中的智能体不都开始用低代码的方式搭建了，通过工作流来实现高复杂度的配置来实现智能体应用开发。

打开想象空间，我觉得未来无处不在的低代码工具。

知名的低代码产品

Mars低代码由来

虽然我关注低代码很久，但我缺乏开发经验，平常也都是看别人的文章，从来没有动手实践过。直到去年（2023年10月）我开始决定开发低代码平台。一方面是希望通过低代码平台给公司前端带来收益，从而提升自己的Level；另一方面确实对低代码充满的热爱，希望参与进去，掌握低代码的开发经验。

为什么叫 Mars ? 我特别羡慕马斯克，同样作为世界的公民，他能创造出世界版的奇迹，而我还只能为一日三餐谋生计。他创办了很多顶级科技企业（特斯拉、机器人、Space、脑机接口），其中我最喜欢的就是他的火星移民计划，这是一个伟大创举，我相信在我有生之年，我们完全有机会移民外星球。

于是我在公司就以Mars为名创建了一个低代码项目。

这是我找人设计的Logo，不知道大家觉得怎么样？

Mars开发历程

我知道低代码开发周期很长，难度也很大，所以在公司招贤纳士，找了几个志同道合的伙伴一起参与Mars的研发，大概两周左右我们集齐了四个伙伴。我们一开始抱着随意做的心态，进度非常缓慢，比如第一周大家去了解低代码行业知识，了解低代码发展历程和现状，整理出一个文档。

一个多月后，我们甚至没写一行代码。直到公司举办了一场黑客马拉松，才吊起了我们的胃口，从12月开始我们日夜加班研发，每周演示开发成果。这期间，我负责整个项目框架构建、核心组件开发、产品设计等工作，由于存在认知盲区，我大量调研了百度amis、阿里lowcodeEngine；就这样边调研，边开发，边摸索。

为了让团队显得专业，正规，我们给自己定义了目标和使命：

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

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

就这样，日夜加班，埋头苦干了两个多月，我们做出了一个小版本，虽然功能缺失还比较多，但作为答辩可能也勉强够用。年后迎来了项目答辩，很遗憾，我们出局了，说实话，那天我觉得挺对不起小伙伴的，但我并没有因为出局而过于沮丧，因为我们掌握了一手的低代码开发经验。其实我出局可能也是早已注定吧，因为公司也有个团队基于阿里的lowcode做了二开提前2个月就上线了低代码产品。所以我可能属于重复造轮子，最终淘汰出局。但我觉得可能是很多人没有真正理解低代码和零代码的本质或者说没有完全看懂什么是低代码。

虽然答辩失败了，但没有阻挡我继续向前的脚步，此时小伙伴已不再参与开发了，我也没好意思再群里直说，就这样我默默开放低代码，一做就是5个月，我的Mars低代码终于可以落地了，我在自己的业务中验证，发现做起来真的很快，通过微服务集成一个CRUD页面或者一个报表页面，过去1-3人天，现在只需要1个小时，最多半天就能全部搞定。

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

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

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

Mars架构设计

Mars基于最新框架版本（React18+Router6+Vite5+Zustand4）实现，前后端一体化，不仅实现页面搭建，更实现了完整应用的搭建。平台包括三层：数据服务层、平台搭建层、应用层。

我理想中的低代码平台：

• 一整套系统的搭建，而不仅仅是页面的搭建。
• 漂亮的操作界面。
• 尽可能的零代码搭建，但需要支持少量的逻辑表达式开发。
• 支持自定义组件。
• 支持UI拖拽、样式定义、事件交互、接口配置。
• 支持所见即所得，实时预览。
• 支持组件显隐、表单联动、弹窗控制、表单验证、接口请求、变量定义、页面权限、按钮权限、菜单权限等。
• 支持页面一键发布、快速回滚。
• 操作一定要简单。
• ….

没错，上面这些都是现在Mars已经实现的功能；下面是某一个数据看板页面的搭建图。

提示：上图为Demo，并不是公司数据。

Mars体验

欢迎页

其实这个首页是动态的，我没有录制gif图，它跟Mars这个名称非常吻合，我个人也非常喜欢宇宙星空这种氛围感。

首页

首页包含三个模块：项目列表、页面列表和组件列表

我希望一个完整的项目在Mars平台就能完成闭环，如果是开发一个新项目，可以直接在Mars平台创建项目；如果是在老系统中开发一个页面，可以选择创建页面，然后通过微服务集成到老系统中。如果搭建的过程中，发现Mars内置的组件满足不了需求，可以选择自定义组件，在线开发和编译。

新建项目

新建项目时，可以设置项目名称、Logo、系统布局、菜单主题、多页签、面包屑、项目权限等。

项目预览

项目配置完成后，就可以预览；可以看到跟我们日常开发后台系统没什么区别，反而做起来更快了。这样一套系统基础框架如果用源码开发还是需要花不少时间的。

整个系统基于RBAC做菜单按钮权限控制，用来满足我们中后台系统的权限功能。它的权限非常完整，支持公开访问和私有访问，只有私有访问才需要RBAC控制，同时支持添加管理员。

提示：以上内容均为随意拖拽配置的数据，并不是真实数据。

菜单配置

上面预览的项目对应的菜单也是系统动态创建的，支持名称、按钮、排序、图标和低代码中的页面，第一次没有页面，可以直接在创建菜单的时候，去创建一个低代码页面进行绑定，项目创建完成后，再去搭建对应的页面。

我觉得整个项目的搭建思路跟我们日常的开发思路非常相似，循序渐进，大家可以脑补一下，我们用源码如何搭建一个中后台的基础框架，如何定义路由，如何配置菜单，如何定义主题的。

页面搭建

整个低代码平台，最核心的就是页面搭建部分了，这个页面包括了以下模块：左侧功能区、中间画布区和右侧配置区。

• 功能区：组件、大纲、页面列表、json代码、接口列表、变量定义、页面人员权限等。
• 画布区：组件拖拽、复制、删除、选中、悬浮等。
• 配置区：组件常规配置、样式配置、事件交互和接口配置。

当然还包括顶部工具条，可以保存、预览、发布、查看发布历史、页面回滚等操作。

通过上面的截图，大家可以感受到页面的搭建，所见即所得，页面的风格，跟我们日常开发后台系统基本一致，Mars开发典型的CRUD功能，易如反掌，主要得益于强大的事件流配置能力。

事件流配置

阿里的事件配置需要编写JS来实现，百度的事件交互是不需要编写代码的，直接配置即可，但是前面讲了是单向串联，不支持分支判断，下面给大家介绍一下，我设计的独特的事件流。

从上面的截图可以看出，表格组件包含了很多按钮，有表格里面的操作栏，也有表格外面的操作按钮，每个按钮都可以添加事件配置，比如上面截图显示：批量更新事件、导出事件、业务事件、更新账单事件等。

第二张图是批量更新按钮对应的事件流配置，通过事件流可以看出，它支持分支判断，根据每一个节点名称，我们也大概能看出来它是做什么功能。比如点击批量更新按钮后，先判断是否选中列表数据，如果没有选中，通过全局提示。 如果选中，获取选中的ID，调用批量更新接口，流程结束。

我觉得这就是非常完美的低代码交互，跟当前大模型配置智能体的工作流非常相似。

页面预览&发布

预览和发布

页面回滚

行为配置

每个按钮的事件背后都离不开行为配置，通过行为配置才能实现各种场景下的复杂功能。举个例子：点击导出，需要导出Excel文件，那事件行为如下：

我们只需要选择文件下载这个行为即可，他对应一个接口请求，系统会按照blob的形式进行下载。

行为目前支持：页面跳转、路由跳转、打开和关闭弹窗、消息通知、全局提示、发送请求、文件下载、组件显示和隐藏、表单组件启用和禁用、组件方法变量赋值、发送飞书消息、定时器、复制文本、自定义脚本等。

其中最厉害的当属组件方法和自定义脚本，有这两个能力，几乎可以实现70%的常见功能。

自定义组件

如果使用Mars开发的过程中，发现内置组件不满足需求，此时有两个办法，一是通知Mars平台开发该组件；二是自定义开发该组件。

自定义组件包括：jsx、less、config和readme

我基于esbuild对jsx进行在线编译，config主要是该组件的配置，编译好以后上传到平台上面，Mars平台再拖拽的时候，远程加载该自定义组件。

最后

对于这么一款既漂亮又实用的低代码平台，我相信你看完肯定会爱上的，当然里面还有很多知识点没有介绍，今天只是热个场，很多人可能等我开源，因为涉及到后端和数据库，加上当前这个项目接了sso，所以开源还需要做很多准备工作，要不然大家拿到也无法使用，过一段时间，等我准备好了，会再发一篇文章来说明。