代码可视化的自动化之路

本文是翻译,版权归原作者所有


你知道,当你忙于一个复杂算法时,不得不返工一百万次,因为你没有正确地掌握细节?或者在你读某人的代码时,你不能确定它在做什么?此时,我们希望拥有代码可视化(code visualization)工具,因为这会让编程生活如此简化。

本文,我将讨论一些现有的用于代码可视化的工具及其缺点,然后尽量总结它们背后的想法。为了创造得体的代码可视化工具、以及如何达到这个程度,接着我会分享必备条件,我将给出应该采取的最初几步。

工具

有很多不同的、显示代码可视化有用的情况。理解复杂的算法、理解其他人的函数,或在一个总体的不同范围下,理解一个新的代码库、或类、或函数集合。对于某些情况,可视化已经存在了。对于项目或代码级别的范围,有UML,各种图表。在算法的范围,有些网站企图可视化一部分最通用的算法。这些工具是伟大的,但是它们有一个大问题,使用它们要花费很长时间。在严峻的时间下,我们只有两周来开发下一个Facebook,你没有时间画复杂的UML图。第二个问题,即使通用算法可能有可视化了,而自定义算法可能从来不会有。

也有一些工具和编程语言采用了不同的方式,你编程一部分,很快就能看到交互、或至少你正在做的可视化的结果。我在讨论dat.GUI,你知道的,你在很多demo里看到过黑色和彩色控制面板吗?你能够看到我的优雅的文本生成器示例(不要在较慢的设备上打开)。另一个例子是Gooey,把Python命令行程序自动生成GUI,无需从技术上理解的、用户友好性。我过去在讨论的一种编程语言是JavaScript,从JavaScript刚刚出现的时候,它就与一种名叫HTML的接口结合在一起了。

允许你可视化代码(非自动地)的第一套工具,允许你把现有代码/配置转化成接口(自动地)的第二套工具。问题在于,我们是否能够自动产生接口,包括输入和输出。可视化只是输出。那么,我们为什么没有尽量可视化代码以使其易于理解的工具?听说过一个对象图表吗?它们是可视化了当前程序或程序子集的状态的图表。具有三种“水果”类型的对象的列表看起来是这样的:

Tekening-zonder-titel-300x155

如果能够使用这样的可视化来调试,是不是很好呀?

我对接口的定义是,它有输入、输出或二者都有,几乎任何东西都能用一到两种方式定义为接口,石头、键盘、乐器、人类……

实际上所有这些工具在做的,都是把一个想法、用代码或图表表达的想法,转化成一个或多个不同种类的接口。编程语言把想法(以文本形式)转化成不同的接口,可以是HMTL、可以是传统的GUI、命令行应用程序或app。UML把想法转化成优雅的可视化概括。dat.GUI用HTML把配置代码转化成清晰的配置GUI。Gooey把命令行程序转化成传统的GUI。

它们都使用一个接口,然后转化成一个或多个不同的接口。我乐于给出更多的例子,只是本文篇幅会过长。如果你对有趣的接口转化的更多例子感兴趣,看看Slava Akhmechet关于lisp的文章,它讨论了把任何编程语言转化为另一种语言的通用接口。或者Philip C Monk的博文,他讨论了树、图像编程(他有demo)等等。

想法

好吧,下一步,我们明白了代码可视化的一些工具和方法。代码可视化是把代码或其子集可视化的过程。这可以在高等级(代码库或项目),中等级(函数文件、类、庞大的类)或低等级(函数级别,算法)。每个等级需要不同的分析代码的方法和不同的细节等级。

在最低的等级,我们需要的是至少可视化最基本的数据类型的方法,最常见的是布尔值、字符串、数字、list和对象(或字典、hashmap、任何你调用的东东)。还有,一种获取可视化所需数据的方法。但是如果我们这样做了,我们仍然面临现有工具同样的问题。然而,通用算法可能已经有可视化了,自定义算法可能从来不存在。数据类型同样如此,而list的可视化或许容易,当一个list包含数千个item,或你无法使用内置list,比如双端队列(栈),链表时,很快就变得复杂了。在有对象时,甚至更难,因为它们很快变得比程序的其它任何地方都要复杂。

然而不是不可能,弄清楚程序员在用哪种数据类型会是极端困难的(特别是没有自定义类型的JavaScript之类的语言)。这就是为什么我们需要在两个地方交互的工具。第一个是在程序运行(程序配置)之前,比如定义你在使用的数据类型,第二种就是在程序运行的时候,缩放、padding、隐藏列表items中的10000个等等。

限于篇幅,方便交流起见,我忽略了中等级和高等级的细节。

偏题

本文原本是关于代码可视化的,现在变成了随笔,是关于:每样事物都是一些事物的接口、电子信号是大脑和手之间的接口、键盘是手和电脑之间的接口、文本编辑器是键盘和编程语言之间的接口、编程语言是想法和其它更多想法之间的抽象接口!我喜爱探索接口的想法,更普遍地推广,因此我们可以用不同的方式使用它们。

为什么我认为它是有用的,因为它不仅仅是有用的思想,而是一种不同的方法,产生了不同的解决方案、思路等等,而且它可以被用在优化以及概念或现有想法的产生上。

我希望本文能有一点点意义,激发人们随后用不同的方式思考这个世界,我也打算写更多的关于接口、不同种类的接口、接口之间的交互方面的文章。

译文:代码可视化的自动化之路 》| 腊八粥