SAP Fiori + Vue = ？

2017年3月28日，我到國內一個SAP CRM客戶那裡，同他們的架構師關於二次開發的UI框架選擇SAP UI5還是Vue進行了一番探討。回到SAP研究院之後，我把這個問題扔到了公司的微信群裡，引起了大家的熱烈討論。

因為出差回來之後，我需要向我老闆和老闆的老闆彙報工作，因此寫了這篇blog：

https://blogs.sap.com/2017/03/31/is-jquery-based-ui-framework-obsolete/

時光飛逝，轉眼間2018年也快過完了。今天上午上班路上，忽然看到陽哥在公司微信群裡發了一個截圖，提供了一個指向公網github倉庫的連結：

https://github.com/SAP/fundamental-vue

看到這個倉庫的url，Jerry馬上就想起了早些時候在experience.sap.com網站上看到的這條新聞：

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

我們都知道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 Fiori Fundamentals的出現，絕不意味著它會替代UI5，實際上，SAP對於UI5的維護和功能增強一直沒有停步。

按照Jerry文章的風格，當然是到上程式碼的時候了。

因為Jerry所在的團隊進行原型開發，組內同事大多喜歡用Vue，所以我們就來試試SAP Fiori Fundamentals + Vue這對組合。

首先我們得有一個能工作的Vue應用，然後在此基礎上加工。

您可以在我的SAP部落格上找到一個Hello World的Vue應用，通過webpack打包之後執行，能在瀏覽器裡看到顯示的Hello World：

https://blogs.sap.com/2017/12/22/step-by-step-to-run-vue-application-in-bsp/

這個Hello world的Vue應用，專案結構如下：

下面我們在其基礎上進行加工。

1. 在專案資料夾下安裝 fundamental-vue 。這是為SAP Fiori Fundamentals實現的一個輕量級的Vue元件集合。

npm install --save fundamental-vue

安裝完畢後在package.json裡能夠看到fundamental-vue還在beta版，

這一點和SAP在github上的文件描述一致。

2. 下面這個連結羅列了SAP Fiori Fundamentals裡支援的Vue元件，同時也介紹瞭如何自定義一個新的Vue元件。

https://dist-4d2gqwr8y.now.sh/#/example/table

下圖是一個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按鈕之後能將其輸入到表格中。

儘管網上有種說法，“ 郭嘉不死，臥龍不出 ”，然而孔明永遠是Jerry心中的三國演義第一謀士。

這個使用Vue元件開發而成的具有Fiori UX風格的應用執行時效果，大家可以檢視這個視訊體驗：

<iframe frameborder="0" width="677" height="380.8125" allow="autoplay; fullscreen" allowfullscreen="true" src="https://v.qq.com/txp/iframe/player.html?origin=https%3A%2F%2Fmp.weixin.qq.com&vid=q0814wlsmqn&autoplay=false&full=true&show1080p=false&isDebugIframe=false" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></iframe>

或者檢視我託管到github上的demo：

http://i042416.github.io/FioriODataTestTool2014/WebContent/097_fiori_vue.html

手機上開啟上面連結的效果：

由於時間關係，Jerry還沒能深入瞭解SAP Fiori Fundamentals的更多技術細節，只是簡單給大家展示了它和Vue協同工作的效果。

未來如果有機會，Jerry會給大家帶來更多深入報導，感謝閱讀。

相關閱讀

• SAP Fiori應用的三種部署方式

• Jerry的Fiori原創文章合集

• SAP成都C4C小李探花：淺談Fiori Design Guidelines

• Jerry和您聊聊Chrome開發者工具

• Jerry的UI5框架程式碼自學教程

• Jerry的碎碎念：SAPUI5, Angular, React和Vue

• SAP Cloud for Customer 使用SAP UI5的獨特之處

• 當我用UI5診斷工具時我用些什麼

• 在Kubernetes上執行SAP UI5應用(上）

• 在Kubernetes上執行SAP UI5應用(下)

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2286058/，如需轉載，請註明出處，否則將追究法律責任。