代码可视化的自动化之路

jopen 7年前

        英文原文:The road to automatic code visualization

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

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

        工具

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

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

        偏题

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

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

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