軟件可視化技術(shù)研究綜述

陳薇伊

摘要：軟件可視化是可視化分析的一個(gè)特殊應(yīng)用領(lǐng)域，涉及圖形工具和表示所介導(dǎo)的軟件交互分析。由于有限的成熟度，軟件可視化在業(yè)內(nèi)并沒有被廣泛地使用，特別是前端JavaScript代碼的可視化。本文將重點(diǎn)從可視化任務(wù)、可視化表示方法以及可視化工具三個(gè)方面對(duì)現(xiàn)有的軟件可視化技術(shù)進(jìn)行研究綜述。

關(guān)鍵詞：靜態(tài)代碼分析；視覺隱喻；可視化工具

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2019）08-0219-02

1 引言

軟件維護(hù)在近幾年變得越來越困難，研究表明，高達(dá)80%的軟件生命周期成本與維護(hù)有關(guān)，其中40%的維護(hù)預(yù)算用于了解源代碼。作為可視化分析論的一個(gè)分支，軟件可視化允許用戶綜合并理解有關(guān)軟件模塊的內(nèi)部組織和它們之間相互作用的大量信息，這些信息對(duì)于進(jìn)行軟件維護(hù)等高成本操作至關(guān)重要。

軟件可視化（Software Visualization）可以被定義為“利用各種形式的圖像來提供洞察力和理解，并降低正在考慮的現(xiàn)有軟件系統(tǒng)的復(fù)雜性”。軟件可視化為開發(fā)和維護(hù)提供巨大的優(yōu)勢(shì)，但是研究人員發(fā)現(xiàn)很多軟件可視化的研究與開發(fā)人員的需求脫節(jié)；因此Jonathan I. Maletic [1]等人提出了軟件可視化的分類標(biāo)準(zhǔn)，以支持軟件開發(fā)過程中的各種任務(wù)，并提出了五個(gè)維度來定義軟件可視化，即任務(wù)、受眾、數(shù)據(jù)源、表示方法和可視化工具。

本文將重點(diǎn)介紹從可視化任務(wù)、可視化表示方法以及可視化工具三個(gè)方面來介紹軟件可視化技術(shù)的研究現(xiàn)狀及發(fā)展動(dòng)態(tài)。

2 可視化任務(wù)

根據(jù)Xu[2]等人的研究，可以得出目前靜態(tài)代碼分析涉及的任務(wù)包括控制流分析、代碼映射、依賴關(guān)系、軟件架構(gòu)和代碼度量等。

其中，控制流分析可視化用來述源代碼程序的序列，以幫助開發(fā)人員了解代碼的秩序。該分析的是為了解決因編程語言中的函數(shù)指針存在而使得繪制邊緣時(shí)出現(xiàn)的問題。代碼映射可視化映射代碼段間的關(guān)系，最近的研究?jī)A向于此可視化任務(wù)。Visual Studio供代碼映射的可視化功能，其可視化界面通常出現(xiàn)在代碼編輯器旁邊，工程師們可以專注于自己的任務(wù)，同時(shí)了解代碼的工作空間。依賴關(guān)系可視化是軟件可視化研究中非常重要的部分。由于軟件規(guī)模愈來愈大，組件內(nèi)部的交互關(guān)系越發(fā)復(fù)雜。依賴關(guān)系的可視化為工程師們展示了整個(gè)解決方案的依賴總覽，從而不需要查看所有的文件和源代碼。在代碼可視化領(lǐng)域里的軟件架構(gòu)側(cè)重于代碼的層次結(jié)構(gòu)，即包中包含子包，類中申明方法和屬性的結(jié)構(gòu)。此可視化也是軟件可視化的核心問題，可以確保代碼的編寫與設(shè)計(jì)的一致性。典型的靜態(tài)代碼分析的度量指標(biāo)包括代碼的規(guī)模，組件的數(shù)量和復(fù)雜度。例如，通過高亮條件語句區(qū)分常規(guī)代碼可以降低復(fù)雜度獲得更好的理解； 同時(shí)不同顏色可以指示代碼的嵌套級(jí)別。

3 可視化表示方法

可視化的主要挑戰(zhàn)是使用視覺隱喻找到可視化任務(wù)到圖形表示的有效映射。現(xiàn)在軟件可視化從二維圖形到三維表示以及最近的虛擬環(huán)境以及取得了進(jìn)展。

3.1 二維圖形

二維軟件可視化技術(shù)通常涉及由大量節(jié)點(diǎn)和弧組成的圖形或樹狀表示。一個(gè)復(fù)雜的軟件系統(tǒng)可能包括成千上萬個(gè)這樣的節(jié)點(diǎn)和弧。為了便于用戶進(jìn)行概念化和理解，這種系統(tǒng)的可視化以不同的視圖或不同的窗口呈現(xiàn)圖形的片斷，以便用戶可以專注于他所期望的細(xì)節(jié)層面。

樹形圖（treemap visualization）是一個(gè)將分層數(shù)據(jù)顯示在嵌套矩形里的填充技術(shù)，單元框表示方法，組合框表示類，所得到的可視化顯示層次結(jié)構(gòu)中的所有元素，元素的從屬路徑隱含在嵌套結(jié)構(gòu)中。

錐樹（cone tree）模型將層次結(jié)構(gòu)在三維空間中均衡排列。層次結(jié)構(gòu)的頂部放置在可視化空間的頂端，每個(gè)錐形的頂點(diǎn)表示該層結(jié)構(gòu)的頂點(diǎn)，子節(jié)點(diǎn)均勻排列在錐形的底部。底的直徑隨著層次結(jié)構(gòu)的深入逐漸減小，以保證最底層結(jié)構(gòu)能在可視化空間中有效表示。

Voronoi樹形圖可以用于跟蹤軟件質(zhì)量屬性的值隨著軟件從一個(gè)版本向下一個(gè)版本的演變。使用縮放的希爾伯特曲線將Voronoi站點(diǎn)放置在平面上，從而實(shí)現(xiàn)站點(diǎn)最終位置的可預(yù)測(cè)的第一近似值，然后保持站點(diǎn)沿著該曲線放置的順序，以便與相同軟件的修訂相比較系統(tǒng)。

基于雙曲幾何的可視化（hyperbolic tree）通過規(guī)范的算法將層次關(guān)系顯示在雙曲平面上，再將雙曲平面映射到顯示區(qū)域中。所選擇的映射方式提供了一種魚眼變形來支持focus和content之間的平滑過渡。該技術(shù)已經(jīng)有成熟的產(chǎn)品。

依賴結(jié)構(gòu)矩陣（dependency structure matrix）可以解決混亂的問題，根據(jù)不同的導(dǎo)航級(jí)別展示組件之間，這些組件可以是最基本的類級(jí)別、包或文件級(jí)別。研究人員還嘗試了不同的布局和過濾技術(shù)解決混亂的問題。

度量視圖（metric view）就是在UML圖上顯示度量值；還有一種模型是areas of interes，其應(yīng)用一個(gè)布局算法將相似屬性的實(shí)體放在一起，用不同的顏色標(biāo)記度量。

3.2 三維表示

二維可視化可能會(huì)導(dǎo)致在平面上混雜過多的信息。 通過增加一個(gè)額外的空間維度，可以為可視化設(shè)計(jì)人員提供更多可能性來描述程序或系統(tǒng)的某些方面。

Richard Wettel和MicheleLanza [3]提出了一個(gè)基于城市隱喻的三維軟件可視化方法，其城市景觀圖（cityscape view）中城市代表包，建筑代表類，并稱之為代碼城市。使用城市隱喻建立混合信息可視化系統(tǒng)，允許用戶選擇不同的時(shí)間段并權(quán)衡不同的組件。同時(shí)，Simon Scarle和Neil Walkinshaw[4]提出了一個(gè)名為PhysVis的軟件可視化系統(tǒng)，其中軟件度量可以變化地映射到物理模型的參數(shù)并通過粒子系統(tǒng)顯示，軟件元素可以被賦予各種物理屬性，例如質(zhì)量和重力，用戶可以在發(fā)生相互作用的時(shí)候探索它們。同理的還有太陽系（solar system）、島嶼（island）等模型。3D模型很好地避免了混亂的問題，但也存在對(duì)象遮擋，性能等問題。

3.3 虛擬環(huán)境

虛擬環(huán)境使用戶能夠與熟悉的東西進(jìn)行交互， 其中“世界”的概念可以映射到面向?qū)ο蟠a或軟件系統(tǒng)中的“實(shí)體”或“組件”。使用虛擬環(huán)境代表面向?qū)ο筌浖到y(tǒng)的軟件可視化系統(tǒng)的例子是ImsoVision [5] ，該系統(tǒng)主要支持C ++代碼，其主要特點(diǎn)是把面向?qū)ο蟠a的靜態(tài)屬性映射到虛擬環(huán)境中的對(duì)象。 ImsoVision使用平臺(tái)，球體，水平和垂直列等幾何三維形狀作為C ++代碼特征的視覺元素。

4 可視化工具

軟件可視化工具有三種常見的形式，一種是作為插件集成到IDE中，一種是作為一個(gè)獨(dú)立的桌面軟件，還有一種就是在線工具，即Web應(yīng)用。

隨著Web技術(shù)的發(fā)展，在Node.js的推動(dòng)下，不僅衍生了大量的Web Server應(yīng)用，還誕生以一些優(yōu)秀的Web端應(yīng)用開源框架。其中，Electron和Meteor等工具成了較為主流的使用JavaScript開發(fā)的框架。同時(shí)，隨著組件化開發(fā)的流向，一些優(yōu)秀的前端框架也被廣泛地使用，如Facebook的React框架，Vue.js和由Google維護(hù)的AngularJS2。

在Web應(yīng)用領(lǐng)域中，已經(jīng)有很多進(jìn)行圖表展示的成熟的解決方案，如D3.js、G2、Highcharts和Echarts等JavaScript庫，這些可視化庫的實(shí)現(xiàn)方式和成熟度都各有差異。

同時(shí)，現(xiàn)在也有很多服務(wù)于JavaScript源代碼分析的開源庫，如Babel作為語法轉(zhuǎn)換器支持最新版本的JavaScript，Esprima提供從JavaScript源代碼中抽取出抽象語法書（AST）的功能，Lint類庫支持檢查校驗(yàn)項(xiàng)目中的錯(cuò)誤便麻煩是或反模式，JSHint可以幫助檢測(cè)代碼中的錯(cuò)誤和潛在的問題。

現(xiàn)有的開源JavaScript可視化工具大多為度量指標(biāo)的可視化如plato[6]，包括代碼行數(shù)、可維護(hù)性、圈復(fù)雜度等。同時(shí)，Webpack作為模組打包器可以將項(xiàng)目的文件結(jié)構(gòu)以樹形圖展示出來，但是只停留在文件級(jí)別。

5 結(jié)束語

軟件可視化（SV）領(lǐng)域主要關(guān)注程序的分析和開發(fā)；軟件可視化技術(shù)被廣泛應(yīng)用于軟件維護(hù)，逆向工程和重新設(shè)計(jì)等領(lǐng)域。軟件可視化技術(shù)涉及使用交互式計(jì)算機(jī)圖形，動(dòng)畫，電影攝影和視覺藝術(shù)來幫助理解計(jì)算機(jī)程序。在軟件理解維護(hù)中存在兩種類型的技術(shù)。分析工具從軟件中提取事實(shí)，例如語法樹，依賴關(guān)系圖和執(zhí)行信息。事實(shí)可以被細(xì)化為質(zhì)量指標(biāo)，例如代碼可讀性，復(fù)雜性，內(nèi)聚性和耦合性，或更高級(jí)別的工件（如設(shè)計(jì)模式或代碼異味）?？梢暬ぞ呤褂弥T如數(shù)據(jù)注釋圖形，圖表和樹形圖和度量標(biāo)注代碼等技術(shù)來展示這些事實(shí)。本文綜述了軟件可視化技術(shù)的研究現(xiàn)狀，為今后研究前端JavaScript代碼的可視化提供了研究基礎(chǔ)。

參考文獻(xiàn)：

[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.

【通聯(lián)編輯：梁書】