低程式碼引擎半歲啦,來跟大家嘮嘮嗑...

阿里巴巴終端技術發表於2022-11-28

作者:劉菊萍(絮黎)

之前低程式碼引擎一直是在阿里集團內部進行孵化的,對外開源算是一次新生。從2022年3月23日開源至今,我們的低程式碼引擎已經半歲了,希望借這個機會來跟大家嘮嘮嗑。

不知道大家是不是已經把低程式碼引擎用到生產環境了?當然估計大家也遇到了很多問題,畢竟 issues 越來越多...今天呢,我們倒也不是來幫大家解決 issues 的,主要是想跟大家總結一下上半年的工作,當然也想彙報一下我們後續的規劃,讓大家知道低程式碼引擎後續發展的藍圖,讓大家好判斷自己的低程式碼平臺和我們的低程式碼引擎規劃上是否能匹配。

低程式碼引擎過去半年的動態

低程式碼引擎在過去的半年還是發生了很多事情的。

低程式碼引擎出生了

低程式碼引擎在 3.23 號出生了,隨著一起出生的還有我們的《低程式碼引擎技術白皮書》。在半年後的今天有 8000 多哥哥姐姐們喜歡它,真的讓我們很開心。

低程式碼引擎的兄弟姐妹

當然低程式碼引擎出生後,我們的 Fusion 低程式碼物料、精品外掛等兄弟姐妹也都一起正式跟大家見面了。

並且在大家的熱情下,我們在開源之後也對外開放了 Antd 的低程式碼物料。

之後我們也還會繼續加油,讓更多兄弟姐妹也出來見見市面,比如我們的自然佈局相關物料 pro-layout。

低程式碼引擎的小夥伴們

低程式碼引擎也認識了很多新的小夥伴,這些小夥伴都很熱心。有幫忙回答 issue 的小夥伴;有幫忙提 PR 的小夥伴;有在社群貢獻生態的小夥伴;更有長期參與維護的小夥伴。感覺我們的隊伍越來越強大了。看看這些小夥伴們都幹了什麼:

  • twinkle77、haloworld007、Immanding 實現了一套 formily 和 Ant Design Pro 的低程式碼物料
  • Dogtiti 基於 next 實現了高階元件低程式碼物料
  • keuby 實現了基於低程式碼引擎的 Vue 渲染器和介面卡
  • twinkle77 小夥伴長期參與到資料來源外掛的維護中,給了我們很大的幫助
  • ...

當然還有很多小夥伴給我們貢獻程式碼,這裡就不一一感謝了。

低程式碼引擎協議對外營業了

低程式碼引擎的三大協議是引擎的基礎,我們也已經把它放到開源倉庫中了,後面大家也可以對協議提出修改意見並提 PR 了。

低程式碼引擎系列文章和分享

我們也在持續釋出一些文章,並在一些大會上進行分享,期望能把我們的思考/實踐分享給大家。

這半年的總結大概就是這些了,接下來我們還會再接再厲的~

未來的低程式碼引擎是什麼樣呢

低程式碼引擎現在剛半歲,還在茁壯成長中,但是正如一個小孩想成長成一個大人,我們低程式碼引擎也在幻想自己長大之後是什麼樣的。低程式碼引擎期望成長起來的自己是什麼樣的呢:

  • 所有流行的物料庫都有對應的開箱即用的低程式碼物料,比如包括 Ant Design、Ant Design Mobile、Element 等等。
  • 支援 Vue、React、Angular 等等流行前端框架的出碼和渲染,甚至還有 Rax、Taro、React-Native 等等。
  • 可以提供多種常見的解決方案,比如邏輯編排、圖編排、絕對佈局畫布、小程式解決方案、跨端解決方案等等。
  • 可以提供不同規模的低程式碼解決方案,包括元件級別、區塊級別、頁面級別和應用級別。包括他們的出碼、渲染和編排等等。
  • 對於存量頁面和低內碼表面之間的問題,還需要配合微前端整合、也能提供各種混合研發方式等等。
  • ...

為了成長成這樣的低程式碼引擎,低程式碼後續的技能點主要點在這幾個方向:簡單、可靠、強大、剋制。

簡單

低程式碼引擎自己也知道現在它的學習門檻還是比較高的,對於初級前端和非前端來說,上手的過程更加困難。所以為了讓更多的小夥伴能使用上低程式碼引擎,我們期望未來的低程式碼引擎使用起來是簡單的,它會提供越來越簡單的使用方式,最終對於開發者來說,大幅度減少低程式碼引擎的難度,讓低程式碼平臺的定製更加簡單。

為了實現這個目標,一方面我們會把我們的文件持續的進行完善並且社群化維護。另外一方面我們會進一步藉助社群小夥伴的力量,透過線上化的外掛、物料等市場,將社群的能力整合到一起。也會提供設計器的視覺化配置方式,未來也可以透過低程式碼的方式開發低程式碼平臺了。

可靠

讓使用者可以無憂使用最新版本,這應該是開源框架最基本的能力了,低程式碼引擎也需要制定新的策略來滿足這一原則。

  • 低程式碼引擎的新能力都會基於標準協議,一切改動協議先行
  • 低程式碼引擎會保證架構的穩定性,也會準守 Semver 的標準,讓社群小夥伴放心升級
  • 完整的灰度策略,在釋出正式版本之前會在阿里集團內部使用量最多的低程式碼產品上穩定執行

為此我們後續的運營狀態也會微微調整

  • 社群群(微信群和釘釘群)還是維持現狀,簡單的問題小助手會回答,也有熱心的小夥伴回答,真的很感激這些熱心的小夥伴,當然比較複雜的還是建議 issue 提問。除此之外我們會再維護一個貢獻者群,貢獻過的小夥伴都可以加入我們。
  • 穩定的發版節奏,每 2-3 週會穩定釋出新版本,迭代節奏穩定,每年 2 個比較大的 release。
  • 每年 1-2 次線上 meetup。

強大

低程式碼引擎未來會提供更多強大的能力來支援各種低程式碼平臺的場景,包括但不限於:

  • 支援元件級別、區塊級別、頁面級別和應用級別的設計能力,包括他們的出碼、渲染和編排
  • 支援多種前端框架的出碼和渲染,例如 Vue、React、Angular、Rax、Taro、React-Native...
  • 支援越來越多的解決方案,比如邏輯編排、圖編排、絕對佈局畫布、小程式解決方案、跨端解決方案等等。
  • 支援不同低程式碼平臺的定製能力,包括主題定製、畫布定製等等

最近半年低程式碼引擎在能力上的規劃在文章的後半部分,這裡不做過多的介紹。

剋制
當然,低程式碼引擎也需要有一些限制,不能什麼都做也不能什麼都不做。我們需要給低程式碼引擎和官方生態上制定一個設計原則。指出來我們未來會做什麼以及不會做什麼。

低程式碼引擎設計原則:

  • 低程式碼引擎是對協議的實現和擴充套件的支援,且只做協議的實現和擴充套件支援。
  • 低程式碼引擎的擴充套件能力開放上是剋制的。在互動形態上 Skeleton 由官方管控,不提供定製能力,包括各區域基本的互動方式、以及彈窗規範等:低程式碼引擎設計器需要作為頁面最外層來使用,不作為頁面的一部分嵌入式使用。
  • 為了給生態提供更好的通用性和穩定性保障機制,低程式碼引擎的相關生態的定義和使用會更加規範和基於顯示宣告,包括外掛、設定器和物料等等。

低程式碼引擎官方生態原則:

低程式碼引擎的生態分為官方維護和社群維護兩種,目前宣告的是後續在官方生態上的原則:

  • 官方生態會提供 80% 最常用的精品生態外掛,更多的外掛需求由小夥伴們自己擴充套件
  • 官方生態主要提供及維護一份精品物料
  • 官方生態未來會提供多種場景的能力,包括中後臺、移動應用、小程式、邏輯編排等等
  • 官方生態會提供一系列的周邊能力,包括具有可流通的生態外掛市場。

低程式碼引擎近期會做什麼

低程式碼引擎有了長遠的願景和目標,為了更加靠近我們的目標。讓我們來看看低程式碼引擎接下來的半年都會做什麼呢。

應用級編輯器

目前低程式碼引擎在設計上是需要在單獨的頁面上使用的,他的擴充套件功能也都是適用於頁面設計的。

但是大多數的場景中,我們都不是隻設計一個頁面,我們還有導航配置、依賴配置、低程式碼元件和邏輯編排等等應用級別需要的功能。

甚至我們希望在低程式碼搭建的過程中能有 VsCode 般絲滑的體驗。快速切換頁面,快速配置應用能力等等。而不是現在開發一個頁面和一個低程式碼元件就需要開啟至少三個新的標籤頁。如果開發的頁面和元件更多,需要開啟的標籤頁也就越多。

因此,在使用低程式碼平臺時,我的瀏覽器常常就成為了這樣的。

為了解決這些問題,我們提出來專案級別設計器的擴充套件方案。

  • 引擎主框架 Skeleton 能力升級,支援專案級別的擴充套件方案,提供更多的擴充套件點。
  • 引擎多畫布上下文快速切換,正如 VsCode 檔案會有 JS、JSX、TS 等不同型別,對於不同型別的檔案有不同的編輯狀態和提示。對於一個應用來說,我們的檔案也會有多種型別,例如:表單頁面、邏輯編排、低程式碼元件、中後臺頁面等等。因此引擎需要提供多畫布切換以及共存的能力,這樣才能更好的完成應用的搭建能力。

未來應用級別的能力可能是這樣的,基於這樣的擴充套件能力,我們就可以擴充套件出應用級設計器了。

除此之外我們在 S2 也還會探索和研發的能力有,後續也可能會開源或分享我們的解決方案:

  • 圖編排能力,透過提供圖編排的能力,我們的邏輯編排能力也可以視覺化了。
  • 主題定製能力,可以對設計器的主題進行定製,設計器再也不會千篇一律了。
  • ...

開發更多社群周邊能力

一款新的免費的低程式碼產品

在專案開源後我們發現,很多使用者使用我們的 DEMO 來進行頁面搭建來自用,但是 DEMO 實際上還不具備這樣的能力。經過考慮,我們在接下來的半年會提供免費的一款低程式碼產品供大家簡單搭建頁面使用,當然免費的就希望大家答疑上手下留情,多多互助。

低程式碼生產元件能力

目前社群的低程式碼元件都是 Pro Code 元件,相當於物料的生產還沒有低程式碼化。而我們的低程式碼元件在阿里內部也已經有了將近一年的實踐,接下來我們也會在造物平臺上上線,讓大家可以透過低程式碼的方式來生產低程式碼元件。

這個主題也會在接下來的 GMTC 大會上進行分享,有興趣的小夥伴可以關注一下。

低程式碼設計器定製 Playground

透過 Playground 我們可以線上快速插拔我們的外掛、物料和設定器等等,所見即所得。這讓低程式碼設計器的研發低程式碼化成為了可能,也讓低程式碼平臺的定製越來越簡單。

當然官方和社群的外掛、物料、設定器也有了視覺化的展示空間。

心有餘而力不足部分

還有很多事情我們也都是希望能做,但是由於優先順序一直沒法安排的事情。在這裡我們先列出來,有需求的小夥伴可以參與進來。

  • 更多場景的 demo,這些 demo 包括不同的腳手架(ice、umi、egg、qiankun)、不同技術棧(Rax、React、Vue)、不同的應用場景(PC、H5)等等。
  • 更多的物料生態,現在已經有了 formily、Ant Design、Next Pro、Fusion。當然我們還有很多沒有實現或者我們沒有感知到的,例如 antd-mobile、Element、Semi Design、Element for React,甚至在支援 Vue 技術棧之後,Element 等元件庫也需要低程式碼化。
  • 更多技術棧的支援,包括呼聲最高的 Vue,還在等社群大佬開源。

當然我們也會持續建設越來越多的教程文件、越來越多的精品外掛等等,也希望有小夥伴能參與進來,幫助我們加快程式。

相關文章