我做了一个尽可能让开发者用起来更舒服的的低代码平台 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
cc12158
V2EX    分享创造

我做了一个尽可能让开发者用起来更舒服的的低代码平台

  •  
  •   cc12158 2024-01-08 23:51:40 +08:00 4685 次点击
    这是一个创建于 648 天前的主题,其中的信息可能已经有所发展或是发生改变。

    设计理念:构建开发者友好、高度灵活且高效的低代码平台

    设计这个平台的初衷也是因为我也是低代码平台的受害者,因此我自己设计了这个平台,来做一个我心目中真正能提高开发效率,且不会让我那么痛苦的平台,不过在开发过程中也不是那么顺利,很多想法也做了妥协,不过好在现在终于有一个看的过去的产品可以和大家一起聊一聊了。

    体验地址

    https://wecliang.github.io/wiz-test/

    目前这是一个简单的示例网站,保留了基本的设计特点(不过在开发中还有很多事项还没有来及说明,如果你感兴趣,后续我讲继续补充开发的细节)

    设计特点

    1. Monaco-editor 在线代码编辑器: 使用 Monaco-editor 编辑器,平台无需内置大量组件,转而支持线上代码编辑,仅需要提供基础组件库或内置业务相关组件(如任务流)。这有助于简化平台结构,提高开发效率。
    2. 强大的组件开发能力: 提供了全面的组件开发支持,例如生命周期,变量,并支持绑定 ref 和 context 来获取数据,尽可能提供了完整的组件开发能力。
    3. 自动化的 Props 参数处理: 组件的 props 参数无需额外编写代码,通过自定义的 TypeScript 货 JSONSchema 数据(在可视化下未 schema 编辑,代码编辑器下为 typescript ),实现了参数表单的生成。
    4. 可视化布局与代码编辑的无缝切换: 平台支持可视化布局和代码编辑的互相转换,但在这个过程中牺牲了一些代码编辑的自由度(为了能够进行可视化布局转换)
    5. 高性能原生运行体验: 构建产出 js 、css 文件,确保了平台的原生运行速度,提供更流畅的用户体验。
    6. 多组件化: 依赖组件线上化,随着使用的项目增多,可提供了丰富的可用组件,使得每个业务都能够方便地选择和使用适合的组件。
    第 1 条附言    2024-01-09 09:40:51 +08:00

    当前的产品更像是一个概念验证,还未涉足主数据。它仅仅是为了验证我内心的一个想法而存在。我的目标是通过这个产品,降低低代码平台中组件创建的成本,并且摆脱可视化布局对组件的严格限制,避免使系统变得臃肿。 image.png 产品开发理念类似于大家共同参与的积木游戏,就像乐高积木的制造者负责生产各种积木,而用户则像搭积木一样,通过选择和组合这些积木来构建成品。我们的目标是提供尽可能多种类的积木,让用户可以轻松地找到并使用适合他们需求的积木,而无需过多关注底层逻辑。 image.png

    30 条回复    2024-01-19 08:27:59 +08:00
    foolishcrab
        1
    foolishcrab  
       2024-01-09 00:18:28 +08:00 via iPhone
    一个低代码产品,项目特色的第一点是另一个项目,而且是一个代码编辑器项目。您觉得合适吗?
    cc12158
        2
    cc12158  
    OP
       2024-01-09 00:29:01 +08:00
    @foolishcrab 编辑器确实是其中重要的一环,在设计中思考过很多,目前开发起来最顺手效率最高的还是直接写代码,嵌入代码编辑器只是因为目前线上的组件还无法做到直接使用 vscode 编辑,所以采用线上编辑器的方式去开发,尽可能的降低组件开发的成本,并且所产出的组件可以直接给业务人员使用。
    musi
        3
    musi  
       2024-01-09 08:39:40 +08:00
    就这交互叫好用?
    helloet
        4
    helloet  
       2024-01-09 09:01:20 +08:00
    请问可视化编辑器是自己写的还是用的组件库呀?
    cc12158
        5
    cc12158  
    OP
       2024-01-09 09:07:14 +08:00
    @musi 目前这个交互都是我自己做的,没有经过专业人士的设计,后续如果能做起来,在考虑找设计师优化下,前期考虑到成本,如果做不起来找设计师成本太高了
    cc12158
        6
    cc12158  
    OP
       2024-01-09 09:10:29 +08:00
    @helloet 可视化编辑器用到了 react-dnd 作为拖放功能的基础,不过大部分拖动逻辑都是自己写的
    yangg
        7
    yangg  
       2024-01-09 09:14:32 +08:00   1
    感觉还不错,支持!
    yangg
        8
    yangg  
       2024-01-09 09:24:36 +08:00
    现在不能拖动选中一个区域的所有组件?
    cc12158
        9
    cc12158  
    OP
       2024-01-09 09:28:23 +08:00
    @yangg 目前还不能批量选中组件,可以将区域内的组件放在同一个 div 下面,拖动 div
    qingshui33
        10
    qingshui33  
       2024-01-09 09:44:20 +08:00   1
    不是说你这个项目,你这个项目当然是很不错的,看得出来也花了很多精力和时间,很不错,加油 (是就我目前的经验来说,低代码平台在我看来,可用的范围非常的狭窄,而对比他的开发和学习使用的成本来说,是完全不等价的,市面上的低代码平台是真的,,,我怀疑要么就是为了完成 KPI ,要么就是忽悠投资者和用户的,当然也有其他的原因)
    cc12158
        11
    cc12158  
    OP
       2024-01-09 09:52:44 +08:00
    @qingshui33 谢谢你的支持,你说的问题其实也是我遇到并想改变的,我也是低代码平台的受害者(公司内部开发的)当前我也是其中参与的开发者,随着项目做的越来越多实际上并没有让我的工作变得更轻松,每个项目的差异点都很大,反而为了满足各种需求,做的身心疲惫。只有相同的业务可以提高效率,稍有差异反而就会使其效率极其低下。
    panda1079
        12
    panda1079  
       2024-01-09 10:26:08 +08:00   2
    这玩意好别扭,会前端的不屑于用,不会前端的不会用
    Real00
        13
    Real00  
       2024-01-09 10:29:05 +08:00   1
    简单使用了一下,交互并没有低代码开发的爽快感,很多组件的时候缺少跟键盘快捷键和鼠标的互动。
    比如编辑过程中 esc 、enter ,delete 等按键没有效果,双击组件无法弹出对应的编辑框,右键也没有组件菜单
    另外就是左边的组件栏只有英文名,视觉上不好选。
    看你是想解决快速出活还是满足灵活定制的问题了,前者应该有强大丰富的组件库,直接拖入即可用,后者应该是屏蔽掉一些编码细节,直接放 jsx 出来,应该很多人觉得还不如自己写
    hrzpaul02020
        14
    hrzpaul02020  
       2024-01-09 10:35:31 +08:00
    我觉得 amis 这种低代码的思路是更好
    如果是编辑器不如直接上 web 版 vscode
    就是 ui 有点朴素 json 有点多
    JLVe
        15
    JLVe  
       2024-01-09 10:48:13 +08:00
    @hrzpaul02020 +1 amis 面向后台页面的场景,内置的组件很多。
    cc12158
        16
    cc12158  
    OP
       2024-01-09 10:49:32 +08:00
    @Real00 谢谢你的建议,我要做的是可以快速出活,你说的这些交互细节后续我也会添加进去,当然更进一步的方向还需要重新梳理
    murmur
        17
    murmur  
       2024-01-09 10:49:39 +08:00
    低代码仅适用于企业开发 OA 、审批类应用,你这个属于四不像,你场景是什么
    cc12158
        18
    cc12158  
    OP
       2024-01-09 10:53:24 +08:00
    @hrzpaul02020 理想状态肯定是在 vscode 上面能够直接开发更好,目前模块数据是存储在数据库中只有在页面用到的时候才会进行渲染,具体怎么实现在 vscode 中进行组件编辑和开发目前还没有一个好的切入思路
    cc12158
        19
    cc12158  
    OP
       2024-01-09 10:57:44 +08:00
    @murmur 真正要能够应用还需要接入主数据来辅助完成页面交互,目前是一个纯粹的低代码编辑器,还不包含业务场景,后续我会找一些简单的场景作为切入点,尝试做个产品试一下
    murmur
        20
    murmur  
       2024-01-09 11:01:06 +08:00
    @cc12158 你这代码编辑器都露出来了,一点都不低啊,现在的审批类应用开发都是移动端 pc 端界面自适应,还用得着写这么复杂的代码,甚至还得自己处理 store

    多去调研调研市面上产品吧
    lstz
        21
    lstz  
       2024-01-09 11:03:17 +08:00 via iPhone
    礼貌问一下开源吗
    cc12158
        22
    cc12158  
    OP
       2024-01-09 11:15:03 +08:00
    @lstz 目前还只是一个概念,后续优化方向有很多也没固定,可能会做成纯前端的插件开源
    cc12158
        23
    cc12158  
    OP
       2024-01-09 11:28:51 +08:00
    @murmur 感谢你的建议,代码编辑器暴露出来是因为为了演示,分割的一个半成品没有做身份区分,正常应该只有开发者可以看到代码编辑器。
    说是低代码是希望在业务足够丰富的情况下,可以有足够的模块来支撑业务的搭建。
    目前我也在重新规划后续的发展方向,如果你有好的产品也可以推荐给我,也许这对我很重要。
    murmur
        24
    murmur  
       2024-01-09 11:30:23 +08:00
    @cc12158 我说的很清楚,你的场景是哪里,如果是根据设计图出 html 和 css ,别人有 AI
    如果是企业办公类应用,现在任何一个商业 OA 都带对应的快速开发平台
    其余的场景因为代码生成器做的太死了,还不如 gpt 手写
    lstz
        25
    lstz  
       2024-01-09 11:42:45 +08:00 via iPhone
    @cc12158 谢谢回复,加油!
    wwk
        26
    wwk  
       2024-01-09 13:19:43 +08:00
    交互一脸懵啊。拿来推广验证的话,建议砍掉或者隐藏掉一些非必要功能,降低上手门槛。
    racgas
        27
    racgas  
       2024-01-09 13:39:25 +08:00
    其实我心目中的低代码开发平台基本就是 elementui 那样的 ui 组件库
    helloet
        28
    helloet  
       2024-01-09 15:23:38 +08:00
    @cc12158 #6 很厉害
    denghongcai
        29
    denghongcai  
       2024-01-10 07:41:50 +08:00 via Android
    和网易的 tango 很像
    twelife
        30
    twelife  
       2024-01-19 08:27:59 +08:00 via Android
    很棒,加油
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2626 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 25ms UTC 04:20 PVG 12:20 LAX 21:20 JFK 00:20
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86