对于低代码技术库的选型

前言

零代码平台在企业数字化转型的过程中不可或缺，这要从零代码的特性讲起。企业想要实现某个业务问题的信息化、数字化：常规的选择一是自主开发软件，不具备软件开发能力的企业；第二个常规选择是购买成品化软件。但这两种方式都存在一定的问题，而零代码开发平台可以作为很好的补充或者替代选择。

（一）拖拽技术库

对比：

技术库	语言	开源	部署	操作	模块	商业性
h5原生态	js	是	正常部署	比较简单	基本适应	免费
dragula	js	是	正常部署	有文档教程	基本适应	未知
Interact	js	是	正常部署	有完善的文档教程	基本适应	免费
react-dnd	ts	是	正常部署	有教程文档	基本适应	免费
Sortable	js	是	正常部署	有演示示例	基本适应	免费
scriptaculous	js（html 80%）	是	正常部署	暂无访问	基本适应	免费
react-beautiful-dnd	js	是	正常部署	有详细的示例	基本适应	免费
react-grid-dnd	ts	是	正常部署	有示例教程	基本适应	免费
dnd kit	ts	是	正常部署	有详细教程	基本适应	免费
H5-dooring	ts,js	是	正常部署	有详细教程	基本适应	免费
Formily	ts	是	正常部署	有教程示例	基本适应	免费
V6.Dooring	ts	是	正常部署	有简单的教程	基本适应	免费

1.h5原生态

在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。

• 拖动事件：dragstart、drag、dragend
• 放置事件：dragenter、dragover、drop
• 拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发dragstart->drag->dragenter->dragover->drop->dragend

在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData

参考：dome

文档：MDN

2.dragula

一款强大且兼容性极好的拖拽排序库, 兼容「IE7+」, 并且支持 「vanilla JavaScript / Angular / React」等框架.

特性：

• 超级容易设置
• 没有臃肿的依赖
• 自行计算排序顺序
• 项目将被丢弃的阴影提供视觉反馈
• 触摸事件！
• 无需任何配置即可无缝处理点击

源码:github

演示：demo

3.Interact.js

interact.js是一个 「JavaScript」 资源库提供拖，放，调整尺寸和多点触摸手势功能用于现代浏览器。它的免费和开源版本提供了强大的配置像惯性和指针、约束调整器。

「interact.js Pro」 使用更多的调节器扩展了该开源功能，更多复杂的内置交互，框架集成，和高级开发工具，用于节省我们的事件和js开销。

特点包括：

• 惯性和折断
• 多点触控，同时交互
• 跨浏览器和设备，支持桌面和移动版本的Chrome、Firefox和Opera以及Internet Explorer 9+
• 与SVG元素的交互
• 独立且可定制
• 除了更改光标之外不修改 DOM （但您可以禁用它）

源码地址：github

demo: https://interactjs.io/

4.react-dnd

「React DnD」 是一组 「React」 高阶组件，使用的时候只需要使用对应的 「API」 将目标组件进行包裹，即可实现拖动或接受拖动元素的功能。

源码：[github:」 https://github.com/react-dnd/react-dnd

「demo地址:」 http://react-dnd.github.io/react-dnd

5.Sortable

Sortable —是一个「JavaScript」库，用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。支持Meteor，AngularJS，React，Polymer，Vue，Ember，Knockout和任何CSS库，例如Bootstrap.

特征

• 支持触控设备和现代浏览器（包括 IE9）
• 可以从一个列表拖动到另一个列表或在同一个列表中
• 移动项目时的 CSS 动画
• 支持拖动句柄和可选文本（比 voidberg 的 html5sortable 更好）
• 智能自动滚动
• 高级交换检测
• 流畅的动画
• 多拖支持
• 支持 CSS 转换
• 使用原生 HTML5 拖放 API 构建

「github:」 https://github.com/SortableJS/Sortable

「demo地址:」 https://sortablejs.github.io/Sortable/

6.scriptaculous

scriptaculous是一组JavaScript库，用于增强网站的用户界面。它提供了一个视觉效果引擎，一个拖放库（包括可排序列表），几个控件（基于「Ajax」的动态下拉列表，原地编辑，滑块）等等。 网络正在发生变化。原本拥有 30 年历史的类似终端的技术正在逐渐让位于新的做事方式。AJAX 的强大功能允许进行丰富的用户交互，而不会出现困扰传统 Web 应用程序的麻烦。

「github:」 https://github.com/madrobby/scriptaculous

7.react-beautiful-dnd

漂亮,可移植性 列表拖拽库. 有很多库允许React中的拖放交互. 其中最值得注意的是惊人的「react-dnd」. 它提供了一套非常出色的拖放函数,这些函数在特定情况下非常适用疯狂地不一致的html5拖放功能. 「react-beautiful-dnd」 是为垂直和水平列表专门构建的更高级别的抽象. 在该功能的子集内「react-beautiful-dnd」提供强大,自然和美丽的拖放体验.

react-beautiful-dnd是专门为列表（垂直、水平、列表之间的移动、嵌套列表等）构建的更高级别的抽象。在该功能子集中react-beautiful-dnd提供了强大、自然和美观的拖放体验。但是，它不提供由react-dnd. 因此react-beautiful-dnd可能不适合您，具体取决于您的用例。

核心特性

• 物品美丽自然的移动
• 功能：强大的键盘和阅读器支持♿️
• 非常高效
• 干净而强大的api，轻松上手
• 与非常好的浏览器配合得很好
• 不拘一格的造型
• 单独创建额外的包装 dom 节点 - flexbox 和焦点管理友好！

「github:」 https://github.com/atlassian/react-beautiful-dnd

「demo地址:」 https://react-beautiful-dnd.netlify.app/

8.react-grid-dnd

网格式的拖拽排序库, 支持优雅的动画拖拽效果.

特征

• 支持在任意数量的列表之间拖动。
• 使用react-gesture-responder构建，可以更好地控制手势委托。
• 完全禁用放置目标或拖动
• 使用 react-spring 制作动画

「github:」 https://github.com/bmcmahen/react-grid-dnd

「demo地址:」 https://codesandbox.io/embed/gracious-wozniak-kj9w8

9.dnd kit

dndkit 可以让我们轻松构建拖放界面, 而无需在每次项目需要移动位置时都更新dom.

• 功能丰富： 可定制的碰撞检测算法、多个激活器、可拖动的叠加层、拖动手柄、自动滚动、约束等等。
• 为 React 构建： 暴露了诸如useDraggable和之类的钩子useDroppable。并且不会强迫您重新设计您的应用程序或创建额外的包装 DOM 节点。
• 支持广泛的用例： 列表、网格、多个容器、嵌套上下文、可变大小的项目、虚拟化列表、2D 游戏等。
• 零依赖和模块化： 库的核心缩小了大约 10kb，并且没有外部依赖。它是围绕内置的 React 状态管理和上下文构建的，这使库保持精简。
• 内置支持多种输入法： 指针、鼠标、触摸和键盘传感器。
• 完全可定制和可扩展： 定制每个细节：动画、过渡、行为、样式。构建您自己的传感器、碰撞检测算法、自定义键绑定等等。
• 可访问性： 键盘支持、合理的默认 aria 属性、可自定义的屏幕阅读器说明和内置的实时区域。
• 性能： 它在构建时考虑了性能，以支持丝般流畅的动画。
• 预设： 需要构建可排序的界面？签出@dnd-kit/sortable，它是建立在上面的一层薄薄的@dnd-kit/core。未来会有更多预设。

「github:」 https://github.com/clauderic/dnd-kit

「demo地址:」 https://dndkit.com/

可视化搭建解决方案

10.H5-dooring

H5-Dooring是一款功能强大、开源、免费的H5可视化页面配置解决方案，致力于提供简单、便捷、专业、可靠、无限制的H5落地页最佳实践集。技术栈主要是react，使用nodejs在后台开发。

「github:」 https://github.com/MrXujiang/h5-Dooring

「官网地址:」 http://h5.dooring.cn

11.Formily

在 React 中，在受控模式下，表单的整树渲染问题非常明显。特别是对于数据联动的场景，很容易导致页面卡顿，为了解决这个问题，「Formily」将每个表单字段的状态做了分布式管理，从而大大提升了表单操作性能。同时，「Formily」深度整合了 「JSON Schema」 协议，可以帮助您快速解决后端驱动表单渲染的问题。

• 可设计，您可以通过Form Builder以低成本快速开发表单。
• 高性能，独立管理的字段，而不是重新渲染整个树。
• 集成的 Alibaba Fusion 和 Ant Design 组件保证开箱即用。
• 为后端申请的 JSON 模式。JSchema 申请了 FrontEnd。两种范式可以相互转换。
• 副作用是独立管理的，使表单数据链接比以往任何时候都容易。
• 覆盖最复杂的表单布局用例。

「github:」 https://github.com/alibaba/formily

「官网地址:」 https://formilyjs.org/

12.V6.Dooring

一款开箱即用的可视化大屏解决方案. 支持接入任何后端语言, 支持扩展 + 二次开发.

「官网地址:」 http://h5.dooring.cn/docz/source-list/V6.Dooring/v6

gitHUb地址：https://github.com/MrXujiang/v6.dooring.public

「技术分享:」 http://lowcode.dooring.cn/product/detail?fid=_UKqJCZEBb

总结：

目前对于拖拽技术库有很多的技术库可以去引用实现，像sortable,react-dnd,react-beautiful-dnd,formily这些技术库都是各有各的特点，也有像v6.Dooring可视化这种拖拽技术库，至于哪个比较好用，还得看哪个技术比较符合的需求。至于比较流行的在react里react-dnd跟react-beautiful-dnd是比较流行的。当然也有其它的拖拽技术库没有完全列举出来。不过大劲相同，就列出常用流行的，范围涉及广点的。

（二）部分开源低代码开源平台使用技术库的情况

阿里低代码lowcode-engine

1.del(删除文件和目录)

2.execa(流程执行)

3.f2elint( Lint 工具)

4.gulp(流式构建系统)

5.husky(Git工具)

6.lerna(Lerna 是一个快速的现代构建系统，用于管理和发布来自同一存储库的多个 JavaScript/TypeScript 包。),

7.rimraf(节点深度删除模块)

amis

1.lerna

2.zrender(为 Apache ECharts 提供 2d 绘制的轻量级图形库。

3.echarts(交互式图表和数据可视化库)

开发框架采用的是react18

nocobase

1.prettier(代码格式化程序),

2.pretty-format(字符串化任何 JavaScript 值。)

3.@commitlint/cli(整理提交信息)

4.@commitlint/prompt-cli(提交提示)

mometa

1.jest(JS测试库)

2.commander(node.js 命令行程序)

3.npm-run-all(用于并行或顺序运行多个 npm 脚本的 CLI 工具。)

4.ts-jest(TS测试库)

5. concurrently(同时运行命令),

6.change-case(转换字符串)

7.rimraf

8. prettier

9.husky

10. jest,

11.@commitlint/cli

budibase

1.svelte(控制论增强的网络应用程序)

2.@rollup-plugin-replace(捆绑时替换文件中的字符串)

3.js-yaml(YAML 1.2 解析器和序列化器)

4.eslint(JS模式检查器)

5.@typescript-eslint/parser(一个 ESLint 解析器，它利用 TypeScript ESTree 允许 ESLint 对 TypeScript 源代码进行 lint。)

6.kill-port(杀死在给定端口上运行的进程), @rollup/plugin-json(将 .json 文件转换为 ES6 模块),

7.rimraf

8.prettier

9.lerna

10.husky

ToolJet

1.faker(生成大量虚假的上下文数据)

2.lint-staged(git 暂存的 Lint 文件)

3.path(Node.JS 路径模块)

4.babel-loader(用于 webpack 的 Babel 模块加载器)

5.@babel/plugin-proposal-class-properties(此插件转换静态类属性以及使用属性初始化器语法声明的属性),

6.@babel/preset-env(每个环境的 Babel 预设。),

7.@babel/core(Babel 编译器核心),

8.eslint

9.webpack(模块打包器)

10.lint-staged

（三）其它技术点

• 可逆计算
  • 可逆计算：下一代软件构造理论
  • 从可逆计算看声明式编程
• 161.精读《可视化搭建思考 - 富文本搭建》
• 面向 Model 编程的前端架构设计
• 流动的数据——使用 RxJS 构造复杂单页应用的数据逻辑
• 使用 React 写个简单的活动页面运营系统 - 设计篇
• 【电商】用可视化编辑，解构看起来非常炫酷的专题页面
• 如何搭建一个功能复杂的前端配置化框架(一)
• 可视化拖拽组件库一些技术要点原理分析
• 可视化拖拽组件库一些技术要点原理分析（二）
• 可视化拖拽组件库一些技术要点原理分析（三）
• 可视化拖拽组件库一些技术要点原理分析（四）
• 揭秘活字格最受程序员喜爱的三大功能背后的设计思路

（四）其它技术库

1.部署使用 Ngnix Http服务和反向代理服务

什么是Nginx？Nginx是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP这些邮件协议的代理服务器，高可靠性，支持高并发性，低系统资源消耗性。简单来说，当一台服务器的单位时间内的访问量越大时，服务器压力就越大，大到超过自身承受能力时，服务器就会崩溃。为了避免服务器崩溃，让用户有更好的体验，以可使用Ngnix负载均衡来分担服务器压力。

2.WebSocket 即时通讯

云程平台即时通讯采用WebSocket协议，它是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。简单来说，使用WebSocket使得客户端和服务器之间的数据交换变得更加简单，并且能有效节约服务器资源和带宽。WebSocket也为本系统在web端、app端、小程序端、H5端都实现了消息实时互通，实时推送功能。

3.代码管理

Prettier

prettier：是一个代码格式化工具，相比于 ESLint 中的代码格式规则，它提供了更少的选项，但是却更加专业。
几个工具之间的关系是：prettier 是最基础的，然后你需要用 eslint-config-prettier 去禁用掉所有和 prettier 冲突的规则，这样才可以使用 eslint-plugin-prettier 去以符合 eslint 规则的方式格式化代码并提示对应的修改建议。

配置 .prettierrc 文件

创建.prettierignore忽略文件

editorconfig 配置

文件代码规范

• 保持多人开发一致编码样式

husky代码管理工具

• 对git执行的一些命令，通过对应的hooks钩子触发，执行自定义的脚本程序

commitlint 代码提交检测

• 检测git commit 内容是否符合定义的规范

commitizen 代码提交内容标准化

• 提示定义输入标准的git commit 内容

Commitizen 是一个帮助我们编写规范 commit message 的工具

使用 ESLint 检测

• Js编码规范，检测并提示错误或警告信息

lint-staged

• 只检测git add . 中暂存区的文件，对过滤出的文件执行脚本

Stylelint 配置

负责样式文件代码质量检查，规则列表详见官网。

• 检查我们项目中的css文件

4.解决不同浏览器样式兼容问题

postcss

PostCSS（后预处理器）是一种使用 JS 插件转换样式的工具。这些插件可以 lint 你的 CSS，支持变量和 mixins，转换未来的 CSS 语法，内联图像等。

作用：用于自动将像素单元生成rem单位

postcss-px-to-viewport

就是这样一款优秀、高效、简洁的解决方案，它能完美解决上面的三个痛点，高效的将代码中px单位转为rm、rem、vw等视口单位，一份配置文件完美解决适配问题。

5.可视化图表选型

相比于传统手工定制的图表与数据仪表盘，图表可视化制作平台的出现，可以打破抵消的定制开发, 数据分散的问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控，动态一目了然。
可视化图表库技术选型，调研的已知主流可视化库有:

echart

• echart 一个基于 JavaScript 的老牌开源可视化图表库

D3.js

• D3.js 一个数据驱动的可视化库, 可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作

antv

• antv 包含一套完整的可视化组件体系

Chart

• Chart.js 基于 HTML5 的 简单易用的 JavaScript 图表库

metrics-graphic

• metrics-graphics 建立在D3之上的可视化库, 针对可视化和布置时间序列数据进行了优化

C3.js

• C3.js 通过包装构造整个图表所需的代码，使生成基于D3的图表变得容易

我们使用以上任何一个库都可以实现我们的可视化大屏搭建的需求, 各位可以根据喜好来选择.

6. axios 用于请求数据

axios是基于promise用于浏览器与node.js的http服务端的一种js。相当于连接桥，此桥是人工智能的，可以自定义浏览器与服务端请求与响应的方式。1.支持浏览器与node.js，2支持promise，3能够拦截请求和响应，4能转换请求与响应数据，5能取消请求，6自动转换Json格式，7浏览器端支持CSRF(跨域请求)

7.UI组件库

• Element UI
• vuetify
• Ant Design
• Bottstrap
• layui
• Vant UI
• Framework7
• WEUI

8.动画库

• Halogen使用 React 的加载动画集合
• react-move 漂亮的，数据驱动的 React 动画库
• react-spring 一个基于弹簧物理学的动画库
• react-text-loop-next 文字轮播动画

9.模块管理器

• Bower – A package manager for the web
• Browserify
• Component
• Duo
• RequireJS
• Sea.js

10.可视化编辑器

• mitu
• watermark-pro

11.编辑器相关

• braft-editor 富文本编辑器
• mitu 图片编辑器
• h5-dooring H5 页面编辑器
• GGEditor 可视化图编辑器
• react-codemirror2 代码编辑器
• jsoneditor json 编辑器

12.css预处理器

• Less – Less is More , Than CSS
• Sass – Syntactically Awesome Style Sheets
• Stylus – Expressive, dynamic, robust CSS

13.构建工具

• Yeoman – a set of tools for automating development workflow
• gulp – The streaming build system
• grunt – the JavaScript Task Runner
• F.I.S – 前端集成解决方案
• webpack
• vite

14.地图相关

• google-map-react 谷歌地图插件
• react-amap 高德地图插件
• react-baidu-map 百度地图

15.dotenv(用来配置环境变量)

npm 官方文档的这样介绍 dotenv: Dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中。

16.use-immer

Immer 是保持更新处理程序简洁的好方法，特别是如果您的状态中有嵌套，并且复制对象会导致重复代码。

17.其它常用库

Lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

Moment

JavaScript 日期处理类库

html2canvas

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建

babel

Babel是Js的编译器。其本质就是一种源码到源码之间的转化编译器,拥有众多模块可用于不同形式的静态分析。其作用就是用于js语法的转化,为了去兼容更低更老的环境,因为一些新的js语法对于低版本的一些环境不能兼容.

其它事项

关于低代码排列方式，属于分列排列，还是自由组合排列，分列排列相对于比较简单点。组件的拖拽是采用定位布局，就是说根据它的坐标位置来定位top,left来定位还是其它的，是否采用于二开项目，还是重新排布。

(五)总结：

对于前端方面建议采用：

开发语言：ts(推)，js

css预处理器:less(推),sass（对于node版本要求一定的兼容性）,css

框架：vue3.0,react（推）

组件库：ElementUI(vue),Ant Design（react）

构建工具：rollup，vite,webpack （推） （vite启动确实快很多，但webpack稳定）

数据请求：axios(进行二次封装符合后台的数据返回格式)（必须）

代码管理：prettier+eslint+husky+commitlint+lint-staged+commitizen +Stylelint+editorconfig （规范代码的规范）

解决不同浏览器样式兼容问题：postcss工具 （兼容问题）

适配问题：思想上：（采用以媒体查询为基底，flex为区间，超出就隐藏），借助工具：postcss-px-to-viewport,px，rem之间转换 （适配问题）

拖拽技术库建议统一采用： react-beautiful-dnd（可以进一步讨论）

其它技术库按需引用即可。

组件是否需要再次封装还是直接引用组件库的。

至于采用分列排列，还是自由组合排列。看具体需求。

组件缩放，旋转，移动，吸附问题，动画，事件的交互，问题，具体看需求。

发布：至于到底给谁用，怎么用，最后输出什么，还是得确定需求。

webpack跟vite,如果是采用vue3.0配合用vite是不错的选择，至于配合react暂时先使用webpack,webpack相对于来说比较稳定成熟了。基本问题都能解决。
技术选择往往不是最新，而是最稳定，技术比较成熟的，社区比较完善的。