淺談 Fiori Fundamentals 和 SAP UI5 Web Components 的關系

汪子熙 2022-05-14 14:55:45 阅读数:670

fiorifundamentalssapui5ui

最近工作中,筆者受邀請給一個團隊做了 SAP 開發技術的演進曆史。我的講座按照下列幾個主題進行的介紹:

其中 SAP 的技術回顧和演進,我的思路就是從前後臺兩方面分別介紹。
我畫了一張非常簡單的圖:

根據筆者從社區上已經發布的信息來看,Fiori 的兩個發展方向,我個人概括為:

(1) 兼容並蓄,即通過 Fiori Fundamentals,讓使用非 UI5 開發框架的前端開發人員,用其喜愛的技術,也能開發出符合 Fiori UX 的應用。

(2) 輕裝上陣,即通過 SAP UI5 Web Components,既能繼續提供像之前 UI5 控件庫那些開箱即用的眾多 UI 控件,又避免了前端應用對UI5框架的依賴。

我們來分別了解一下上面提到的這兩個新概念。

Fiori Fundamentals

看看 SAP 官網上的權威定義

上面定義的一些關鍵點:

(1) Fiori Fundamentals在前端應用裏扮演著一個輕量級展現層的角色,可配合Angular, React和Vue等前端框架一起使用。

(2) Fiori Fundamentals不是一項新的UI技術,更不會取代UI5,而是一個CSS和HTML標簽的集合,使得開發人員能使用其偏愛的UI框架去開發具有 Fiori UX 風格的應用。

Fiori Fundamentals 是一系列CSS和 HTML 標簽頁的集合,我們來看一個具體的例子。

這是 Fiori Fundamentals 部署在 CDN 上的 CSS:

這是SAP Fiori Fundamentals 幫助文檔裏提到的繪制錶格的標簽:

在 Vue 應用裏 消費這些標簽的方式:

至於為這個標簽繪制而成的錶格添加事件處理機制,其方法和純粹的 Vue 應用完全一致,因此一個傳統的 Vue 開發人員,借助 Fiori Fundamentals 的幫助,幾乎不需要任何額外的學習就能够進行 SAP Fiori 應用的前臺界面開發。

SAP UI5 Web Components

最近在 SAP 社區上有一篇關於 Web Components 的博客:UI5 Web Components - the Beta is there:

如博客文章題目所說,SAP 最近發布了 UI5 Web Components 的 Beta 版本,並邀請廣大SAP 生態圈的開發人員試用並提出意見。

SAP UI5 Web Components,是 SAP 將之前 SAP UI5 控件庫裏的控件,按照 Web Components 標准規範重新實現後的產物。

相信了解 SAP UI5 的朋友們,看了我上面這句描述,腦子裏會冒出這些問題:

  1. 什麼是 Web Components 標准?

  2. SAP 為什麼要做這個重新實現的事情?

  3. 重新實現後的產物到底是個什麼東東?

關於第一個問題,直接訪問 Web Components 的官網即可找到答案。程序猿們都懂的,org結尾的網站最喜歡定義各種幾百頁甚至上千頁的技術規範,Web Components 也不例外:

https://www.webcomponents.org/introduction

前端組件化一直是前端生態圈很火熱的討論話題之一,像前端三駕馬車 Angular,React 和Vue 都有自己的組件化實現,而 webcomponents.org 上定義的規範,其實就是給出了一個標准,只有滿足這個標准裏的實現,才能算是一個通用的組件化實現,才能被所有現代瀏覽器支持。

這個規範的內容也托管在 github上的:

裏面包含四大標准 Shadow DOM,Custom Elements,HTML Templates 和 CSS changes,SAP UI5 Web Components 的實現當然也滿足這些標准。

第二個問題,SAP 開發 UI5 Web Components 的動機。

筆者個人的看法:給客戶和 Partners 提供一種更靈活的使用 UI5 控件的方式,避免對 UI5 框架的依賴。

舉個例子,如果我們想使用 UI5 控件庫裏提供的 button 控件,就算只在 XML 視圖裏寫簡單的一行定義,

而借助 SAP UI5 Web Components,開發人員根本不需要導入 UI5 框架,就能直接使用 UI5裏的控件。SAP UI5 Web Components 能用於任何前端框架中,即下圖中高亮的最後一句話。

此時自然需要回答第三個問題了。SAP UI5 Web Components 到底是個什麼東東?上圖傳達的重點:

  1. SAP UI5 Web Components並不是基於UI5框架的。換句話說,和UI5框架沒有任何依賴關系,可以獨立使用。

  2. SAP UI5 Web Components 並不是SAP UI5框架的接替者,而應看作後者的一種補充。

  3. 將 UI5控件庫提供的控件在HTML層級暴露給消費者,而非傳統方式下的API層面暴露方式。如此一來,UI5 Web Components可以不依賴於UI5框架,能直接用於其他的前端框架。

看個具體的例子:

在瀏覽器裏打開下面的HTML頁面,

會看到一個UI5 按鈕。點擊後彈出這個按鈕實例的innerHTML屬性的值。這是一個最簡單的SAP UI5 Web Components的Hello World例子。

例子裏我們使用了SAP UI5 Web Components自定義的標簽 <ui5-button>. 對於前端應用開發人員來說,這個自定義的標簽和 W3C 裏的button標簽沒有任何不同,至少從消費方式上來說完全一致。

關於 UI5 Web Components 裏諸如 <ui5-button> 這類自定義標簽的詳細說明,可以查看SAP 幫助文檔:

運行時,和在UI5框架裏使用控件一樣,仍然有一個專門的ButtonRenderer負責生成按鈕原生的HTML代碼:

從運行時生成的HTML源代碼我們不難發現,UI5 Web Components自定義的HTML標簽只是起著占比特符(place holder)的作用,真正承載運行時用戶可以與之交互的實際按鈕,還是通過上圖ButtonRenderer生成的HTML原生button標簽。

需要强調的是,通過上述ButtonRenderer生成的運行時按鈕實例,仍然滿足使用UI5框架的傳統方式繪制的控件一樣的特性,比如傳統方式下SAP保證的所有產品標准,像Accessibility,Internationalization這些,在SAP UI5 Web Components裏仍然繼續支持,無需應用開發人員額外的編程實現。

本地用 npm install @ui5/webcomponents 命令安裝 UI5 Web Components 之後,

就可以找出裏面最簡單的組件實現,Button.js, 來學習SAP是如何基於Web Components標准,采用ES6支持的mobule和class等特性實現一個自定義標簽的。

最後,SAP UI5 Web Components的使用場景是什麼?

適用場景有二:

  1. 在沒有使用前端框架開發而成的簡單靜態頁面裏,如果想添加一些能够提供用戶交互的控件,可以考慮SAP UI5 Web Components。

  2. 在已有的基於其他前端開發框架的Web應用裏,如果需要一些能與用戶交互的控件而又不想重複造輪子,那麼可以到SAP UI5 Web Component官網上去找找。

另一方面,SAP UI5框架仍然是SAP推薦的開發具有企業級複雜度和響應式前端應用的方案。

最後,有朋友可能會有疑問,fundamental-vue 到底算 Fiori Fundamentals 還是 Web Component?
一張圖來回答:

總結

本文介紹了 SAP Fiori 技術演進的兩個前沿方向:Fiori Fundamentals 和 SAP UI5 Web Components. 前者允許前端開發人員使用自己喜歡的框架開發出具有 Fiori UX 的應用,後者在不依賴 SAP UI5 框架的前提下,提供了大量開箱即用的控件。

版权声明:本文为[汪子熙]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/134/202205141454016579.html