[[379863]]

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的新津縣網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

過(guò)去的十幾天里，在 Inherd 開(kāi)源小分隊(duì)的努力之下，我們實(shí)現(xiàn)了 Coco 的第一個(gè)完整的功能 —— 實(shí)現(xiàn)對(duì)于一個(gè)項(xiàng)目的基本架構(gòu)可視化。(PS：Coco 是一個(gè)研發(fā)效能分析工具，如團(tuán)隊(duì)發(fā)展現(xiàn)狀(根據(jù)架構(gòu)復(fù)雜度及行數(shù)變更)、團(tuán)隊(duì)演進(jìn)、歷史分析等。)

于是呢，為了驗(yàn)證開(kāi)發(fā)流程的完整性，我們發(fā)布了 0.1.1 版本(當(dāng)前僅構(gòu)建了 macOS 平臺(tái)，其它平臺(tái)暫時(shí)未構(gòu)建)。在這個(gè)版本里，我們實(shí)現(xiàn)了兩個(gè)主要的命令行工具：

• coco。通過(guò) CLOC、Git 等對(duì)項(xiàng)目進(jìn)行你那樣的。
• visual(待改進(jìn))。對(duì)于 coco CLI 生成的結(jié)果進(jìn)行可視化。

其中的一個(gè)重要的功能便是：交互式架構(gòu)可視化。

架構(gòu)圖真的靠譜嗎?

在軟件開(kāi)發(fā)中，我們經(jīng)常習(xí)慣性地使用各類可視化工具，如 UML，它們用于讓開(kāi)發(fā)人員快速了解系統(tǒng)某一部分的架構(gòu)，快速熟悉不同元素之間的關(guān)系。相似的，對(duì)于架構(gòu)進(jìn)行可視化，能幫助我們迅速了解系統(tǒng)的現(xiàn)狀，快速找到系統(tǒng)中的問(wèn)題。

在實(shí)踐過(guò)程中，我們會(huì)有不同的可視化模式：

• 手繪架構(gòu)圖。
• UML 圖。用戶根據(jù)用例圖抽象成類，描述類的內(nèi)部結(jié)構(gòu)和類與類之間的關(guān)系，是一種靜態(tài)結(jié)構(gòu)圖。
• C4 模型。在 C4 模型里，有一個(gè)重要的理念就是架構(gòu)的抽象層次是類似于地圖，可以進(jìn)行縮放。對(duì)應(yīng)的一個(gè)體現(xiàn)就是：系統(tǒng) System、容器 Container、組件 Component和代碼 Code。通過(guò)不同層次的系統(tǒng)上的連接，我們可以有機(jī)地看到整個(gè)系統(tǒng)的組成。而不同的開(kāi)發(fā)人員，也可以看到適用于自身的架構(gòu)模式。

回到真實(shí)世界中，我們往往對(duì)于架構(gòu)圖的真實(shí)性會(huì)產(chǎn)生一些懷疑。為此，我們往往會(huì)回到代碼中，去看看真實(shí)世界的架構(gòu)長(zhǎng)什么樣，又或者是引入 ArchGuard 這樣的工具進(jìn)行架構(gòu)守護(hù)。

于是，在 Coco 中，我們實(shí)現(xiàn)的第一個(gè)功能，就是輕量級(jí)的架構(gòu)可視化。

輕量級(jí)架構(gòu)可視化

主流編程語(yǔ)言的分層架構(gòu)是與目錄結(jié)構(gòu)相綁定的，即以文件系統(tǒng)的方式約束其組織形式。于是，當(dāng)前 Coco 的架構(gòu)可視化針對(duì)的主要是分層架構(gòu)，即文件 + (PS：目錄結(jié)構(gòu)。如果我們能在 Coco 里實(shí)現(xiàn) C4 模型，那自然也是不錯(cuò)的。)

在這種模式之下，我們只要實(shí)現(xiàn)對(duì)所有代碼文件的行數(shù)統(tǒng)計(jì)，獲取這些數(shù)據(jù)之后，對(duì)其進(jìn)行可視化后，我們便能得到一份輕量級(jí)的可視化架構(gòu)。

為此，在 Coco 中，我們用到了：

• CLOC (Count Lines of Code)，是一類可以統(tǒng)計(jì)多種編程語(yǔ)言中空行、評(píng)論行和物理行的工具。
• D3.js，是一個(gè)使用動(dòng)態(tài)圖形進(jìn)行資料可視化的 JavaScript 程序庫(kù)。

兩者結(jié)合之下，我們就能可視化現(xiàn)有軟件的分層架構(gòu)，并且實(shí)現(xiàn)它的交互式設(shè)計(jì) —— 如對(duì)于某一代碼倉(cāng)庫(kù)的繼續(xù)展開(kāi)等等。

使用 Coco 進(jìn)行架構(gòu)可視化

(PS：由于精力的原因，當(dāng)前雖然構(gòu)建了不同的操作系統(tǒng)版本，但是只有 macOS 版本是經(jīng)過(guò)測(cè)試的。)

Coco 首頁(yè)：https://github.com/inherd/coco

過(guò)程如下：

• 安裝 coco?？梢詮?Release 頁(yè)面下載對(duì)應(yīng)的二進(jìn)制包，又或者是從源碼中構(gòu)建。
• 配置。根據(jù) Coco 的 README.md 編寫 Coco 的配置文件 coco.yml，配置對(duì)應(yīng)的代碼倉(cāng)信息。可以是遠(yuǎn)程的項(xiàng)目，也可以是本地的項(xiàng)目，又或者是 .。
• 分析。執(zhí)行 coco。
• 可視化。執(zhí)行 visual server 就可以運(yùn)行起 Web 服務(wù)，通過(guò)瀏覽器可以訪問(wèn)當(dāng)前的架構(gòu)分析結(jié)果。

示例

如下是 Redis 的結(jié)果圖(125,842 行)：

 

代碼結(jié)構(gòu)很清爽，有木有。打開(kāi) deps 可以發(fā)現(xiàn)，依賴主要是在： jemalloc、 lua 和 hiredis 三個(gè)模塊：

 

如下是早期在 GitHub 上泄露的 B 站后端源碼(3,007,351 行，含依賴)：

 

對(duì)應(yīng)的代碼熱點(diǎn)圖：

 

更多示例見(jiàn)：https://inherd.github.io/cases/

其它

歡迎大家試用或者加入開(kāi)發(fā)。

GitHub：https://github.com/inherd/coco

本文轉(zhuǎn)載自微信公眾號(hào)「phodal」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系phodal公眾號(hào)。   

 

文章名稱：輕量級(jí)架構(gòu)可視化：Coco實(shí)現(xiàn)
網(wǎng)站鏈接：http://uogjgqi.cn/article/cceisjp.html