Categories
程式開發

可視化輔助編程在螞蟻的探索之路


提效是企業級前端框架非常重要的目標之一,如何借助框架和工具讓 1 個人可以做 10 個人的事情,要做 10 倍的提效,則要做一些破局的事情。

螞蟻嘗試在寫代碼(Pro Code)的基礎上做可視化輔助編程( Visual Assist Programming ),借助和框架、平台、組件和物料市場的互補,以及用類微前端的架構方案來提供插件機制,以此來提升開發者的研發效率並降低上手門檻。

以下內容根據螞蟻金服高級技術專家陳成在 GMTC 深圳 2019 全球大前端技術大會上的演講整理而成。

以下為正文。

我主要分為以下幾個方面來講,可視化編程的優勢、可視化編程在螞蟻的實踐、可視化原理的剖析、可視化破局的,最後展望一下未來。

可視化編程的優勢

近年來,可視化搭建系統越來越多的被提及,一般來說,可視化搭建系統分為兩類:無代碼( NO CODE) 和低代碼( LOW CODE),這兩種的區別是,前者完全不需要寫代碼,後者需要寫部分代碼,整體通過拖拽的方式生成。在阿里內部的可視化編程系統有 30 多個,分別解決不同垂直領域的問題。在業界,可視化的應用也越來越多。為什麼可視化會火起來?可視化有哪些優勢?

可視化輔助編程在螞蟻的探索之路 1

1.可視化搭建的優勢

可視化輔助編程在螞蟻的探索之路 2

可視化搭建優勢主要分為以下幾點:

  • 所見即所得:通過拖拽的方式生成頁面,再通過一些配置就能生成網站;
  • 增刪改查,十倍提效:針對垂直領域,可視化就可以進行深入的分裝,然後針對常見的增刪改查,做到十倍提效也是可能的事情;(搭建系統一般針對垂直領域)
  • 一站式研發:一站式研發通常會管前端的代碼,還會管後端代碼以及一些服務,開發完了之後還會一鍵發布上線,處理些回滾等;
  • 專業門檻低:不需要很強的專業技能,也能完成這部分工作;
  • 技術收斂:自己開發網站的時候會去選擇和對比,這個平台就會做一個技術收斂,節省成本。

既然可視化編程這麼好,以後是不是就可以不用寫代碼了?

2. 寫代碼的優勢

雖然可視化編程帶來了很多便利,但是寫大量代碼(Pro Code)的優勢也很明顯,可以對可視化編程做一些補充。

  • 針對可視化編程,寫代碼的優勢在於精確表達,極致體驗;
  • 搭建系統針對垂直領域的分裝,以此來達到提效的目的,寫代碼能在分裝的基礎上更好的實現提效的目的,及產品增值業務;
  • 很多產品不僅有 PC 端、移動端,代碼涉及到共享和復用,一站式研發並不能很好的滿足部署平台兼容性;
  • 前端技術日新月異,如果把技術分裝在平台裡,平台更新迭代可能不會像前端技術更新迭代那麼快,而很多業務又涉及到更新和迭代,寫代碼的優勢更加凸顯。

可視化輔助編程在螞蟻的探索之路 3

分析了可視化系統的優勢和寫代碼的優勢,接下來我們改怎麼去選擇呢?

答案顯而易見,寫代碼為主可視化功能為輔。我們應該基於 Pro Code(寫很多代碼) 去做 VAP(可視化輔助編程)。

可視化輔助編程在螞蟻的探索之路 4

基於 Pro Code 去做可視化輔助編程,社區已經有很多先行者。

可視化輔助編程在螞蟻的探索之路 5

Pro Code 的痛點又是什麼?

  • 文檔鏈路長;
  • 門檻高;
  • 命令行不夠友好;
  • 非一站式研發,流程割裂;
  • 研發效率不夠高等。

可視化輔助編程在螞蟻的探索之路 6

可視化輔助編程在螞蟻的實踐

1. 可視化輔助編程在螞蟻的實踐

基於以上的 Pro Code 的痛點,螞蟻開發了一個可視化輔助編程工具 Umi UI。主要包括兩部分,一是流程,二是功能。

流程是解決從創建開始到最後部署、發布之後等的一系列問題。在社區上還好,如果你要把工具推給內部開發者使用,就必然要解決一些流程上的問題。

功能包含:

Dashboard

  • 基礎:配置管理、任務管理;
  • 進階:資產市場、數據管理;
  • 功能閉環:Terminal
  • 運行態能力:Mini 氣泡。

可視化輔助編程在螞蟻的探索之路 7

來看一個例子,創建項目。

創建項目其實很簡單,即腳手架可視化。

外部創建流程:更新腳手架代碼 —>創建項目 —>安裝依賴 —>打開項目 —>出錯重試。

內部流程相對外部會復雜一點,會走單獨的創建、部署和發布流程。

可視化輔助編程在螞蟻的探索之路 8

任務管理是基礎命令的可視化形式。如:啟動、構建、lint、test 等。

可視化輔助編程在螞蟻的探索之路 9

配置管理其實是打通文檔和工具的一個環節。做配置時就不需要再返回查詢文檔,就能看到一些具體的選項。

可視化輔助編程在螞蟻的探索之路 10

資產管理是可視化編程裡面一個比較重要的環節,通過資產管理這個工具可以做一個真正的提效。資產管理包含區塊和模板,現在有 antd 的 400 多個 DEMO 區塊,以及 antd-pro 數十個模板。通過資產管理,我們把模板都整合進來,這樣就可以快速的創建頁面。

可視化輔助編程在螞蟻的探索之路 11

前面的資產管理 1 是有模板的情況,那麼沒有模板的情況又是什麼樣呢?我們以資產管理 2 為例。

沒有模板的情況下,我們如何創建頁面?

首先,我們先創建一個空的模板,然後選擇佈局,再在佈局裡面添加功能區塊;

實現這些配置不需要單獨的頁面去做,如圖所示,頁面的右下角有一個氣泡,通過 Mini 氣泡去添加資產,完成所有的事情。

可視化輔助編程在螞蟻的探索之路 12

2. Umi UI 使用路徑

基於以上所述,我們有兩種方式去使用 UMi UI 工具。

(1)正常啟動我們的項目,通過預覽頁去做配置、資產管理、添加等一系列事情;

(2)單獨去啟動一個命令行,去打開一個完整功能的頁面,然後在裡面完成具體的事情。

可視化輔助編程在螞蟻的探索之路 13

3. Umi UI 的優勢與挑戰

如圖所示,右邊的表格顯示的是各家可視化框架工具的優勢,左邊則是 Umi UI 的優勢與挑戰。

可視化輔助編程在螞蟻的探索之路 14

4. 功能矩陣

功能矩陣主要包含三部分:流程、運行態能力、體驗和提效

可視化輔助編程在螞蟻的探索之路 15

關於螞蟻可視化輔助編程工具 Umi UI 到底是怎麼實現的,我們一起來探索其原理。

原理解析

1. 架構大圖

以下是 Umi UI 的架構大圖。

  • 所有操作反饋到用戶代碼:所有在可視化上面的操作都是最終作用於用戶的代碼,代碼變更後,Webpack 的編譯就會重新觸發,瀏覽器就會重新刷新,這其實是一個單項的流程;

  • 插件分客戶端和服務端:要實現一個功能需要同時覆蓋客戶端和服務端的能力;

  • Mini 氣泡:Mini 氣泡和用戶最終展示的 Dom 結構能有一些更深入的融合。

可視化輔助編程在螞蟻的探索之路 16

2. 插件體系

Umi UI 插件體係是 Umi 插件體系的一環。在螞蟻,我們有幾百個插件,如果這些插件需要增加可視化能力,只需要多增加一個編輯態即可。

可視化輔助編程在螞蟻的探索之路 17

下圖是 Umi Ui 的界面,可以看到我們的界面裡面的色塊包含:側邊欄、底部狀態欄、內容區,插件能力的好處就是可以擴展這些色塊。

可視化輔助編程在螞蟻的探索之路 18

3. 類微前端的實現

插件的實現有兩個特徵,即每個功能塊都是一個 npm 包,及 npm 包之間的發布節奏不一致。

基於這兩個點,我們可以通過微前端的方式去實現插件功能。

擴展方式和現有的微前端方式又有些不同。現有的微前端方案通常基於路由,路由變化之後可以去渲染不同的子應用。在 Umi UI 裡,不僅是在路由區域,每個區域都可以被擴展,它更像是跑在瀏覽器端裡面的一種插件體系。

可視化輔助編程在螞蟻的探索之路 19

運行態能力是怎麼做的呢?

先切換到一個編輯模式,在編輯模式裡面就可以看到一些可以插入的“點”,點擊這些“點”之後,可以把我們想要的代碼插入到具體的位置裡面去。

可視化輔助編程在螞蟻的探索之路 20

資產添加的實現是基於 AST 解析的。

實現原理步驟:

(1)在

裡面套一個組件;

(2)然後它在進入編輯模式後,我們會自動分析出來,我們有哪些佔位符。

(3)用戶點擊佔位符之後,會點擊一些具體的區塊,選擇具體的區塊之後,我們就會執行添加的操作。

(4)添加之後也會做一個語法輸入的解析(需要注意的是:這兩個語法解析需要保持相同的語法邏輯),然後把他添加到我們想要的位置去。

關於這一點值得一提的是,這種實現方式其實他有一定的侵入性,開發的時候他會修改用戶的代碼,大家在實現這套方案的時候保證謹慎和小心。

可視化輔助編程在螞蟻的探索之路 21

破局

上面介紹完值得一提的功能點,接下來我想說一下破局。可視化輔助編程一個非常新的東西,要讓用戶去使用它,就需要真正能打動用戶的點,當我們要做可視化編程輔助工具的時候,我們先分析了下目前開發者的時間分佈。

可視化輔助編程在螞蟻的探索之路 22

根據以上的時間分佈圖,很明顯,我們要做一些提效就要解決上面 70% 的問題,即交互場景和組件相關。

1. 資產市場

接下來,我們通過資產市場來解決組件相關的部分問題。

資產市場主要由以下幾部分組成:組件、業務組建、區塊、模板

可視化輔助編程在螞蟻的探索之路 23

資產市場要真正做到提效,還有一些關鍵的點。通過實踐,我們發現通過以下點能達到提效:

資產覆蓋率達 80%、模板和區塊的質量、生產和消費流程。

可視化輔助編程在螞蟻的探索之路 24

##2. 場景市場

場景市場(如下圖)約佔開發者 30% 的時間(這裡與下圖有差異,請以30%為準)。

右邊是一個例子,它像一個 suggestion,我們可以做的很簡單,也可以做的很複雜。做複雜的話我們要考慮很多點。我們在快速輸入的時候,前面的東西其實是要做取消的,前面的輸入可能會產生一些請求,這些請求也是需要做取消的,以及輸入和URL 需要去同步的,還要支持瀏覽器的前進和後退,像這類場景其實很多,我們要做好的話是需要去覆蓋很多小的點,如果每個開發者都去關注這些比較小的點,其實開發成本是件很高的事情。

可視化輔助編程在螞蟻的探索之路 25

怎麼讓開發者寫的又快,體驗又好,我覺得需要一個類似場景市場這樣的事情。

場景市場很多小的點可以去做沉澱,我們現在是通過 hooks 的方式去沉澱

可視化輔助編程在螞蟻的探索之路 26

完成上面這些事情之後,我們來看下一個理想的項目開發流程。

可視化輔助編程在螞蟻的探索之路 27

3. 強約束的垂直領域框架

雖然現在的很多框架都有一些約束,但是這個約束其實是很弱的。大家在使用一些框架的時候還是能後去選擇很多事情。

針對垂直領域,我們做了一些深耕之後,優化並總結了強約束的垂直領域框架。

基於這一點,我們就可以去做一個類似強約束有很多規則的框架。因為可視化編程工具是基於規則來產出的,有了規則之後,對於可視化輔助編程工具來說,就能去做更多的事情。

我們部門主要是去寫前端的中後台代碼,我們就會思考,“怎麼去寫中後台,是要個性話還是要非常集中式的,以及高效的?”所以我們現在的解法是,關鍵詞“強約束”,另外一個是“配置化、約定化”。

可視化輔助編程在螞蟻的探索之路 28

(1)強約束

因為現在大家可選的技術方案還有很多,在內部做了很多的約束,大家可以選擇不同的數據流,選擇不同的 CSS 方案,那麼這些技術方案我們是不是應該開放給使用者?尤其團隊內部,是不是應該開放給別人去做選擇,其實是一個可以討論的點。我們現在決定的是不開放,所有的東西都是使用相同的,這樣, 團隊內部就可以保持一致性。

可視化輔助編程在螞蟻的探索之路 29

(2)配置化

配置化不僅僅是功能,還有 UI 層。我們看到這是一個 Design Pro 的一個例子,它有 logo、導航、菜單、頁面區。每個頁面的區別只有頁面區這部分,其他部分基本是一致的,所以為什麼不讓其他區域通過配置自動在框架裡面產生。做到這一層之後,其實就是像寫小程序一樣去寫我們的中台代碼。

配置層面的不僅包含 UI 層面,還有路由、佈局、菜單、導航、麵包屑、權限等,這些都可以通過配置化的方式去處理。

可視化輔助編程在螞蟻的探索之路 30

(3)約定化

大家通常看到一個框架的時候,可能會覺得它非常的黑盒,不知道為啥就能跑起來了,其實在它背後是有很多的約定。

通過約定,我放一個文件在那邊,他就跑起來。

比如說,我有一個 modal 目錄,放了一些 hooks,這就是一個數據流的方案。

然後,我放一個 locales 目錄,裡面去寫一些國際化的配置文件,這就是國際化的方案。

我寫一個權限點 JS,去定義一些權限,這就是我們的權限方案。

可視化輔助編程在螞蟻的探索之路 31

(4)數據流

這是我們簡化後的數據流方案,

我們的項目背景是中後台,我們分析了幾百個中後台的項目,我們發現大家用全局的數據流還是比較少,基於這種前提,我們把數據流做的很薄。

怎麼做把數據流做的很薄呢?

  • 基於 hooks 的極簡數據流;
  • 通過框架做約定和簡化;
  • 定義基於 hooks,使用通過 useModal。

可視化輔助編程在螞蟻的探索之路 32

(5)權限

權限也是類似於數據流,它是在 access.ts 的文件裡面,去定義我們的權限規則,然後你可以在數據流的文件裡面以及組建層通過 useAssess 去使用,以及可以在路由層做一些配置。

可視化輔助編程在螞蟻的探索之路 33

4. 強約束的垂直領域框架 + Umi UI

做了強約束框架之後,我們就有了很多規則,有了這些規則之後,有了約束、配置、規定之後,我們就可以讓我們的可視化輔助工具去做更多的事情。

比如,我們可以通過可視化輔助工具,看項目的大圖,你可以在頁面裡了解整個項目的情況,包括項目的 logo、title、路由、組件、權限、國際化、數據流、資產以及佈局等。

可視化輔助編程在螞蟻的探索之路 34

展望和未來

目前,我們面臨三條路:

  • VSCode 插件;(優點:穩定;缺點:VSCode 插件限制非常多。)
  • 基於 VSCode 封裝 IDE;
  • 命令行輔助(保持現狀)。

未來,可視化輔助工具我們依舊專注提效。

可視化輔助編程在螞蟻的探索之路 35

總結

  • 搭建雖好,寫代碼更佳;
  • 我們的優勢和挑戰,包含框架、插件化、運行態能力;
  • 插件化和類微前端前端的架構方式;
  • 新事物需要破局點,破局點來自對開發者時間的探索;
  • 未來三條路的選擇。

作者介紹

陳成,花名云謙,螞蟻金服高級技術專家,入職阿里已有 10 年。之前在淘寶,負責過淘寶首頁、寶貝詳情、購物車、下單等很多重要業務的前端部分,然後轉崗到支付寶,負責spm、支付寶開發者工具的開發,以及創建了dva、roadhog、babel-plugin -import、umi 等。擅長的領域有工具、前端框架以及前端性能等,熱衷於開源。

活動推薦

提效降本永遠是前端不變的話題,在GMTC北京2020我們設置了“大前端工程化”“前端安全生產”等技術專場,在關注前端工程化的同時,也關注前端安全生產,讓代碼更加可靠。希望通過一線國內大廠的實際解決方案,給大家帶來新的思考。詳情點擊GMTC北京2020官網