初探最流行的前端低代码平台

发表于 阅读次数： 评论数： 本文字数： 2.7k 阅读时长 ≈ 2 分钟

前言

在 2022 年，“低代码” 成了热门的话题，各大云厂商都在这个领域发力。那么作为普通的企业，是否也可以深度定制一套自己的 “低代码” 平台呢？

云厂商的低代码平台

阿里云

阿里云推出了易搭，通过简单的拖拽、配置，即可完成业务应用的搭建。旨在为广大中小企业提供一套低成本的企业应用搭建解决方案。应用无缝植入钉钉企业工作台，随时随地、高效协同。

frontend-low-code-1

腾讯云

腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用（小程序、H5 应用、Web 应用等），打通了小程序、云函数。

frontend-low-code-2

开源的低代码平台

基础平台

amis

提示

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率，由百度团队开源。

frontend-low-coder-3

用 JSON 写页面的好处

为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 JSON 来配置，它的独特好处是：

  • 不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；
  • 不受前端技术更新的影响：百度内部最老的 amis 页面是 6 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高；
  • 享受 amis 的不断升级：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；
  • 可以完全使用 可视化页面编辑器 来制作页面；一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。

amis 的其它亮点

  • 提供完整的界面解决方案：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；
  • 大量内置组件（120+），一站式解决：其它 UI 框架大部分都只有最通用的组件，如果遇到一些稍微不常用的组件就得自己找第三方，而这些第三方组件往往在展现和交互上不一致，整合起来效果不好，而 amis 则内置大量组件，包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后台页面开发只需要了解 amis 就足够了；
  • 支持扩展：除了低代码模式，还可以通过 自定义组件 来扩充组件，实际上 amis 可以当成普通 UI 库来使用，实现 90% 低代码，10% 代码开发的混合模式，既提升了效率，又不失灵活性；
  • 容器支持无限级嵌套：可以通过嵌套来满足各种布局及展现需求；
  • 经历了长时间的实战考验：amis 在百度内部得到了广泛使用，在 6 年多的时间里创建了 5 万页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 JSON 配置。

amis 不适合做什么

使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：

  • 大量定制 UI：JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。
  • 极为复杂或特殊的交互：
    • 有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。
    • 但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。

mometa

提示

mometa 是一款面向研发的低代码元编程，代码可视编辑，辅助编码工具。

frontend-low-coder-5

背景

mometa 不是传统主流的低代码平台（如 amis / 云凤蝶），mometa 是面向研发的、代码可视设计编辑平台，它更像是 dreamweaver、gui 可视编辑之于程序员。

特性

  • 面向研发的代码可视化编辑，直接作用于源码
    • 响应式布局、路由模拟、物料预览
    • 反向定位（视图定位源码）
    • 拖拽插入物料
    • 拖拽移动
    • 上下移动
    • 删除
    • 替换
    • 层级选择
  • 接入友好，Webpack>=4 插件化接入
  • 开发友好，物料库支持热更新，不破坏已有开发模式
  • 开放物料生态，可定制团队内物料库，见 mometa-mat
  • 多语言、多生态支持，目前暂只支持 React，后续有计划支持 Vue

解决的问题

  • 对低代码平台不形成依赖，二次开发可以无缝进入代码开发模式
  • 同时支持所见即所得的可视编辑，用于提效，提升开发体验
  • 提供物料生态，可自定义物料，提升物料使用体验，提升复用率

mometa 定位更多是基于程序员本地开发的模式，新增了可视化编码的能力（修改的也是本地的代码文件本身）。它更像是辅助编码工具，而不是 No-Code (amis / 云凤蝶) 的平台方案。

Sortable

提示

Sortable 是一个用于可重新排序的拖放列表的 JavaScript 库，可实现适用于现代浏览器和触摸设备的可重新排序的拖放列表，不需要依赖 jQuery 或框架。

H5 开发

H5-Dooring

提示

H5-Dooring 是一款功能强大，专业可靠的 H5 可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的 H5 落地页最佳实践。技术栈以 React 和 Typescript 为主， 后台采用 Nodejs 开发，正在探索 h5-lowcode 解决方案。

frontend-low-coder-4

luban-h5

提示

鲁班 H5 是基于 Vue2.0 开发，通过拖拽快速生成页面的平台，类似 易企秀、Maka、百度 H5 等平台。

frontend-low-coder-6

quark-h5

提示

quark-h5 是一款基于 Vue2 + Koa2 的 H5 页面可视化制作工具，让不会写代码的人也能轻松快速上手制作 H5 页面。类似易企秀、百度 H5 等 H5 制作、建站工具。

frontend-low-coder7

其他开源项目

  • h5-factory：H5 页面制作，移动端专题活动页面可视化编辑
  • lz-h5-edit：随心秀（React 版 H5 微场景编辑器)，一款类似易企秀、兔展的 H5 微场景编辑器
  • vite-vue3-lowcode：移动端低代码平台，实现了可视化拖拽、可视化编辑器，类似易企秀的 H5 制作、建站工具、可视化搭建工具；

参考博客