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

通過了一年的迭代， 近 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: https://github.com/appworks-lab/toolkit
3. AppWorks Pack: https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks
4. AppWorks Material: https://appworks.site/materialCenter/fusion

✿  拓展閱讀

做者 | 許文濤(梧忌)

編輯| 橙子君

出品| 阿里巴巴新零售淘系技術

本文分享自微信公衆號 - 淘系技術（AlibabaMTT）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。