精选图形化编程要怎么做

敢敢のwings

发布时间 2024.04.16阅读数 1603 评论数 0

0. 简介

Scratch其实应该算得上最早做图形化编程的工程了。Scratch 是麻省理工学院的“终身幼儿园团队”在 2007 年 [5]发布的一种图形化编程工具，主要面对全球青少年开放，是图形化编程工具当中最广为人知的一种，所有人都可以在软件中创作自己的程序。而我们就在想是否能做一些工作，让一些复杂的指令集能够通过拖动变成可以被识别的功能呢。我其实在上大学时候就想做类似这样的一个东西。只是一直没有时间，这里作者首先发现了js君对于Scratch3.0的介绍和使用，也首先了解到如何对Scratch完成自定义组件的设计与编写。这部分主要的核心就在于JS代码的编写。又比如PythonEditor，这一个就可以用于python编程相关的操作。以及OpenBlock是开放原子基金会运营可以对各种开发板二次开发的系统。

1. 逻辑编排实现方式的选择

一直以来。从流程图层面，以线性的思维去思考，认为逻辑编排的意义并不大。因为，经过这么多年发展，事实证明代码才是表达逻辑的最佳方式，没有之一。用流程图去表达代码，最终只能是老板、客户的丰满理想与程序员骨感现实的对决。

直到看到Mybricks项目交互部分的实现方式，才打开了思路。类似unreal蓝图数据流驱动的实现方式，其实大有可为。

这种方式的意义是，跳出循环、if等这些底层的代码细节，以数据流转的方式思考业务逻辑，从而把业务逻辑抽象为可复用的组件，每个组件对数据进行相应处理或者根据数据执行相应动作，从而达到复用业务逻辑的目的。并且，节点的粒度可大可小，非常灵活。

具体实现方式是，把每个逻辑组件看成一个黑盒，通过入端口流入数据，出端口流出变换后的数据：

如果用流程图，上面这个编排，会被显示成如下样子：

两个比较，就会发现，流程图的思考方式，会把人引入条件细节，其实就是试图用不擅长代码的图形来描述代码。是纯线性的，没有回调，也就无法实现类似js promise的异步。

而数据流驱动的逻辑编排，可以把人从细节中解放出来，用模块化的思考方式去设计业务逻辑，更方便把业务逻辑拆成一个个可复用的单元。

如果以程序员的角度来比喻，流程图相当于一段代码脚本，是面向过程的；数据流驱动的逻辑编排像是几个类交互完成一个功能，更有点面向对象的感觉。

朋友，如果是让你选，你喜欢哪种方式？欢迎留言讨论。

另外还有一种类似stratch的实现方式：

感觉这种纯粹为了可视化而可视化，只适合小孩子做玩具。会写代码的人不愿意用，太低效了。不会写代码的人，需要理解代码才会用。适合场景是用直观的方式介绍什么是代码逻辑，就是说只适合相对比较低智力水平的编程教学，比如幼儿园、小学等。商业应用，就免了。

2. 低代码拖拽

对于低代码的拖拽场景无非就是考虑几点，一个是基础的拖拽功能，另外一个就是容器内组件的互相拖拽和嵌套拖拽。基于这些场景分析个人还是比较推荐使用 dnd-kit/core 它来做为拖拽引擎的实现选型的，除了基础的拖拽的功能外，dnd-kit 还提供了许多可自定义的组件和钩子，可以满足不同的拖拽需求，在 React、Vue、Angular、Svelte 等热门的开发框架 & 库下都有对应的实现，对跨平台的支持也非常不错。

除此之外 dnd-kit 的性能也有相当程度的保障，尤其是在 DOM元素过多的时候能有效减缓操作卡顿和布局抖动。