Fiori Fundamentals和SAP UI5 Web Components

時間 2019-11-08

標籤 fiori fundamentals sap ui5 web components 欄目 HTML 简体版

原文原文鏈接

這周有位同事邀請我給團隊講一講SAP技術的演進歷史，因此我準備了下面幾個主題來介紹。html

其中SAP的技術回顧和演進，個人思路就是從先後臺兩方面分別介紹。前端

我畫了一張很是簡單的圖：vue

去年5月我寫過一篇文章：SAP UI和Salesforce UI開發漫談，簡要回顧了SAPUI技術的發展，從最古老的SAP GUI繪製界面，到Webdynpro / WebUI再到如今普遍使用的Fiori UX。當時這篇文章介紹到Fiori(UI5)就嘎然而止了，現在大半年過去了，咱們繼續聊聊Fiori的發展動向。git

根據Jerry從SAP社區上已經發布的信息來看，Fiori的兩個發展方向，我我的歸納爲：github

1. 兼容幷蓄，即經過Fiori Fundamentals，讓使用非UI5開發框架的前端開發人員，用其喜好的技術，也能開發出符合Fiori UX的應用。web

2. 輕裝上陣，即經過SAP UI5 Web Components，既能繼續提供像以前UI5控件庫那些開箱即用的衆多UI控件，又避免了前端應用對UI5框架的依賴。npm

咱們來分別瞭解一下這兩個新概念。編程

Fiori Fundamentals小程序

看看SAP官網上的權威定義：微信小程序

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

Jerry在上圖把最關鍵的信息都用紅色高亮出來了。重點：

1. Fiori Fundamentals在前端應用裏扮演着一個輕量級展示層的角色，可配合Angular, React和Vue等前端框架一塊兒使用。

2. Fiori Fundamentals不是一項新的UI技術，更不會取代UI5，而是一個CSS和HTML標籤的集合，使得開發人員能使用其偏心的UI框架去開發具備Fiori UX風格的應用。

一樣，Jerry去年年末寫的另外一篇文章 SAP Fiori + Vue = ？，介紹的其實就是Fiori Fundamentals針對於Vue的實現。

剛剛提到的重點2，Fiori Fundamentals是一系列CSS和HTML標籤頁的集合，那麼咱們到Jerry的這篇文章裏介紹的例子去找找。

這是例子裏引用的CSS：

這是SAP Fiori Fundamentals幫助文檔裏提到的繪製表格的標籤：

在個人Vue應用裏如何消費這些標籤：

至於爲這個標籤繪製而成的表格添加事件處理機制，其方法和純粹的Vue應用徹底一致，所以一個傳統的Vue開發人員，藉助Fiori Fundamentals的幫助，幾乎不須要任何額外的學習就可以進行SAP Fiori應用的前臺界面開發。

SAP UI5 Web Components

SAP德國的UI5開發人員Peter Muessig最近在SAP社區上發表了一篇博客：UI5 Web Components - the Beta is there，你們能夠經過本文末尾的"閱讀原文"來閱讀他的原文。

如Peter文章題目所說，SAP最近發佈了UI5 Web Components的Beta版本，並邀請廣大SAP生態圈的開發人員試用並提出意見。

Peter的文章不長，可是爲了方便不喜歡讀英文的朋友們也能快速瞭解這個UI5 Web Components是個什麼東東，Jerry仍是把裏面一些要點用我本身的語言表述出來。下面的部分並不是Peter文章內容的簡單翻譯，而是Jerry閱讀了以後，基於本身的理解再加上本身的擴充。你們若是對我文章的內容有質疑，歡迎留言討論。

SAP UI5 Web Components，是SAP將以前SAP UI5控件庫裏的控件，按照Web Components標準規範從新實現後的產物。

相信瞭解SAP UI5的朋友們，看了我上面這句描述，腦子裏會冒出這些問題：

1. 什麼是Web Components標準？

2. SAP爲何要作這個從新實現的事情？

3. 從新實現後的產物究竟是個什麼東東？

關於第一個問題，直接訪問Web Components的官網便可找到答案。程序猿們都懂的，org結尾的網站最喜歡定義各類幾百頁甚至上千頁的技術規範，Web Components也不例外：

https://www.webcomponents.org/introduction

前端組件化一直是前端生態圈很火熱的討論話題之一，像前端三駕馬車Angular，React和Vue都有本身的組件化實現，而webcomponents.org上定義的規範，其實就是給出了一個標準，只有知足這個標準裏的實現，才能算是一個通用的組件化實現，才能被全部現代瀏覽器支持。

這個規範的內容也託管在github上的：

https://github.com/w3c/webcomponents

裏面包含四大標準Shadow DOM，Custom Elements，HTML Templates和CSS changes，SAP UI5 Web Components的實現固然也知足這些標準。

第二個問題，SAP開發UI5 Web Components的動機。

Jerry我的的見解：給客戶和Partners提供一種更靈活的使用UI5控件的方式，避免對UI5框架的依賴。

舉個例子，若是咱們想使用UI5控件庫裏提供的button控件，就算只在XML視圖裏寫簡單的一行定義，

最後運行時的UI5框架也會執行許多很複雜的邏輯，Jerry在四年前寫的UI5框架自學教程裏曾詳細描述過：

https://blogs.sap.com/2015/10/23/how-i-do-self-study-on-a-given-fiori-control-part-1/

而藉助SAP UI5 Web Components，開發人員根本不須要導入UI5框架，就能直接使用UI5裏的控件。按照Peter文章的描述，SAP UI5 Web Components能用於任何前端框架中，即下圖中高亮的最後一句話。

此時天然須要回答第三個問題了。SAP UI5 Web Components究竟是個什麼東東？上圖傳達的重點：

1. SAP UI5 Web Components並非基於UI5框架的。換句話說，和UI5框架沒有任何依賴關係，能夠獨立使用。

2. SAP UI5 Web Components並非SAP UI5框架的接替者，而應看做後者的一種補充。

3. 將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幫助文檔:

https://sap.github.io/ui5-webcomponents/playground.html

運行時，和在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等特性實現一個自定義標籤的。未來Jerry或許能夠邀請SAP成都研究院的一些專職作前端開發的同事來分享這裏面的技術細節。

最後，SAP UI5 Web Components的使用場景是什麼？

以上是照搬Peter的文字。適用場景有二：

1. 在沒有使用前端框架開發而成的簡單靜態頁面裏，若是想添加一些可以提供用戶交互的控件，能夠考慮SAP UI5 Web Components。

2. 在已有的基於其餘前端開發框架的Web應用裏，若是須要一些能與用戶交互的控件而又不想重複造輪子，那麼能夠到SAP UI5 Web Component官網上去找找。

另外一方面，SAP UI5框架仍然是SAP推薦的開發具備企業級複雜度和響應式前端應用的方案。

最後，有朋友可能會有疑問，Jerry前一篇文章 SAP Fiori + Vue = ？裏介紹的fundamental-vue，裏面不是也存在SAP自定義的用於Vue應用的HTML標籤嗎？

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

那麼fundamental-vue到底算Fiori Fundamentals仍是Web Component？

一張圖來回答：

關於這兩個概念你們若是有疑問，請直接留言給我，或者點擊「閱讀原文」，跳轉到SAP社區上給Peter留言，感謝閱讀。