论文部分内容阅读
摘要：软件可视化是可视化分析的一个特殊应用领域，涉及图形工具和表示所介导的软件交互分析。由于有限的成熟度，软件可视化在业内并没有被广泛地使用，特别是前端JavaScript代码的可视化。本文将重点从可视化任务、可视化表示方法以及可视化工具三个方面对现有的软件可视化技术进行研究综述。
关键词：静态代码分析；视觉隐喻；可视化工具
中图分类号：TP311 文献标识码：A
文章编号：1009-3044（2019）08-0219-02
1 引言
软件维护在近几年变得越来越困难，研究表明，高达80%的软件生命周期成本与维护有关，其中40%的维护预算用于了解源代码。作为可视化分析论的一个分支，软件可视化允许用户综合并理解有关软件模块的内部组织和它们之间相互作用的大量信息，这些信息對于进行软件维护等高成本操作至关重要。
软件可视化（Software Visualization）可以被定义为“利用各种形式的图像来提供洞察力和理解，并降低正在考虑的现有软件系统的复杂性”。软件可视化为开发和维护提供巨大的优势，但是研究人员发现很多软件可视化的研究与开发人员的需求脱节；因此Jonathan I. Maletic [1]等人提出了软件可视化的分类标准，以支持软件开发过程中的各种任务，并提出了五个维度来定义软件可视化，即任务、受众、数据源、表示方法和可视化工具。
本文将重点介绍从可视化任务、可视化表示方法以及可视化工具三个方面来介绍软件可视化技术的研究现状及发展动态。
2 可视化任务
根据Xu[2]等人的研究，可以得出目前静态代码分析涉及的任务包括控制流分析、代码映射、依赖关系、软件架构和代码度量等。
其中，控制流分析可视化用来述源代码程序的序列，以帮助开发人员了解代码的秩序。该分析的是为了解决因编程语言中的函数指针存在而使得绘制边缘时出现的问题。代码映射可视化映射代码段间的关系，最近的研究倾向于此可视化任务。Visual Studio供代码映射的可视化功能，其可视化界面通常出现在代码编辑器旁边，工程师们可以专注于自己的任务，同时了解代码的工作空间。依赖关系可视化是软件可视化研究中非常重要的部分。由于软件规模愈来愈大，组件内部的交互关系越发复杂。依赖关系的可视化为工程师们展示了整个解决方案的依赖总览，从而不需要查看所有的文件和源代码。在代码可视化领域里的软件架构侧重于代码的层次结构，即包中包含子包，类中申明方法和属性的结构。此可视化也是软件可视化的核心问题，可以确保代码的编写与设计的一致性。典型的静态代码分析的度量指标包括代码的规模，组件的数量和复杂度。例如，通过高亮条件语句区分常规代码可以降低复杂度获得更好的理解； 同时不同颜色可以指示代码的嵌套级别。
3 可视化表示方法
可视化的主要挑战是使用视觉隐喻找到可视化任务到图形表示的有效映射。现在软件可视化从二维图形到三维表示以及最近的虚拟环境以及取得了进展。
3.1 二维图形
二维软件可视化技术通常涉及由大量节点和弧组成的图形或树状表示。一个复杂的软件系统可能包括成千上万个这样的节点和弧。为了便于用户进行概念化和理解，这种系统的可视化以不同的视图或不同的窗口呈现图形的片断，以便用户可以专注于他所期望的细节层面。
树形图（treemap visualization）是一个将分层数据显示在嵌套矩形里的填充技术，单元框表示方法，组合框表示类，所得到的可视化显示层次结构中的所有元素，元素的从属路径隐含在嵌套结构中。
锥树（cone tree）模型将层次结构在三维空间中均衡排列。层次结构的顶部放置在可视化空间的顶端，每个锥形的顶点表示该层结构的顶点，子节点均匀排列在锥形的底部。底的直径随着层次结构的深入逐渐减小，以保证最底层结构能在可视化空间中有效表示。
Voronoi树形图可以用于跟踪软件质量属性的值随着软件从一个版本向下一个版本的演变。使用缩放的希尔伯特曲线将Voronoi站点放置在平面上，从而实现站点最终位置的可预测的第一近似值，然后保持站点沿着该曲线放置的顺序，以便与相同软件的修订相比较系统。
基于双曲几何的可视化（hyperbolic tree）通过规范的算法将层次关系显示在双曲平面上，再将双曲平面映射到显示区域中。所选择的映射方式提供了一种鱼眼变形来支持focus和content之间的平滑过渡。该技术已经有成熟的产品。
依赖结构矩阵（dependency structure matrix）可以解决混乱的问题，根据不同的导航级别展示组件之间，这些组件可以是最基本的类级别、包或文件级别。研究人员还尝试了不同的布局和过滤技术解决混乱的问题。
度量视图（metric view）就是在UML图上显示度量值；还有一种模型是areas of interes，其应用一个布局算法将相似属性的实体放在一起，用不同的颜色标记度量。
3.2 三维表示
二维可视化可能会导致在平面上混杂过多的信息。 通过增加一个额外的空间维度，可以为可视化设计人员提供更多可能性来描述程序或系统的某些方面。
Richard Wettel和MicheleLanza [3]提出了一个基于城市隐喻的三维软件可视化方法，其城市景观图（cityscape view）中城市代表包，建筑代表类，并称之为代码城市。使用城市隐喻建立混合信息可视化系统，允许用户选择不同的时间段并权衡不同的组件。同时，Simon Scarle和Neil Walkinshaw[4]提出了一个名为PhysVis的软件可视化系统，其中软件度量可以变化地映射到物理模型的参数并通过粒子系统显示，软件元素可以被赋予各种物理属性，例如质量和重力，用户可以在发生相互作用的时候探索它们。同理的还有太阳系（solar system）、岛屿（island）等模型。3D模型很好地避免了混乱的问题，但也存在对象遮挡，性能等问题。 3.3 虚拟环境
虚拟环境使用户能够与熟悉的东西进行交互， 其中“世界”的概念可以映射到面向对象代码或软件系统中的“实体”或“组件”。使用虚拟环境代表面向对象软件系统的软件可视化系统的例子是ImsoVision [5] ，该系统主要支持C 代码，其主要特点是把面向对象代码的静态属性映射到虚拟环境中的对象。 ImsoVision使用平台，球体，水平和垂直列等几何三维形状作为C 代码特征的视觉元素。
4 可视化工具
软件可视化工具有三种常见的形式，一种是作为插件集成到IDE中，一种是作为一个独立的桌面软件，还有一种就是在线工具，即Web应用。
随着Web技术的发展，在Node.js的推動下，不仅衍生了大量的Web Server应用，还诞生以一些优秀的Web端应用开源框架。其中，Electron和Meteor等工具成了较为主流的使用JavaScript开发的框架。同时，随着组件化开发的流向，一些优秀的前端框架也被广泛地使用，如Facebook的React框架，Vue.js和由Google维护的AngularJS2。
在Web应用领域中，已经有很多进行图表展示的成熟的解决方案，如D3.js、G2、Highcharts和Echarts等JavaScript库，这些可视化库的实现方式和成熟度都各有差异。
同时，现在也有很多服务于JavaScript源代码分析的开源库，如Babel作为语法转换器支持最新版本的JavaScript，Esprima提供从JavaScript源代码中抽取出抽象语法书（AST）的功能，Lint类库支持检查校验项目中的错误便麻烦是或反模式，JSHint可以帮助检测代码中的错误和潜在的问题。
现有的开源JavaScript可视化工具大多为度量指标的可视化如plato[6]，包括代码行数、可维护性、圈复杂度等。同时，Webpack作为模组打包器可以将项目的文件结构以树形图展示出来，但是只停留在文件级别。
5 结束语
软件可视化（SV）领域主要关注程序的分析和开发；软件可视化技术被广泛应用于软件维护，逆向工程和重新设计等领域。软件可视化技术涉及使用交互式计算机图形，动画，电影摄影和视觉艺术来帮助理解计算机程序。在软件理解维护中存在两种类型的技术。分析工具从软件中提取事实，例如语法树，依赖关系图和执行信息。事实可以被细化为质量指标，例如代码可读性，复杂性，内聚性和耦合性，或更高级别的工件（如设计模式或代码异味）。可视化工具使用诸如数据注释图形，图表和树形图和度量标注代码等技术来展示这些事实。本文综述了软件可视化技术的研究现状，为今后研究前端JavaScript代码的可视化提供了研究基础。
参考文献：
[1] Maletic J I， Marcus A， Collard M L. A Task Oriented View of Software Visualization[C]// International Workshop on Visualizing Software for Understanding and Analysis， 2002. Proceedings. IEEE， 2002：32-40.
[2] Xu Y， Liu Y， Zheng J. To Enlighten Hidden Facts in The Code： A Review of Software Visualization Metaphors[C]// The， International Conference on Software Engineering and Knowledge Engineering. 2015：294-297.
[3] Wettel R， Lanza M. Visualizing Software Systems as Cities[C]// IEEE International Workshop on Visualizing Software for Understanding and Analysis. IEEE， 2007：92-99.
[4] Scarle S，Walkinshaw N. Visualising software as a particle system[C]// Software Visualization. IEEE， 2015：66-75.
[5] Maletic JI，Leigh J，Marcus A，Dunlap G（2001）Visualizing object-oriented software in virtual reality.In：Proceedings of the 9th international workshop on program comprehension（IWPC’01）， Toronto， pp 26–35.
[6] es-analysis/plato. https：//github.com/es-analysis/plato.
【通联编辑：梁书】
关键词：静态代码分析；视觉隐喻；可视化工具
中图分类号：TP311 文献标识码：A
文章编号：1009-3044（2019）08-0219-02
1 引言
软件维护在近几年变得越来越困难，研究表明，高达80%的软件生命周期成本与维护有关，其中40%的维护预算用于了解源代码。作为可视化分析论的一个分支，软件可视化允许用户综合并理解有关软件模块的内部组织和它们之间相互作用的大量信息，这些信息對于进行软件维护等高成本操作至关重要。
软件可视化（Software Visualization）可以被定义为“利用各种形式的图像来提供洞察力和理解，并降低正在考虑的现有软件系统的复杂性”。软件可视化为开发和维护提供巨大的优势，但是研究人员发现很多软件可视化的研究与开发人员的需求脱节；因此Jonathan I. Maletic [1]等人提出了软件可视化的分类标准，以支持软件开发过程中的各种任务，并提出了五个维度来定义软件可视化，即任务、受众、数据源、表示方法和可视化工具。
本文将重点介绍从可视化任务、可视化表示方法以及可视化工具三个方面来介绍软件可视化技术的研究现状及发展动态。
2 可视化任务
根据Xu[2]等人的研究，可以得出目前静态代码分析涉及的任务包括控制流分析、代码映射、依赖关系、软件架构和代码度量等。
其中，控制流分析可视化用来述源代码程序的序列，以帮助开发人员了解代码的秩序。该分析的是为了解决因编程语言中的函数指针存在而使得绘制边缘时出现的问题。代码映射可视化映射代码段间的关系，最近的研究倾向于此可视化任务。Visual Studio供代码映射的可视化功能，其可视化界面通常出现在代码编辑器旁边，工程师们可以专注于自己的任务，同时了解代码的工作空间。依赖关系可视化是软件可视化研究中非常重要的部分。由于软件规模愈来愈大，组件内部的交互关系越发复杂。依赖关系的可视化为工程师们展示了整个解决方案的依赖总览，从而不需要查看所有的文件和源代码。在代码可视化领域里的软件架构侧重于代码的层次结构，即包中包含子包，类中申明方法和属性的结构。此可视化也是软件可视化的核心问题，可以确保代码的编写与设计的一致性。典型的静态代码分析的度量指标包括代码的规模，组件的数量和复杂度。例如，通过高亮条件语句区分常规代码可以降低复杂度获得更好的理解； 同时不同颜色可以指示代码的嵌套级别。
3 可视化表示方法
可视化的主要挑战是使用视觉隐喻找到可视化任务到图形表示的有效映射。现在软件可视化从二维图形到三维表示以及最近的虚拟环境以及取得了进展。
3.1 二维图形
二维软件可视化技术通常涉及由大量节点和弧组成的图形或树状表示。一个复杂的软件系统可能包括成千上万个这样的节点和弧。为了便于用户进行概念化和理解，这种系统的可视化以不同的视图或不同的窗口呈现图形的片断，以便用户可以专注于他所期望的细节层面。
树形图（treemap visualization）是一个将分层数据显示在嵌套矩形里的填充技术，单元框表示方法，组合框表示类，所得到的可视化显示层次结构中的所有元素，元素的从属路径隐含在嵌套结构中。
锥树（cone tree）模型将层次结构在三维空间中均衡排列。层次结构的顶部放置在可视化空间的顶端，每个锥形的顶点表示该层结构的顶点，子节点均匀排列在锥形的底部。底的直径随着层次结构的深入逐渐减小，以保证最底层结构能在可视化空间中有效表示。
Voronoi树形图可以用于跟踪软件质量属性的值随着软件从一个版本向下一个版本的演变。使用缩放的希尔伯特曲线将Voronoi站点放置在平面上，从而实现站点最终位置的可预测的第一近似值，然后保持站点沿着该曲线放置的顺序，以便与相同软件的修订相比较系统。
基于双曲几何的可视化（hyperbolic tree）通过规范的算法将层次关系显示在双曲平面上，再将双曲平面映射到显示区域中。所选择的映射方式提供了一种鱼眼变形来支持focus和content之间的平滑过渡。该技术已经有成熟的产品。
依赖结构矩阵（dependency structure matrix）可以解决混乱的问题，根据不同的导航级别展示组件之间，这些组件可以是最基本的类级别、包或文件级别。研究人员还尝试了不同的布局和过滤技术解决混乱的问题。
度量视图（metric view）就是在UML图上显示度量值；还有一种模型是areas of interes，其应用一个布局算法将相似属性的实体放在一起，用不同的颜色标记度量。
3.2 三维表示
二维可视化可能会导致在平面上混杂过多的信息。 通过增加一个额外的空间维度，可以为可视化设计人员提供更多可能性来描述程序或系统的某些方面。
Richard Wettel和MicheleLanza [3]提出了一个基于城市隐喻的三维软件可视化方法，其城市景观图（cityscape view）中城市代表包，建筑代表类，并称之为代码城市。使用城市隐喻建立混合信息可视化系统，允许用户选择不同的时间段并权衡不同的组件。同时，Simon Scarle和Neil Walkinshaw[4]提出了一个名为PhysVis的软件可视化系统，其中软件度量可以变化地映射到物理模型的参数并通过粒子系统显示，软件元素可以被赋予各种物理属性，例如质量和重力，用户可以在发生相互作用的时候探索它们。同理的还有太阳系（solar system）、岛屿（island）等模型。3D模型很好地避免了混乱的问题，但也存在对象遮挡，性能等问题。 3.3 虚拟环境
虚拟环境使用户能够与熟悉的东西进行交互， 其中“世界”的概念可以映射到面向对象代码或软件系统中的“实体”或“组件”。使用虚拟环境代表面向对象软件系统的软件可视化系统的例子是ImsoVision [5] ，该系统主要支持C 代码，其主要特点是把面向对象代码的静态属性映射到虚拟环境中的对象。 ImsoVision使用平台，球体，水平和垂直列等几何三维形状作为C 代码特征的视觉元素。
4 可视化工具
软件可视化工具有三种常见的形式，一种是作为插件集成到IDE中，一种是作为一个独立的桌面软件，还有一种就是在线工具，即Web应用。
随着Web技术的发展，在Node.js的推動下，不仅衍生了大量的Web Server应用，还诞生以一些优秀的Web端应用开源框架。其中，Electron和Meteor等工具成了较为主流的使用JavaScript开发的框架。同时，随着组件化开发的流向，一些优秀的前端框架也被广泛地使用，如Facebook的React框架，Vue.js和由Google维护的AngularJS2。
在Web应用领域中，已经有很多进行图表展示的成熟的解决方案，如D3.js、G2、Highcharts和Echarts等JavaScript库，这些可视化库的实现方式和成熟度都各有差异。
同时，现在也有很多服务于JavaScript源代码分析的开源库，如Babel作为语法转换器支持最新版本的JavaScript，Esprima提供从JavaScript源代码中抽取出抽象语法书（AST）的功能，Lint类库支持检查校验项目中的错误便麻烦是或反模式，JSHint可以帮助检测代码中的错误和潜在的问题。
现有的开源JavaScript可视化工具大多为度量指标的可视化如plato[6]，包括代码行数、可维护性、圈复杂度等。同时，Webpack作为模组打包器可以将项目的文件结构以树形图展示出来，但是只停留在文件级别。
5 结束语
软件可视化（SV）领域主要关注程序的分析和开发；软件可视化技术被广泛应用于软件维护，逆向工程和重新设计等领域。软件可视化技术涉及使用交互式计算机图形，动画，电影摄影和视觉艺术来帮助理解计算机程序。在软件理解维护中存在两种类型的技术。分析工具从软件中提取事实，例如语法树，依赖关系图和执行信息。事实可以被细化为质量指标，例如代码可读性，复杂性，内聚性和耦合性，或更高级别的工件（如设计模式或代码异味）。可视化工具使用诸如数据注释图形，图表和树形图和度量标注代码等技术来展示这些事实。本文综述了软件可视化技术的研究现状，为今后研究前端JavaScript代码的可视化提供了研究基础。
参考文献：
[1] Maletic J I， Marcus A， Collard M L. A Task Oriented View of Software Visualization[C]// International Workshop on Visualizing Software for Understanding and Analysis， 2002. Proceedings. IEEE， 2002：32-40.
[2] Xu Y， Liu Y， Zheng J. To Enlighten Hidden Facts in The Code： A Review of Software Visualization Metaphors[C]// The， International Conference on Software Engineering and Knowledge Engineering. 2015：294-297.
[3] Wettel R， Lanza M. Visualizing Software Systems as Cities[C]// IEEE International Workshop on Visualizing Software for Understanding and Analysis. IEEE， 2007：92-99.
[4] Scarle S，Walkinshaw N. Visualising software as a particle system[C]// Software Visualization. IEEE， 2015：66-75.
[5] Maletic JI，Leigh J，Marcus A，Dunlap G（2001）Visualizing object-oriented software in virtual reality.In：Proceedings of the 9th international workshop on program comprehension（IWPC’01）， Toronto， pp 26–35.
[6] es-analysis/plato. https：//github.com/es-analysis/plato.
【通联编辑：梁书】