精讀《Microsoft Power Fx》

黃子毅發表於2021-09-27
ROS

Power Fx 是一門語言，雖然它被推薦的場景是低程式碼，但我們必須以一門語言角度看待它，才能更好的理解。

Power Fx 的建立是為了更好的輔助非專業開發人員，因此這門語言被設計的足夠簡單，希望這門語言可以同時服務於專業與非專業開發者，這是個非常崇高的理想。

本週我們就隨著 Microsoft Power Fx 概述 這篇文章，詳細瞭解一下這門語言是怎麼做的。

概述

Notify("this is a problem", Error)

這就是 Power Fx 語言的一個例子，乍一看沒什麼特別的。

Power Fx 描述的是畫布應用公式語言，也就是說，這個程式語言是專門為畫布引用設計的。

那什麼是畫布應用呢？低程式碼、網站搭建、BI、Web Excel 這些統統都是畫布應用，所以 Power Fx 其實是一門適應畫布場景的語言，直接面向使用者。

那這種畫布語言應該具備什麼特性呢？Power Fx 團隊已經有了一些思考：

  • 簡單：該語言設計本著簡介簡單的原則，這樣才方便非開發人員上手。
  • Excel 一致性：可以幫助 Excel 開發者做知識遷移，一部分是和微軟 Excel 太成功了有關，另一方面 Excel 表示式在畫布語言領域探索確實深入，有可取性。對不能滿足的嘗試借鑑 SQL 這種宣告性語言。
  • 宣告性：這個最重要，即描述做什麼，而不是如何或何時做。這個有點像 Jquery 轉到 React 模式時，過程式程式碼與資料驅動程式碼的區別。
  • 函式式：函式式在靈活性和易用性上有天然優勢，且無副作用的特性也利於理解邏輯與編譯優化。
  • 組合：即利用函式式這個特性，推薦利用已有函式組合成新功能，而不是將比如 Sort、Filter 等功能在每個元件上重複實現或者重複配置一遍。
  • 強型別：型別對可維護性至關重要，再強大的低程式碼語言，如果沒有型別支援，都不能稱為易上手。
  • 型別推理：可以自動推斷型別。這個和強型別一樣，有點 TS 的感覺，主要方便書寫簡潔程式碼。
  • 不推薦物件導向：既然推薦了函式式，當然不推薦物件導向了。
  • 可推展：開發者要擁有擴充函式與元件的能力，還要支援通過 Javascript 來擴充。
  • 對開發人員友好：這門語言還要在與前面原則不衝突的情況下，儘量對開發人員友好。
  • 語言的迭代：即當語法變更時，要幫助使用者平滑遷移，畢竟這門語言直接面向普通使用者而非專業開發者。Power Fx 提供了這個能力，對每個文件進行版本標記，並在升級後，通過 “相容轉換器” 自動將老語法升級為新語法。
  • 無 undefined 值：為了簡化語言帶來的理解成本，移除了 undefined 值這個特定。

所以，基於這些考慮的 Power Fx 設計出來是這樣的：

  1. 實時性

即無論任何 UI 或語法錯誤，都不會阻塞其它正常節點的工作，同時程式碼效果與錯誤資訊實時反饋。這保證了在畫布應用編寫邏輯的良好體驗，因為本身畫布應用就是實時的，低程式碼能力本身也要與畫布實時性渾然一體。

<img width=500 src="https://z3.ax1x.com/2021/09/25/4sqx1g.gif">

  1. 低程式碼特徵

即任何 UI 元件都不需要描述類似 onChange 之類的回撥，它們只要申明使用的變數，當這些變數變化時，程式會自動、非同步、按需的更新使用到的元件。

  1. 與無程式碼結合

所謂無程式碼，就是通過 UI 表單視覺化的對畫布應用進行配置。

與無程式碼的結合方式是，任意屬性都可以用低程式碼，即表示式編寫，但也提供了 UI 表單供編輯，其中 UI 表單編輯後，可以用低程式碼二次加工，而用低程式碼編輯的屬性，表單就無法編輯了，此時點選表單編輯會跳轉到低程式碼編輯框。

精讀

建立一門不用學習就能上手的程式語言，需要足夠簡單，即從使用者角度來理解事物：比如使用者不知道回撥函式等概念，那就遮蔽所謂的回撥函式概念，讓一切都是表示式。

這些表示式看起來很簡單，也符合直覺，並且會自動驅動 UI 重繪，即宣告式程式設計。

下面我們來討論幾個有意思的點：

為什麼不用 Js

大部分畫布應用都是指 Web 應用了，即便是 Excel，現在也早已轉型到 Web Excel，就微軟來說，早早轉型到 Office Online 就能看出來。

然而 Js 是瀏覽器內建支援的指令碼語言，且上手成本也比較低，其實很多低程式碼平臺內建的程式語言就是 Js，其好處是實現成本低（沙箱甚至 new function），而 Power Fx 在瀏覽器平臺最終也要轉換為 Js 執行，費這麼大勁創造一門新語言，無非是覺得 Js 不夠 “零門檻”。

首先第一點是不符合 Excel 表示式規範，我們不要忘了 Power Fx 也是有小心機的，它想利用 Excel 生態擴大使用者群，所以第一目的是相容 Excel 語法。比如 Excel 使用 & 連結字串，而 Js 使用 + 連線，雖然我覺得顯然 + 號更自然，但微軟覺得還是要符合 Excel 使用者習慣。說實話在這一點上，撇開 Excel 的語法，我很難看出為什麼 & 連線字串就 “更易上手”，而 + 連線字串 “更適合程式設計師使用”。

但有些是認可的，比如移除了 undefined 值，確實讓語言更好理解。

也許未來 Power Fx 會更進一步，引入類 SQL 描述性的語法，像寫自然語言一樣程式設計，在這種程度上，配合強型別提示，在特定場景會比 Js 更好用。

提供內建函式

Js 提供了大量內建函式，這似乎不是 Power Fx 的專利，但 Power Fx 提供了許多 UI 級別的函式，這可比 Js 點到為止的 alert 強多了。

Power Fx 提供了 Confirm、Notify 用於彈出提示窗供使用者輸入，並且就算要形成邏輯，也只需要幾乎一行程式碼：

If( Confirm( "Are you sure?", {Title: "Delete Confirmation"} ), Remove( ThisItem ) )

可以看到，這裡充斥著非同步操作：

  • 等待使用者輸入。
  • 刪除元素。

但這些內建函式間的組合將非同步效果轉換為同步寫法，這大大降低開發成本。

另一類內建函式則封裝了業務屬性，比如 User 可以獲取當前使用者資訊。本來獲取使用者資訊就需要程式碼開發，但低程式碼平臺本身就實現了全套賬號體系，因此低程式碼平臺可以直接提供如 User().Email 函式訪問當前使用者的郵箱地址。

還有諸如 Reset 函式，可以重製控制元件為預設值，比如 Reset( TextInput1 )，這其實是把平臺提供的所有上層能力抽象成低程式碼函式供使用者呼叫，這樣使用者只要付出一點點學習成本，就可以獲得比簡單 UI 強大的多的應用編輯能力，這非常值得我們學習。

更多公式函式可以參考 文件。

提供對錶的操作

對錶的操作 讓應用資料管理可以和 Excel 同一概念來看待了，這個統一方式就是，把資料抽象成表。Power Fx 提供了系列函式用於表處理：

AddColumns( 
    Filter( Products, 'Quantity Requested' > 'Quantity Available' ), 
    "Quantity To Order", 'Quantity Requested' - 'Quantity Available'
)

這些函式可以跨語言操作 Excel、Sql Server 等資料來源的資料，學習成本與 SQL 類似，其實到這一步，對低程式碼使用者的要求也不低，至少和熟練使用計算公式的 Excel 使用者相當。

總結

UI 編輯能力侷限但易上手，程式碼能力最強但難上手，Power Fx 給我們提供了一種折中方案，即提供一種 “高度封裝的簡化程式碼” 供使用者使用。

縱觀其它低程式碼平臺，也有一類採用了另一種折中方案，即超強的複雜編輯 UI，登峰造極的產物便是邏輯編排，這個方向在特定領域也是不錯的選擇，參考： 精讀《低程式碼邏輯編排》。

討論地址是：精讀《Microsoft Power Fx》· Issue #355 · dt-fe/weekly

如果你想參與討論，請 點選這裡，每週都有新的主題，週末或週一釋出。前端精讀 - 幫你篩選靠譜的內容。

關注 前端精讀微信公眾號

<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">

版權宣告：自由轉載-非商用-非衍生-保持署名（創意共享 3.0 許可證）

相關文章