代码可视化的自动化之路

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

 

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

 

工具

 

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

 

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

 

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

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

 

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

 

实际上所有这些工具在做的，都是把一个想法、用代码或图表表达的想法，转化成一个或多个不同种类的接口。编程语言把想法（以文本形式）转化成不同的接口，可以是 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 个等等。

 

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

 

偏题

 

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

 

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

 

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

 

• 注1：双端队列（deque，全名 double-ended queue）是一种具有队列和栈性质的数据结构。双端队列中的元素可以从两端弹出，插入和删除操作限定在队列的两边进行（见*）。