軟件可視化技術研究綜述

陳薇伊

摘要：軟件可視化是可視化分析的一個特殊應用領域，涉及圖形工具和表示所介導的軟件交互分析。由于有限的成熟度，軟件可視化在業內并沒有被廣泛地使用，特別是前端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（IWPC01）， Toronto， pp 26–35.

[6] es-analysis/plato. https：//github.com/es-analysis/plato.

【通聯編輯：梁書】