淘系自研前端研發工具 AppWorks 正式釋出

來源： Alibaba F2E

作者：許文濤(梧忌)

經過了一年的疊代， 近 2 個月集中開發， AppWorks 正式釋出。

AppWorks位址：

https://appworks.site/

AppWorks 是社群受到開發者廣泛關注的 VS Code 套件，在 VS Code 插件市場有 2w+ 的下載下傳量，是 VS Code 插件市場受開發者喜愛的百佳套件之一，多次登陸 VS Code 插件市場周/月趨勢榜。在淘寶内部，AppWorks 日均建立項目 50+ 次，日均區塊被使用 50+ 次，DAU 400+。

AppWorks 正式版本定位前端研發工具集，目标是讓前端應用的開發更快更好更輕松

• 什麼是工具集？工具集是指 AppWorks 包含了一系列面向前端研發各場景的工具（桌面用戶端、編輯器插件、指令行工具等）。
• 為什麼是更快更好更輕松？快、好和輕松是指前端研發過程中需要解決的三個核心問題：研發效率（要更快）、代碼品質（要更好）、研發門檻（要更輕松）。

這篇文章将主要介紹 AppWorks 有哪些能力，以及如何使用這些能力解決這些問題的。

讓開發門檻再低一點

好的工具應該是人人都用得起的。AppWorks 首要解決的問題是讓人人都可以快速地開始前端研發。面對這個問題，AppWorks 提供的解法是 GUI 工具 + 海量可複用物料。

開發工具箱

要開始前端應用程式的開發，首先需要安裝必要開發工具和配置相應的開發環境：

• 必要的開發工具包括：Visual Studio Code、 Google Chrome、Charles等等；
• 配置的開發環境包括：Node.js、npm、git 等等。

Visual Studio Code位址：

https://code.visualstudio.com/

Google Chrome位址：

https://www.google.cn/chrome/

Charles位址：

https://www.charlesproxy.com/

Node.js位址：

https://nodejs.org/en/

npm位址：

https://www.npmjs.com/

git位址：

https://git-scm.com/

為此 AppWorks 提供前端開發工具箱 —— AppWorks Toolkit 來幫助開發者簡單快速搭建前端開發環境。

AppWorks Toolkit位址： https://github.com/appworks-lab/toolkit

Toolkit 是一個桌面用戶端，開發者可以快速安裝和使用。其核心能力有：

• 一鍵安裝前端開發工具，這些工具包括但不限于：桌面用戶端、編輯器插件、浏覽器插件、指令行工具等等；
• 可視化管理前端開發工具，覆寫工具查找、安裝、更新、解除安裝完整的軟體生命周期管理；
• 可視化配置前端開發環境，這些配置包括但不限于：Node 配置、npm 配置、Git 配置等等。

更詳細的說明可以參見：《前端環境》

閱讀位址： https://appworks.site/pack/basic/toolkit.html

海量可複用物料

前端開發的第二步需要有海量可複用的物料。物料隻有海量和可複用，才能正在地服務于前端應用的開發，其要求是：

• 海量：面向不同的終端有對應的跨端跨架構的物料；
• 可複用：需有較高的領域抽象度和可維護的代碼品質。

為此 AppWorks 提供物料解決方案 —— AppWorks Material 來滿足這些要求

AppWorks 物料方案的特點有：

• 豐富且高品質的物料：從業務中抽象并經過多輪 Review，支援了 Fusion Design、Ant Design、Rax 等不同 UI 元件的物料；
• 可定制物料的能力：提供腳手架工具供不同團隊快速定制業務領域的模闆、區塊群組件形成物料庫；
• 低成本的文檔站點：打通 Fusion 物料中心的托管，可以快速形成物料的站點和文檔。

讓好的開發體驗促進效率的提升

好的工具應該能夠提供好的開發體驗并促進效率的提升。為此 AppWorks 提供了基于 VS Code 的前端研發套件 —— AppWorks Pack 從以下幾個方面來提高源碼開發領域的體驗和效率。

AppWorks Pack位址： https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks

極簡的開發流程

Pack 将建立、調試和釋出項目等操作通過插件的方式內建到了 VS Code 中，在編輯器内即可完成常見的工程操作以及與線上平台的對接。這些能力的內建使得開發者不需要頻繁地在多個用戶端、平台間進行切換和學習：

友好的可視化開發

Pack 提供了基于物料的可視化開發方式，基于 AppWorks Material 提供的海量物料，通過區塊組裝生成頁面，一鍵添加物料到代碼，物料的文檔、示例都可以在編輯器中直接觸達：

更詳細的說明可以參見：《使用物料》

https://appworks.site/pack/basic/materials.html

強大的編碼輔助

Pack 提供的編碼輔助能力包括：代碼提示（自動補全、資訊提示和定義跳轉）、代碼重構和代碼片段等功能，這些功能是覆寫多種程式設計語言（JavaScript、CSS）和多種 DSL（React、Rax）和多套研發架構（rax-app、ice.js）的。

以 Pack 提供代碼重構功能為例，可以快速删除元件檔案及元件檔案所有的引用，同時删除掉由于元件屬性所帶來的不需要的變量：

更詳細的說明可以參見：《代碼補全》、《代碼重構》

《代碼補全》： https://appworks.site/pack/basic/intelli-code.html 《代碼重構》： https://appworks.site/pack/basic/refactor-code.html

讓好的代碼獲得持續的關注

好的代碼品質是軟體工程的立身之本，好的開發工具應該能夠為軟體工程的代碼品質提供保障。

為此 AppWorks 提供了代碼品質解決方案 —— AppWorks Doctor 來解決該問題。Doctor 提供了代碼規範和項目品質評估模型，并結合編輯器來進行自動修複規範問題和産出項目品質評估報告；線上則提供資料大盤來全面了解團隊和項目的品質情況，幫助開發者和管理者對代碼品質保持持續的關注。

代碼規範

Doctor 通過 @appworks/spec 包來聲明和限制代碼規範。該規範遵循阿裡巴巴前端編碼規範，并結合了我們在 ICE 和 Rax 項目的最佳實踐，包含 ESLint、stylelint、commitlint 及 Prettier 的相關規則，開發者可以很友善地與自己的前端項目進行結合。

位址：

@appworks/spec：

https://www.npmjs.com/package/@appworks/spec ICE： https://ice.work/ Rax： https://rax.js.org/

品質分析

Doctor 建立了項目品質評估模型，該模型包含以下幾個次元的分析：

• 代碼規範：通過 @appworks/spec 掃描代碼，并提供一鍵修複功能（Doctor 提供了預設的配置，但使用者項目的 @appworks/spec 配置優先級将更高）。
• 代碼可維護度：通過 typhonjs-escomplex 掃描代碼。複雜度評分低說明代碼的判斷邏輯複雜，可能品質低且難于閱讀、測試和維護。
• 代碼重複度：通過 jscpd 掃描代碼。重複的代碼一旦出錯，意味着加倍的工作量和持續的不可控。将提示進行代碼抽象和重構來減少備援代碼。

typhonjs-escomplex： https://www.npmjs.com/package/typhonjs-escomplex jscpd： https://www.npmjs.com/package/jscpd

開發者可以在 VS Code 中對自己的本地項目進行品質檢測，并自動修複規範問題，檢視維護度和重複度方面的分析及優化建議：

亦或者針對依賴的基礎庫和架構進行自動化的更新，Doctor 也提供了人為監督和偶爾幹預的方式：

線上治理

代碼規範和品質分析讓開發者可以在本地主動地去優化項目的品質。但對于團隊來說，依然需要有被動的方式來促進項目的品質治理。例如了解重點項目的品質趨勢情況，團隊成員的品質情況，推進落地最佳實踐或某些依賴包的更新等等。

在阿裡内部，Doctor 通過對接 DEF 工程平台，在項目的釋出部署環節收集項目的品質資訊，并給開發者發送此次疊代的品質報告，由此來提升團隊成員的品質意識。同時釋出環節的品質檢測是可控的，當遇到一些特殊情況時，例如我們發現了某個有重大缺陷或安全問題的代碼或依賴包，可以中斷此次釋出流程：

通過對項目釋出時品質情況的采集，Doctor 能夠知道團隊内項目和成員的品質概況和趨勢，在 AppWorks Data Platform 上進行資料的展示和分析：

AppWorks Data Platform： https://appworks.alibaba-inc.com/

這裡面目前開發經常使用的場景是線上上網站展示項目的品質資訊，開發者可以通過跳轉到 WebIDE 喚起 Doctor 插件完成一鍵修複和優化代碼：

讓提升代碼編率可度量

廣義的研發效率是指軟體從需求到上線的完整過程中的投入和産出比。程式設計效率是指機關時間内有效的代碼産出，程式設計效率是研發效率的重要組成部分。

AppWorks 目标通過定義程式設計效率的評估标準，産出團隊的程式設計效率報告，分析影響程式設計效率的因素，制定提升程式設計效率的方案，對方案進行實施，觀測效率資料變化，調整提效方案，最終達到提升個人和團隊程式設計效率的目的。

現階段，AppWorks 主要完成了程式設計資料的采集及統計。

資料采集

AppWorks 通過 Time Master 插件來将自動追蹤開發者在編輯器中的編碼行為，Time Master 采集的資料包括開發者的編輯器使用時長及其在編輯器上針對代碼檔案的所有操作，例如打開檔案、關閉檔案、在代碼檔案上進行鍵入等；

最終可以做到統計開發者在每個檔案、每個項目的詳細編輯行為，例如：

• 停留時長
• 編輯時長
• 添加、删除的代碼行數
• 添加、删除的字元數
• 鍵盤輸入數
• 等等

在阿裡内網環境，Time Master 将會把這些資料上報到 AppWorks Data Platform。

資料分析

基于上報的資料，AppWorks Data Platform 可以提供個人、項目和團隊程式設計資料的統計和分析：

• 項目大盤：提供具體項目的成員開發投入情況的資料統計及分析；
• 個人大盤：提供個人質效資料統計及分析，并與團隊的整體情況進行對比；
• 團隊大盤：提供團隊整體的項目質效資料統計及分析，團隊成員的質效概況。

編碼輔助增強

從過往一年的使用者使用資料來看，編碼輔助功能依然是開發者使用最頻繁的功能，對該功能準确率的提升會促進曝光率和轉換率的提升：

轉換率：使用量/曝光量

曝光率：曝光量/活躍使用者數

從日常的使用者訪談來看，開發者對基礎庫和架構的代碼提示和代碼重構有迫切的期待，諸如快速提取代碼、快速變量命名、Inline Style to CSS 等操作，能為開發者提供愉悅的編碼體驗。未來 AppWorks 将持續增強編碼輔助能力，并結合 Time Master 對相關功能的實際編碼效率提升進行量化。

項目品質治理

AppWorks 在上一個年度完成了 Data Platform 的雛形，打通了品質資料的上報、存儲和統計鍊路。

但有資料隻是提供了參考價值，基于資料做出行動，持續完善資料模型，使得名額資料提升，才能完成展現資料中心的價值。

未來 AppWorks 将通過線上網站和編輯器端資訊的觸達，讓開發者和管理者了解基礎庫和架構的最新動态，配套更新工具，推動團隊基礎設施的更新。例如通過線上線下的關聯，推進 React 15 更新到 17，Rax 核心庫從 0.6 更新到 1.0 等等。

工具箱能力完善

AppWorks Toolkit 的第一個版本中已完成快速安裝必備工具和管理 Node 版本功能。未來将持續完善對前端工具和開發環境的管理和配置能力，成為前端開發的第一入口，幫助初學者快速開始前端開發，引導開發者用好工具，排查和修複開發環境問題。例如：

• 全局 npm 的管理
• Git/SSH 配置
• 浏覽器/編輯器插件管理

程式設計資料價值挖掘

AppWorks 在上一個年度完成了程式設計資料的上報、存儲和統計鍊路。未來 AppWorks 将主要通過 API 或離線資料分享的方式，讓業務平台和工程平台利用程式設計資料進行研發效能的度量或分析，使得資料價值更大化。

寫在文末

AppWorks 将持續重視使用者體驗，做開發者喜歡的、好用的工具。任何建議或意見，可以送出 issue 給我們：

https://github.com/appworks-lab/site/issues

相關資料：

1. AppWorks 官網： https://appworks.site
2. AppWorks Toolkit:
3. AppWorks Pack:
4. AppWorks Material: https://appworks.site/materialCenter/fusion