天天看點

SAP Fiori + Vue = ?

因為出差回來之後,我需要向我老闆和老闆的老闆彙報工作,是以寫了這篇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/
SAP Fiori + Vue = ?
SAP Fiori + Vue = ?

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文章的風格,當然是到上代碼的時候了。

SAP Fiori + Vue = ?
SAP Fiori + Vue = ?
SAP Fiori + Vue = ?

這一點和SAP在github上的文檔描述一緻。

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

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

下圖是一個Table元件的運作時效果,大家不難發現這個Table的外觀和我們之前用UI5開發的很相似。

SAP Fiori + Vue = ?
SAP Fiori + Vue = ?
SAP Fiori + Vue = ?
SAP Fiori + Vue = ?
SAP Fiori + Vue = ?
SAP Fiori + Vue = ?
SAP Fiori + Vue = ?
SAP Fiori + Vue = ?
SAP Fiori + Vue = ?

繼續閱讀