Categories
程式開發

大前端10倍提效破局利器:可視化輔助編程會成為大勢所趨嗎?


提效是企業級前端框架非常重要的目標之一,也是2019年螞蟻金服前端團隊工作的重點。螞蟻金服前端團隊希望藉助框架和工具實現10倍提效,即一個人就可以做過去十個人做的事情,這就需要做一些能破局的工作。為此,螞蟻金服嘗試在Pro Code 的基礎上做可視化輔助編程( Visual Assist Programming ),借助和框架、平台、組件和物料市場的互補,以及類微前端的架構方案來提供插件機制,提升開發者的研發效率以及降低上手門檻。可視化輔助編程與大家更常談及的可視化編程有何不同?實踐過程中存在哪些技術上的挑戰?它是否會成為未來的主流趨勢?近日,InfoQ記者在 GMTC 全球大前端技術大會(深圳站)2019 期間採訪了螞蟻金服前端高級技術專家陳成(花名云謙),對上述問題做了一些探討。

可視化輔助編程一點都不Low

根據阿里前端技術委員會主席圓心分享的前端發展歷程,從2016年開始,前端進入到中後台重塑的時代,從原有的 Pro Code 逐步演進到Low/No Code。通常人們談及Low/No Code,總會提起“非專業開發人員”(citizen developer):借助可視化編程工具,非專業開發人員無需具體編寫代碼,只依靠圖形化界面就能創建企業應用。這成為很多專業開發人員對可視化編程嗤之以鼻的原因。

在陳成看來,代碼是基礎,可視化功能應該作為代碼的輔助,但不能替代代碼。對於PRO CODE(寫很多代碼)和 LOW CODE(寫一點點代碼),陳成更傾向前者,只是服務PRO CODE 的 CLI 工具在某些場景下可能不夠直觀,所以需要可視化的輔助。

對於可視化編程和寫代碼優劣勢,下面是一個對比:

大前端10倍提效破局利器:可視化輔助編程會成為大勢所趨嗎? 1

(左:可視化搭建的優勢,右:寫代碼的優勢)

那是否能夠兩者兼得呢?基於這一需求,螞蟻金服2019年開始探索可視化輔助編程並推出了開源的可視化輔助編程工具Umi UI。團隊一開始的主要出發點是提效,但做著做著發現能否提效的關鍵其實並不在於可視化輔助工具,而在於封裝,針對領域場景的封裝能帶來實實在在的提效,而藉助可視化輔助工具,則可以讓這一效果進一步放大。

陳成告訴記者,可視化編程和可視化輔助編程是兩個概念,關鍵在於輔助這兩個字。前者的產物通常是一個大配置,後者則是以代碼為基礎,通過工具輔助開發者更快更好地產出代碼。這是完全不同的兩條路,從不同的思路去解決相同的問題。

可視化輔助編程對前端領域的價值主要體現在,讓開發者既能磨煉吃飯的技能,用 Pro Code 的方式編碼;又能利用搭建系統的交互性,高效、低門檻、一體化地完成工作。

還有一點是想像空間,可視化輔助編程可以讓開發人員在做工具的時候,思維不會局限在命令行里,而是可以延伸到視圖交互層,以及和頁面元素的直接交互。

技術挑戰:插件和運行態

螞蟻金服在可視化輔助編程的實踐中遇到的技術挑戰,陳成認為主要是以下兩點:

  • 瀏覽器裡的插件體系。螞蟻金服採用類微前端的解決方案,在瀏覽器裡實現了一套插件體系,讓開發者可以通過npm包的形式擴展Umi UI的功能。

大前端10倍提效破局利器:可視化輔助編程會成為大勢所趨嗎? 2

  • 運行態能力。螞蟻金服通過ast來實現Umi UI的運行態能力,支持多種資產添加方式,包括獨立界面添加、運行態添加、編輯器拖入等。其中要注意的一點是,讀寫兩側的解析邏輯需要保持一致。另外,需要時刻保持克制和小心,因為運行態能力需要在開發模式下侵入用戶代碼,一不小心就可能會對用戶代碼造成影響。

大前端10倍提效破局利器:可視化輔助編程會成為大勢所趨嗎? 3

可視化輔助編程不會成為大前端的主流

除了螞蟻金服的Umi UI,在可視化輔助編程上進行相關嘗試的還包括Vue-cli UI、Angular Console和ice,其中ice起步比較早,一路走來踩了不少坑,也很有經驗,最近在做的ice 4.0很值得期待。

當前可視化輔助編程依然是一種偏小眾的開發方式,但陳成認為未來情況可能會有所改變,這要看可視化輔助編程工具做得怎麼樣以及社區發展的情況。難點在於用戶的使用習慣很難改變,只要找到一些實實在在可以讓用戶提效的破局點才可能讓用戶願意使用。但陳成對此表示樂觀:“其實會有些困難,但如果不困難,要我們做啥呢?”

可視化輔助編程優點很明顯,但也存在局限,陳成認為其中比較大的局限是開發成本。之前開發一個功能,寫命令行部分就行了,現在還要提供可視化輔助的交互版本,並且要保證質量,不僅好用,還要好看,開發成本翻一倍可能都不止。

受限於開發成本,再加上前端技術發展太快,可視化編程對於整個前端領域來說可能不會成為大勢所趨。在保持快節奏技術更迭的基礎上,天然不適合開發一些比較高成本的工作,這就決定了不可能很深入地做大量功能,而沒有足夠的投入,就沒有趨勢。但是在一些垂直領域,比如中後台、無線各子領域等,可視化輔助編程可能會發展得很好,因為圈子小了,可以有成本、有時間、有能力去做更深入的工作,把這些垂直領域的體驗和提效做到極致。

關於未來大前端領域的趨勢,我們也請陳成談了談他的看法:

  • 搭建系統開始發力:經過幾年的積累,很多搭建系統的基礎能力都積累得差不多了,沒死的也都找到了自己的定位,陳成認為2020年搭建系統會開始發力,在一些垂直領域發揮巨大的價值;
  • 垂直領域框架開花:目前螞蟻金服前端團隊也在做垂直領域的框架,對於團隊提效能發揮意想不到的效果。現在通用框架層發展沒有那麼快了,去年和今年並沒有出現那麼多新技術,但在垂直領域則可以做很多事。比如中後台,經過幾年的積累,已經知道什麼是好的方式。另外,把圈子畫小就可以具體的事情做到極致。再藉助可視化輔助編程,可以把這個效果進一步放大;
  • 微前端有更多的適用場景:今年微前端特別火,D2上也有關於微前端的專題,但現在更多的是在中後台的處理,陳成認為未來微前端會在更多的場景中發力,比如無線,比如前端的插件體系(Figma)。

採訪嘉賓介紹

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