最近工作中，筆者受邀請給一個團隊做了 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 的朋友們，看了我上面這句描述，腦子裡會冒出這些問題：
- 什麼是 Web Components 標準？
- SAP 為什麼要做這個重新實現的事情？
- 重新實現後的產物到底是個什麼東東？
關於第一個問題，直接訪問 Web Components 的官網即可找到答案。程式猿們都懂的，org結尾的網站最喜歡定義各種幾百頁甚至上千頁的技術規範，Web Components 也不例外：
https://www.webcomponents.org...
前端元件化一直是前端生態圈很火熱的討論話題之一，像前端三駕馬車 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 到底是個什麼東東？上圖傳達的重點：
- SAP UI5 Web Components並不是基於UI5框架的。換句話說，和UI5框架沒有任何依賴關係，可以獨立使用。
- SAP UI5 Web Components 並不是SAP UI5框架的接替者，而應看作後者的一種補充。
- 將 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的使用場景是什麼？
適用場景有二：
- 在沒有使用前端框架開發而成的簡單靜態頁面裡，如果想新增一些能夠提供使用者互動的控制元件，可以考慮SAP UI5 Web Components。
- 在已有的基於其他前端開發框架的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 框架的前提下，提供了大量開箱即用的控制元件。