提效是企業(yè)級(jí)前端框架非常重要的目標(biāo)之一，也是 2019 年螞蟻金服前端團(tuán)隊(duì)工作的重點(diǎn)。螞蟻金服前端團(tuán)隊(duì)希望借助框架和工具實(shí)現(xiàn) 10 倍提效，即一個(gè)人就可以做過(guò)去十個(gè)人做的事情，這就需要做一些能破局的工作。為此，螞蟻金服嘗試在 Pro Code 的基礎(chǔ)上做可視化輔助編程（ Visual Assist Programming ），借助和框架、平臺(tái)、組件和物料市場(chǎng)的互補(bǔ)，以及類微前端的架構(gòu)方案來(lái)提供插件機(jī)制，提升開發(fā)者的研發(fā)效率以及降低上手門檻。可視化輔助編程與大家更常談及的可視化編程有何不同？實(shí)踐過(guò)程中存在哪些技術(shù)上的挑戰(zhàn)？它是否會(huì)成為未來(lái)的主流趨勢(shì)？近日，InfoQ 記者在 GMTC 全球大前端技術(shù)大會(huì)（深圳站）2019 期間采訪了螞蟻金服前端高級(jí)技術(shù)專家陳成（花名云謙），對(duì)上述問(wèn)題做了一些探討。
根據(jù)阿里前端技術(shù)委員會(huì)主席圓心分享的前端發(fā)展歷程，從 2016 年開始，前端進(jìn)入到中后臺(tái)重塑的時(shí)代，從原有的 Pro Code 逐步演進(jìn)到 Low/No Code 。通常人們談及 Low/No Code，總會(huì)提起“非專業(yè)開發(fā)人員”（citizen developer）：借助可視化編程工具，非專業(yè)開發(fā)人員無(wú)需具體編寫代碼，只依靠圖形化界面就能創(chuàng)建企業(yè)應(yīng)用。這成為很多專業(yè)開發(fā)人員對(duì)可視化編程嗤之以鼻的原因。
在陳成看來(lái)，代碼是基礎(chǔ)，可視化功能應(yīng)該作為代碼的輔助，但不能替代代碼。對(duì)于 PRO CODE（寫很多代碼）和 LOW CODE（寫一點(diǎn)點(diǎn)代碼），陳成更傾向前者，只是服務(wù) PRO CODE 的 CLI 工具在某些場(chǎng)景下可能不夠直觀，所以需要可視化的輔助。
對(duì)于可視化編程和寫代碼優(yōu)劣勢(shì)，下面是一個(gè)對(duì)比：
那是否能夠兩者兼得呢？基于這一需求，螞蟻金服 2019 年開始探索可視化輔助編程并推出了開源的可視化輔助編程工具 Umi UI。團(tuán)隊(duì)一開始的主要出發(fā)點(diǎn)是提效，但做著做著發(fā)現(xiàn)能否提效的關(guān)鍵其實(shí)并不在于可視化輔助工具，而在于封裝，針對(duì)領(lǐng)域場(chǎng)景的封裝能帶來(lái)實(shí)實(shí)在在的提效，而借助可視化輔助工具，則可以讓這一效果進(jìn)一步放大。
陳成告訴記者，可視化編程和可視化輔助編程是兩個(gè)概念，關(guān)鍵在于輔助這兩個(gè)字。前者的產(chǎn)物通常是一個(gè)大配置，后者則是以代碼為基礎(chǔ)，通過(guò)工具輔助開發(fā)者更快更好地產(chǎn)出代碼。這是完全不同的兩條路，從不同的思路去解決相同的問(wèn)題。
可視化輔助編程對(duì)前端領(lǐng)域的價(jià)值主要體現(xiàn)在，讓開發(fā)者既能磨煉吃飯的技能，用 Pro Code 的方式編碼；又能利用搭建系統(tǒng)的交互性，高效、低門檻、一體化地完成工作。
還有一點(diǎn)是想象空間，可視化輔助編程可以讓開發(fā)人員在做工具的時(shí)候，思維不會(huì)局限在命令行里，而是可以延伸到視圖交互層，以及和頁(yè)面元素的直接交互。
螞蟻金服在可視化輔助編程的實(shí)踐中遇到的技術(shù)挑戰(zhàn)，陳成認(rèn)為主要是以下兩點(diǎn)：
瀏覽器里的插件體系。螞蟻金服采用類微前端的解決方案，在瀏覽器里實(shí)現(xiàn)了一套插件體系，讓開發(fā)者可以通過(guò) npm 包的形式擴(kuò)展 Umi UI 的功能。
運(yùn)行態(tài)能力。螞蟻金服通過(guò) ast 來(lái)實(shí)現(xiàn) Umi UI 的運(yùn)行態(tài)能力，支持多種資產(chǎn)添加方式，包括獨(dú)立界面添加、運(yùn)行態(tài)添加、編輯器拖入等。其中要注意的一點(diǎn)是，讀寫兩側(cè)的解析邏輯需要保持一致。另外，需要時(shí)刻保持克制和小心，因?yàn)檫\(yùn)行態(tài)能力需要在開發(fā)模式下侵入用戶代碼，一不小心就可能會(huì)對(duì)用戶代碼造成影響。
除了螞蟻金服的 Umi UI，在可視化輔助編程上進(jìn)行相關(guān)嘗試的還包括 Vue-cli UI、Angular Console 和 ice，其中 ice 起步比較早，一路走來(lái)踩了不少坑，也很有經(jīng)驗(yàn)，最近在做的 ice 4.0 很值得期待。
當(dāng)前可視化輔助編程依然是一種偏小眾的開發(fā)方式，但陳成認(rèn)為未來(lái)情況可能會(huì)有所改變，這要看可視化輔助編程工具做得怎么樣以及社區(qū)發(fā)展的情況。難點(diǎn)在于用戶的使用習(xí)慣很難改變，只要找到一些實(shí)實(shí)在在可以讓用戶提效的破局點(diǎn)才可能讓用戶愿意使用。但陳成對(duì)此表示樂(lè)觀：“其實(shí)會(huì)有些困難，但如果不困難，要我們做啥呢？”
可視化輔助編程優(yōu)點(diǎn)很明顯，但也存在局限，陳成認(rèn)為其中比較大的局限是開發(fā)成本。之前開發(fā)一個(gè)功能，寫命令行部分就行了，現(xiàn)在還要提供可視化輔助的交互版本，并且要保證質(zhì)量，不僅好用，還要好看，開發(fā)成本翻一倍可能都不止。
受限于開發(fā)成本，再加上前端技術(shù)發(fā)展太快，可視化編程對(duì)于整個(gè)前端領(lǐng)域來(lái)說(shuō)可能不會(huì)成為大勢(shì)所趨。在保持快節(jié)奏技術(shù)更迭的基礎(chǔ)上，天然不適合開發(fā)一些比較高成本的工作，這就決定了不可能很深入地做大量功能，而沒(méi)有足夠的投入，就沒(méi)有趨勢(shì)。但是在一些垂直領(lǐng)域，比如中后臺(tái)、無(wú)線各子領(lǐng)域等，可視化輔助編程可能會(huì)發(fā)展得很好，因?yàn)槿ψ有×?，可以有成本、有時(shí)間、有能力去做更深入的工作，把這些垂直領(lǐng)域的體驗(yàn)和提效做到極致。
關(guān)于未來(lái)大前端領(lǐng)域的趨勢(shì)，我們也請(qǐng)陳成談了談他的看法：
搭建系統(tǒng)開始發(fā)力：經(jīng)過(guò)幾年的積累，很多搭建系統(tǒng)的基礎(chǔ)能力都積累得差不多了，沒(méi)死的也都找到了自己的定位，陳成認(rèn)為 2020 年搭建系統(tǒng)會(huì)開始發(fā)力，在一些垂直領(lǐng)域發(fā)揮巨大的價(jià)值；
垂直領(lǐng)域框架開花：目前螞蟻金服前端團(tuán)隊(duì)也在做垂直領(lǐng)域的框架，對(duì)于團(tuán)隊(duì)提效能發(fā)揮意想不到的效果?，F(xiàn)在通用框架層發(fā)展沒(méi)有那么快了，去年和今年并沒(méi)有出現(xiàn)那么多新技術(shù)，但在垂直領(lǐng)域則可以做很多事。比如中后臺(tái)，經(jīng)過(guò)幾年的積累，已經(jīng)知道什么是好的方式。另外，把圈子畫小就可以具體的事情做到極致。再借助可視化輔助編程，可以把這個(gè)效果進(jìn)一步放大；
微前端有更多的適用場(chǎng)景：今年微前端特別火，D2 上也有關(guān)于微前端的專題，但現(xiàn)在更多的是在中后臺(tái)的處理，陳成認(rèn)為未來(lái)微前端會(huì)在更多的場(chǎng)景中發(fā)力，比如無(wú)線，比如前端的插件體系（Figma）。
陳成，花名云謙，螞蟻金服高級(jí)技術(shù)專家，入職阿里已有 10 年。之前在淘寶，負(fù)責(zé)過(guò)淘寶首頁(yè)、寶貝詳情、購(gòu)物車、下單等很多重要業(yè)務(wù)的前端部分，然后轉(zhuǎn)崗到支付寶，負(fù)責(zé) spm、支付寶開發(fā)者工具的開發(fā)，以及創(chuàng)建了 dva，roadhog，babel-plugin-import，umi 等。擅長(zhǎng)的領(lǐng)域有工具、前端框架以及前端性能等，熱衷于開源，大家可以在 https://github.com/sorrycc 找到他。
聯(lián)系客服
