Fiori Fundamentals和SAP UI5 Web Components

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

其中SAP的技術回顧和演進，我的思路就是從前后臺兩方面分別介紹。

我畫了一張非常簡單的圖：

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

根據Jerry從SAP社區上已經發布的信息來看，Fiori的兩個發展方向，我個人概括為：

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

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

我們來分別了解一下這兩個新概念。

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自定義的標簽。對于前端應用開發人員來說，這個自定義的標簽和W3C里的button標簽沒有任何不同，至少從消費方式上來說完全一致。

關于UI5 Web Components里諸如這類自定義標簽的詳細說明，可以查看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留言，感謝閱讀。

web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。