SAP Fiori + Vue = ？

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

因為出差回來之后，我需要向我老板和老板的老板匯報工作，因此寫了這篇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的原創文章，請關注公眾號"汪子熙":