可视化编程真的有那么糟糕？
【CSDN 编者按】和传统的编程方式相比，可视化编程相对来说更为简单，只需要通过简单的操作，就可以设计出程序界面，不过，诸多开发者认为，可视化编程大大降低了代码的自由程度和可控性，还不如弃之不用。但整体而言，可视化编程真的有那么糟糕吗？
作者 | Anton Livaja
译者 | 弯月
责编 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下为译文：
我想告诉你，如果使用恰当，可视化编程和是图解推理是一个非常强大的工具集。也就是说，只有当可视化编程扎根于数学和计算机科学并建立坚实的基础，才能发挥良好的作用。为了降低编程的难度，我们已经对我们的代码进行了抽象，而图表等可视化的方法只是实现抽象的另一种方式。
通过对低级代码的抽象，生成更容易推理的东西。摘自Bob Coecke的著作《Picturing Quantum Processes》。
当前可视化编程工具的缺点
在你头也不回地离开之前，请听我一言。考虑到大多数现有的工具及其使用方式，人们不喜欢可视化编程，轻易将可视化编程拒之门外都是完全可以理解的。
首先，拖放的工具就是让我个人感到沮丧的主要原因，而且似乎也是给可视化编程招来骂名的原因。例如，在构建网站的时候，我们用拖放的方式代替 Node.js 技术，那么就会严重阻碍程序员的工作流程。而且，他们习以为常的工具也无法正常使用。
此外，可视化编程的方式还大大降低了编程的自由程度和可控性。这是可视化编程失败的典型原因。还有很多例子，比如笨拙的拖放界面，自称可以简化编程，实际上却让编程越来越复杂，并最终失败。发生这种情况是由于复杂度缺乏正确的结构而无法管理。
比较下优缺点就会发现，可视化编程并不乐观，它构造的不良抽象虽然消除了一些低级的复杂性，却让大多数程序员都付出了不愿承担的惨重代价。在某些情况下，对于没有编程经验的人来说，拖放工具可能是一个很好的解决方案，但专业人士的感觉是：“这是什么鬼？”如果你是其中之一，那么我劝你不要看到“可视化编程”的标题就转头离开。
什么是图解推理
图解推理就是对特定的上下文中不必要的细节进行抽象，以便专注于你真正关心的细节，而且常常可以让人们很容易形成直觉。这可以提高某个人以特定方式推理事物的能力。视频的编码就是一个例子。我们不会观看一堆代表视频的0和1——没人会做那种傻事。
视频的二进制编码与视觉表示。摘自Bob Coecke的著作《Picturing Quantum Processes》。
关键在于你要意识到“可视化编程”并不一定意味着“拖放”。正确的可视化编程应当基于图解推理与正确的数学形式，从而形成一个非常强大的程序员可以利用的工具包。当我说“图解推理”时，我特指的是状态机、Petri网、字符串图和范畴论，尽管还有其他定义良好的数学形式可以使用。有关这些概念的介绍超出了本文的范畴，但是我在最后列举了一些你可以参考的资源。
更多示例
我不打算在这里解释背后的数学原理，但我可以通过几个强有力的例子，来说明如何通过视觉的方法隐藏低级的细节，并揭露一些对观察者而言通常不完全透明的深入了解。我最喜欢的一个例子是Bob Coecke的著作《Picturing Quantum Processes》，他向读者展示了在描述量子过程的时候，如果面对满纸晦涩难懂的字符，我们无法凭直觉理解其中的内容，而且还需要大量的前提知识才能理解；但我们可以通过几张图表用“正式的方式”（数学中正确定义的方式）来描述。看看下面的这张图。
描述量子过程的低级语言与高级语言（视觉）。摘自Bob Coecke的著作《Picturing Quantum Processes》。
这个例子与编程没有直接的联系，所以让我们再来看一个例子。需要注意的是，下述用JavaScript编写的斐波那契数列与其后的图形所表示的内容相同（我们需要理解一些语义图才能看懂）。
function fibonacci(num){
var a = 1, b = 0, temp;
while (num >= 0){
temp = a;
a = a + b;
b = temp;
num--;
}
return b;
}
用信号流图表示的斐波那契数列。摘自Pawel Sobocinski的博文《 Graphical Linear Algebra》（https://graphicallinearalgebra.net/2016/09/07/31-fibonacci-and-sustainable-rabbit-farming/）。
下面的示例是用可视化的方法对流程进行建模的实际应用。以ATM为例，因为我是区块链技术的粉丝，所以这里用比特币ATM为例。从技术角度来看，这是一台经过精心设计的机器，必须避免非法状态并完成应有的功能。非法的状态包括货币的双花问题，向用户发送错误数量的加密货币，或者没有向用户发送加密货币，等等。
至于如何利用你现有的知识构建这类的系统，并提供一种图解的方式，这个难题就留给你来解决吧。我们以比特币换普通货币为例。下面是一个经过简化后的版本，但可以很好地演示整个过程。
ATM将普通货币转换为比特币的过程。
上图是一个简单的Petri网。那个走来走去的小黑点代表Petri网当前状态的“令牌”。如你所见，这不仅仅是一个图表，它还可以通过“触发转换”（小矩形代表转换）捕获不同的状态。有趣的是，由于Petri网具有良好的结构，因此可以将上图编译成低级语言，而且还可以像与多个微服务或模块交互的程序一样运行。这正是我们的Statebox所能完成的功能。现在，就以当前这个为运行比特币ATM的软件体系结构而建立的模型为例，我们来对比一下你设计流程时采用的方法，与利用可视化的方法来建模的好处。
使用可视化方法建模与生俱来的优势
非技术人员可以更轻松地通过有意义的方式为流程建模做出贡献。
可以减少流程上的错误。
人们可以访问应用于Petri网的数学工具，例如检测死锁与防止非法状态的状态空间分析。
更容易确定所有边界情况，并指出错误，因为图解推理有助于我们对低级信息进行抽象（例如，如果用英语的平铺直叙或条件语句表达与上图等价的内容，那么恐怕远不如视觉表现形式容易理解）。
可以根据流程的不同状态构建用户界面，如此一来便更加易于管理系统的状态与用户界面显示内容一致的复杂性，而且与响应式编程有良好的协同效应。
虽然Petri网之类的结构不一定是视觉建模事物的专有特性，但有了Petri这种结构，就很容易管理复杂性，因为这样的结构内部嵌入了大量信息（例如合法的“下一个”状态集合）。因此，这些工作都无需留到代码中解决了，而且通常都可以简化API和中间件。
考虑不同的“级别”
我们需要记住可视化编程不一定要实现低级逻辑，例如与第三方服务，API的交互等。在Statebox，我们认为有效的使用可视化编程的方法是，在更高层次上对事物进行建模（更高层次在这里可能有点误导，因为它可以指代高级系统架构或低级的流程，例如上述ATM的运行流程）。通过Petri网的强大功能，将可视化编程与范畴论结合起来，对其行为施加额外的限制，我们就可以构建一个定义良好的语言来定义流程或协议。我们的工具包（虽然目前正在开发中，但已经在现实世界的几个用例中得到了使用，很快我们就会公布）的设计旨在利用这些经过分类的Petri网的流程进行可视化建模。此外，它还提供了一个引擎，可以实现在网络或流程中从一个状态转换到另一个状态。这本身就是一个强大的工具，但我们正在创建一个完整的开源生态系统，并围绕这种编程方法创建工具。
到目前为止Statebox系统的功能包括用于Petri网的字符串图编辑工具，基于事件源的数据存储方案，分类数据模式迁移，权限系统中的公私密钥，merkle树等区块链和用于数据完整性的散列，相对简单的函子映射（集成）到其他系统云服务，区块链，语言等），强类型（我们Petri网风格中的位置和转换都有类型），自动API和表单生成，根据系统中不同角色的元数据构建的结构化数据，终止担保以及通过应用状态空间分析获得的其他见解，经过简化的正式流程验证以及开箱即用的正式验证组件。此外，我们正在开发一种基于多项式的类型构造语言，实现在不同语言之间进行简单的“类型转换”。
以下资源可以帮助你了解Petri网，范畴论和字符串图表。
资源
以下资源出自我们的各位顾问，他们都是各自领域的世界知名专家。
Pawel Sobocinski的博文《graphical linear algebra 》（https://graphicallinearalgebra.net/）：
我建议你从第一部分开始阅读，可以跳过你熟悉的章节。Pawel的工作非常出色，他能够让一个没有任何视觉代数与类别理论的基础知识的人理解这两者，并通过图表与一段时间内建立的语义复杂性让人明白两者在直观方式上的关系。
Bob Coecke的著作《Picturing Quantum Processes 》：这是一本关于使用视觉方法来理解量子理论的伟大之作。
原文：https://blog.statebox.org/why-visual-programming-doesnt-suck-2c1ece2a414e
本文为 CSDN 翻译，如需转载，请注明来源出处。
热 文 推 荐
雷军终于想明白了
GitHub 疑被审查？著名“换脸”开源项目遭限制访问
谷歌微软 IBM 激战云端，亚马逊地位恐将不保？
故宫“瘫痪”程序员怎么办？
微服务、Kubernetes和无服务器之后，即将发生的……
☞ 打打游戏就能在北京二环买套房？区块链大神说：你能靠VR刷怪升级还房贷！
帅气中国小哥出“大招”，程序员跳槽面试刷题必备
☞ 35岁程序员 节后第一天被辞退！
print_r('点个好看吧！');
var_dump('点个好看吧！');
NSLog(@"点个好看吧！");
System.out.println("点个好看吧！");
console.log("点个好看吧！");
print("点个好看吧！");
printf("点个好看吧！\n");
cout << "点个好看吧！" << endl;
Console.WriteLine("点个好看吧！");
fmt.Println("点个好看吧！");
Response.Write("点个好看吧！");
alert("点个好看吧！")
echo "点个好看吧！"
点击“阅读原文”，打开 CSDN App 阅读更贴心！
喜欢就点击“好看”吧！