Fiori Fundamentals和SAP UI5 Web Components

i042416發表於2019-02-24

這周有位同事邀請我給團隊講一講SAP技術的演進歷史，所以我準備了下面幾個主題來介紹。

Fiori Fundamentals和SAP UI5 Web Components

其中SAP的技術回顧和演進，我的思路就是從前後臺兩方面分別介紹。

我畫了一張非常簡單的圖：

去年5月我寫過一篇文章： SAP UI和Salesforce UI開發漫談，簡要回顧了SAPUI技術的發展，從最古老的SAP GUI繪製介面，到Webdynpro / WebUI再到現在廣泛使用的Fiori UX。當時這篇文章介紹到Fiori(UI5)就嘎然而止了，如今大半年過去了，我們繼續聊聊Fiori的發展動向。

根據Jerry從SAP社群上已經發布的資訊來看，Fiori的兩個發展方向，我個人概括為：

1. 相容幷蓄，即通過Fiori Fundamentals，讓使用非UI5開發框架的前端開發人員，用其喜愛的技術，也能開發出符合Fiori UX的應用。

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

我們來分別瞭解一下這兩個新概念。

Fiori Fundamentals

看看SAP官網上的權威定義：

https://experience.sap.com/news/democratizing-sap-fiori-with-fiori-fundamentals/

Jerry在上圖把最關鍵的資訊都用紅色高亮出來了。重點：

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

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

同樣，Jerry去年年底寫的另一篇文章 SAP Fiori + Vue = ？，介紹的其實就是Fiori Fundamentals針對於Vue的實現。

剛剛提到的重點2，Fiori Fundamentals是一系列CSS和HTML標籤頁的集合，那麼我們到Jerry的這篇文章裡介紹的例子去找找。

這是例子裡引用的CSS：

這是SAP Fiori Fundamentals幫助文件裡提到的繪製表格的標籤：

在我的Vue應用裡如何消費這些標籤：

至於為這個標籤繪製而成的表格新增事件處理機制，其方法和純粹的Vue應用完全一致，因此一個傳統的Vue開發人員，藉助Fiori Fundamentals的幫助，幾乎不需要任何額外的學習就能夠進行SAP Fiori應用的前臺介面開發。

SAP UI5 Web Components

SAP德國的UI5開發人員 Peter Muessig 最近在SAP社群上發表了一篇部落格： UI5 Web Components - the Beta is there ，大家可以通過本文末尾的"閱讀原文"來閱讀他的原文。

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

Peter的文章不長，但是為了方便不喜歡讀英文的朋友們也能快速瞭解這個UI5 Web Components是個什麼東東，Jerry還是把裡面一些要點用我自己的語言表述出來。下面的部分並非Peter文章內容的簡單翻譯，而是Jerry閱讀了之後，基於自己的理解再加上自己的擴充。大家如果對我文章的內容有質疑，歡迎留言討論。

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上的：

https://github.com/w3c/webcomponents

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

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

Jerry個人的看法：給客戶和Partners提供一種更靈活的使用UI5控制元件的方式，避免對UI5框架的依賴。

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

最後執行時的UI5框架也會執行許多很複雜的邏輯，Jerry在四年前寫的UI5框架自學教程裡曾詳細描述過：

https://blogs.sap.com/2015/10/23/how-i-do-self-study-on-a-given-fiori-control-part-1/

而藉助SAP UI5 Web Components，開發人員根本不需要匯入UI5框架，就能直接使用UI5裡的控制元件。按照Peter文章的描述，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幫助文件:

https://sap.github.io/ui5-webcomponents/playground.html

執行時，和在UI5框架裡使用控制元件一樣，仍然有一個專門的ButtonRenderer負責生成按鈕原生的HTML程式碼:

從執行時生成的HTML原始碼我們不難發現，UI5 Web Components自定義的HTML標籤只是起著佔位符(place holder)的作用，真正承載執行時使用者可以與之互動的實際按鈕，還是通過上圖ButtonRenderer生成的HTML原生button標籤。

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