我們都知道 Fiori 代表 SAP 新一代 UI 的介面風格，而 UI5 是 Fiori UX(User Experience，使用者體驗)的具體實現技術。從下圖這則新聞 能夠看出，SAP 決定將 Fiori 同具體 UI 實現技術解耦, 是出於什麼考慮呢？
眾所周知，前端技術發展的速度是非常快的，新理念，新名詞，新工具層出不窮，很多前端開發程式猿經常哀嘆"學不過來了"，那麼，如果只繫結於某一種具體的 UI 實現技術，Fiori UX 會缺乏足夠的靈活性，很難充分利用業界最新技術來更好地為終端使用者服務。
同時，這一舉動也充分體現了 SAP 確實在傾聽自己生態圈裡開發人員的呼聲，透過這種解耦允許 SAP 開發人員根據實際專案需要，靈活選擇最佳 UI 框架來開發 Fiori 應用。
Fiori UX 同底層 UI 實現框架解耦的關鍵就在於 SAP Fiori Fundamentals, 一個輕量級的展現層實現。從技術層面上說，SAP Fiori Fundamentals 不是一種新的 UI 技術或者框架，而是一系列 stylesheets 和 HTML 標籤的集合，以此來讓 SAP 生態圈裡的 UI 開發人員用其喜歡的 UI 框架，比如 Angular，React，Vue 等進行開發，同時自動保證開發出的應用仍具有 Fiori 的風格和使用者體驗。
SAP Fundamentals 是一個使用 HTML 和 CSS 的輕量級表示層，藉助 Fundamentals 的樣式表和 HTML 標籤庫，開發人員可以在任何基於 Web 的技術中構建一致的 SAP 應用程式。
使用 SAP Fundamentals 能夠給開發者和企業帶來以下的收益：
- Fundamentals Library Styles 可以應用於任何 Web 框架和庫（包括 Web Components）
- 支援最流行的前端開發框架，包括但不限於 Angular、React 和 Vue
- 企業級客戶和合作夥伴輕鬆採用
- 能夠輕鬆實現 UI 協調和主題化——尤其適用於新收購的公司或遺留解決方案(Legacy Solutions)
時至今日，Fiori Fundamentals 庫已被廣泛應用於 SAP 生態圈各個產品和業務線，例如 SAP Commerce Cloud、Kyma、Luigi、SAP C/4HANA cockpit、SAP Concur、SAP Customer Data Cloud（又名 Gigya）、SAP Service Cloud （又名 Coresystems）、SAP Fieldglass、SAP Ariba 和 SAPDataHub 等。
SAP Fiori Fundamentals 的出現，絕不意味著它會替代 UI5，實際上，SAP 對於 UI5 的維護和功能增強一直沒有停步。
Fiori Fundamentals 同 UI5 Web Components 的關係
UI5 Web 元件是一組基於 Web 標準的封裝、可重用和輕量級的 UI Elements. 它們融合了 SAP Fiori 3 設計，允許開發人員建立與 SAP Fiori 設計指南一致的跨應用程式的一致使用者體驗，而與具體使用的前端開發框架無關。
UI5 Web Components 具有 OpenUI5/SAPUI5 框架中熟悉的企業級特性，例如穩定性、國際化、可訪問性和主題支援，並在 UI 元素的使用和實現之間引入了清晰的介面。
UI5 產品線的 UI5 Web 元件區域核心專案是作為 OpenUI5/SAPUI5 框架向模組化和通用工具箱演進的重要一環而建立的，其目的是提供一組單獨的模組，從而使得 Web 開發人員可以輕鬆地將其新增到開發專案中，以構建企業級 Web 應用程式。
Talk is cheap. Show me the code. 下面我們透過一些具體的例子來加深對 SAP Fiori Fundamentals 的理解。
因為筆者工作所在的團隊進行原型開發，組內同事大多喜歡用 Vue，所以我們就來試試 SAP Fiori Fundamentals + Vue 這對組合。
首先我們得有一個能工作的 Vue 應用，然後在此基礎上加工。
讀者可以在我的這篇 SAP 部落格上找到一個 Hello World 的 Vue應用，透過 webpack 打包之後執行，能在瀏覽器裡看到顯示的 Hello World：
這個 Hello world 的 Vue 應用，專案結構如下：
下面我們在其基礎上進行加工。
- 在專案資料夾下安裝 fundamental-vue。這是為 SAP Fiori Fundamentals 實現的一個輕量級的 Vue 元件集合。
npm install --save fundamental-vue
安裝完畢後在 package.json 裡能夠看到 fundamental-vue 還在 beta 版，
- 下面這個連結羅列了 SAP Fiori Fundamentals 裡支援的 Vue 元件，同時也介紹瞭如何自定義一個新的 Vue 元件。
下圖是一個 Table 元件的執行時效果，大家不難發現這個 Table 的外觀和我們之前用 UI5 開發的很相似。
點選 Show Code，會顯示這個 Table 元件的 Vue 實現原始碼，類似我們 UI5 Toolkit 裡顯示的控制元件在 UI5 XML View 裡的原始碼，道理是相通的。
把這一大堆程式碼貼上到我們 Vue 應用 src 資料夾下的 index.vue 裡：
同樣在 index.vue 裡，在 module.exports 裡實現作為 Button 事件處理函式 addCurrentEntry, 以及硬編碼一些測試資料：
在main.js里加入兩行:
import FundamentalVue from 'fundamental-vue';
Vue.use(FundamentalVue);
最後一步，在index.html 裡引入位於CDN上的Fiori Fundamentals的css檔案。當然github上也提到了也可以使用 npm install --save fiori-fundamentals 將其安裝到本地使用。
至此加工就結束了。用webpack打包之後，執行npm run dev啟動wepack-dev-server, 就可以在localhost裡看到如下效果：
輸入新的謀士姓名，點選Add Entry按鈕之後能將其輸入到表格中。
這個使用 Vue 元件開發而成的具有 Fiori UX 風格的應用執行時效果，在手機檢視如下圖所示：
總結
本文首先介紹了驅動 SAP Fiori UX 設計語言同 SAP UI5 實現框架解耦的市場原因，從而引出 Fiori Fundamental 的概念，接著選擇 Vue 這個前端框架，講解了如何使用 Fiori Fundamentals 加上 Vue 這對組合，實現一個簡單的具有 Fiori UX 的前端應用。