這周有位同事邀請(qǐng)我給團(tuán)隊(duì)講一講SAP技術(shù)的演進(jìn)歷史，所以我準(zhǔn)備了下面幾個(gè)主題來介紹。

其中SAP的技術(shù)回顧和演進(jìn)，我的思路就是從前后臺(tái)兩方面分別介紹。

我畫了一張非常簡(jiǎn)單的圖：

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

根據(jù)Jerry從SAP社區(qū)上已經(jīng)發(fā)布的信息來看，Fiori的兩個(gè)發(fā)展方向，我個(gè)人概括為：

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

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

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

Fiori Fundamentals

看看SAP官網(wǎng)上的權(quán)威定義：

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

Jerry在上圖把最關(guān)鍵的信息都用紅色高亮出來了。重點(diǎn)：

1. Fiori Fundamentals在前端應(yīng)用里扮演著一個(gè)輕量級(jí)展現(xiàn)層的角色，可配合Angular, React和Vue等前端框架一起使用。

2. Fiori Fundamentals不是一項(xiàng)新的UI技術(shù)，更不會(huì)取代UI5，而是一個(gè)CSS和HTML標(biāo)簽的集合，使得開發(fā)人員能使用其偏愛的UI框架去開發(fā)具有Fiori UX風(fēng)格的應(yīng)用。

同樣，Jerry去年年底寫的另一篇文章?SAP Fiori + Vue = ？，介紹的其實(shí)就是Fiori Fundamentals針對(duì)于Vue的實(shí)現(xiàn)。

剛剛提到的重點(diǎn)2，Fiori Fundamentals是一系列CSS和HTML標(biāo)簽頁(yè)的集合，那么我們到Jerry的這篇文章里介紹的例子去找找。

這是例子里引用的CSS：

這是SAP Fiori Fundamentals幫助文檔里提到的繪制表格的標(biāo)簽：

在我的Vue應(yīng)用里如何消費(fèi)這些標(biāo)簽：

至于為這個(gè)標(biāo)簽繪制而成的表格添加事件處理機(jī)制，其方法和純粹的Vue應(yīng)用完全一致，因此一個(gè)傳統(tǒng)的Vue開發(fā)人員，借助Fiori Fundamentals的幫助，幾乎不需要任何額外的學(xué)習(xí)就能夠進(jìn)行SAP Fiori應(yīng)用的前臺(tái)界面開發(fā)。

SAP UI5 Web Components

SAP德國(guó)的UI5開發(fā)人員Peter Muessig最近在SAP社區(qū)上發(fā)表了一篇博客：UI5 Web Components - the Beta is there，大家可以通過本文末尾的"閱讀原文"來閱讀他的原文。

如Peter文章題目所說，SAP最近發(fā)布了UI5 Web Components的Beta版本，并邀請(qǐng)廣大SAP生態(tài)圈的開發(fā)人員試用并提出意見。

Peter的文章不長(zhǎng)，但是為了方便不喜歡讀英文的朋友們也能快速了解這個(gè)UI5 Web Components是個(gè)什么東東，Jerry還是把里面一些要點(diǎn)用我自己的語言表述出來。下面的部分并非Peter文章內(nèi)容的簡(jiǎn)單翻譯，而是Jerry閱讀了之后，基于自己的理解再加上自己的擴(kuò)充。大家如果對(duì)我文章的內(nèi)容有質(zhì)疑，歡迎留言討論。

SAP UI5 Web Components，是SAP將之前SAP UI5控件庫(kù)里的控件，按照Web Components標(biāo)準(zhǔn)規(guī)范重新實(shí)現(xiàn)后的產(chǎn)物。

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

1. 什么是Web Components標(biāo)準(zhǔn)？

2. SAP為什么要做這個(gè)重新實(shí)現(xiàn)的事情？

3. 重新實(shí)現(xiàn)后的產(chǎn)物到底是個(gè)什么東東？

關(guān)于第一個(gè)問題，直接訪問Web Components的官網(wǎng)即可找到答案。程序猿們都懂的，org結(jié)尾的網(wǎng)站最喜歡定義各種幾百頁(yè)甚至上千頁(yè)的技術(shù)規(guī)范，Web Components也不例外：

https://www.webcomponents.org/introduction

前端組件化一直是前端生態(tài)圈很火熱的討論話題之一，像前端三駕馬車Angular，React和Vue都有自己的組件化實(shí)現(xiàn)，而webcomponents.org上定義的規(guī)范，其實(shí)就是給出了一個(gè)標(biāo)準(zhǔn)，只有滿足這個(gè)標(biāo)準(zhǔn)里的實(shí)現(xiàn)，才能算是一個(gè)通用的組件化實(shí)現(xiàn)，才能被所有現(xiàn)代瀏覽器支持。

這個(gè)規(guī)范的內(nèi)容也托管在github上的：

https://github.com/w3c/webcomponents

里面包含四大標(biāo)準(zhǔn)Shadow DOM，Custom Elements，HTML Templates和CSS changes，SAP UI5 Web Components的實(shí)現(xiàn)當(dāng)然也滿足這些標(biāo)準(zhǔn)。

第二個(gè)問題，SAP開發(fā)UI5 Web Components的動(dòng)機(jī)。

Jerry個(gè)人的看法：給客戶和Partners提供一種更靈活的使用UI5控件的方式，避免對(duì)UI5框架的依賴。

舉個(gè)例子，如果我們想使用UI5控件庫(kù)里提供的button控件，就算只在XML視圖里寫簡(jiǎn)單的一行定義，

最后運(yùn)行時(shí)的UI5框架也會(huì)執(zhí)行許多很復(fù)雜的邏輯，Jerry在四年前寫的UI5框架自學(xué)教程里曾詳細(xì)描述過：

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

而借助SAP UI5 Web Components，開發(fā)人員根本不需要導(dǎo)入U(xiǎn)I5框架，就能直接使用UI5里的控件。按照Peter文章的描述，SAP UI5 Web Components能用于任何前端框架中，即下圖中高亮的最后一句話。

此時(shí)自然需要回答第三個(gè)問題了。SAP UI5 Web Components到底是個(gè)什么東東？上圖傳達(dá)的重點(diǎn)：

1. SAP UI5 Web Components并不是基于UI5框架的。換句話說，和UI5框架沒有任何依賴關(guān)系，可以獨(dú)立使用。

2. SAP UI5 Web Components并不是SAP UI5框架的接替者，而應(yīng)看作后者的一種補(bǔ)充。

3. 將UI5控件庫(kù)提供的控件在HTML層級(jí)暴露給消費(fèi)者，而非傳統(tǒng)方式下的API層面暴露方式。如此一來，UI5 Web Components可以不依賴于UI5框架，能直接用于其他的前端框架。

看個(gè)具體的例子:

在瀏覽器里打開下面的HTML頁(yè)面，

會(huì)看到一個(gè)UI5按鈕。點(diǎn)擊后彈出這個(gè)按鈕實(shí)例的innerHTML屬性的值。這是一個(gè)最簡(jiǎn)單的SAP UI5 Web Components的Hello World例子。

例子里我們使用了SAP UI5 Web Components自定義的標(biāo)簽。對(duì)于前端應(yīng)用開發(fā)人員來說，這個(gè)自定義的標(biāo)簽和W3C里的button標(biāo)簽沒有任何不同，至少?gòu)南M(fèi)方式上來說完全一致。

關(guān)于UI5 Web Components里諸如這類自定義標(biāo)簽的詳細(xì)說明，可以查看SAP幫助文檔:

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

運(yùn)行時(shí)，和在UI5框架里使用控件一樣，仍然有一個(gè)專門的ButtonRenderer負(fù)責(zé)生成按鈕原生的HTML代碼:

從運(yùn)行時(shí)生成的HTML源代碼我們不難發(fā)現(xiàn)，UI5 Web Components自定義的HTML標(biāo)簽只是起著占位符(place holder)的作用，真正承載運(yùn)行時(shí)用戶可以與之交互的實(shí)際按鈕，還是通過上圖ButtonRenderer生成的HTML原生button標(biāo)簽。

需要強(qiáng)調(diào)的是，通過上述ButtonRenderer生成的運(yùn)行時(shí)按鈕實(shí)例，仍然滿足使用UI5框架的傳統(tǒng)方式繪制的控件一樣的特性，比如傳統(tǒng)方式下SAP保證的所有產(chǎn)品標(biāo)準(zhǔn)，像Accessibility，Internationalization這些，在SAP UI5 Web Components里仍然繼續(xù)支持，無需應(yīng)用開發(fā)人員額外的編程實(shí)現(xiàn)。

本地用npm install @ui5/webcomponents命令安裝UI5 Web Components之后，

就可以找出里面最簡(jiǎn)單的組件實(shí)現(xiàn)，Button.js, 來學(xué)習(xí)SAP是如何基于Web Components標(biāo)準(zhǔn)，采用ES6支持的mobule和class等特性實(shí)現(xiàn)一個(gè)自定義標(biāo)簽的。將來Jerry或許可以邀請(qǐng)SAP成都研究院的一些專職做前端開發(fā)的同事來分享這里面的技術(shù)細(xì)節(jié)。

最后，SAP UI5 Web Components的使用場(chǎng)景是什么？

以上是照搬Peter的文字。適用場(chǎng)景有二：

1. 在沒有使用前端框架開發(fā)而成的簡(jiǎn)單靜態(tài)頁(yè)面里，如果想添加一些能夠提供用戶交互的控件，可以考慮SAP UI5 Web Components。

2. 在已有的基于其他前端開發(fā)框架的Web應(yīng)用里，如果需要一些能與用戶交互的控件而又不想重復(fù)造輪子，那么可以到SAP UI5 Web Component官網(wǎng)上去找找。

另一方面，SAP UI5框架仍然是SAP推薦的開發(fā)具有企業(yè)級(jí)復(fù)雜度和響應(yīng)式前端應(yīng)用的方案。

最后，有朋友可能會(huì)有疑問，Jerry前一篇文章?SAP Fiori + Vue = ？里介紹的fundamental-vue，里面不是也存在SAP自定義的用于Vue應(yīng)用的HTML標(biāo)簽嗎？

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

那么fundamental-vue到底算Fiori Fundamentals還是Web Component？

一張圖來回答：

關(guān)于這兩個(gè)概念大家如果有疑問，請(qǐng)直接留言給我，或者點(diǎn)擊“閱讀原文”，跳轉(zhuǎn)到SAP社區(qū)上給Peter留言，感謝閱讀。

相關(guān)閱讀

• SAP UI5和微信小程序?qū)Ρ戎乙?/p>

• 當(dāng)我用UI5診斷工具時(shí)我用些什么

• 在Kubernetes上運(yùn)行SAP UI5應(yīng)用(上）

• 在Kubernetes上運(yùn)行SAP UI5應(yīng)用(下)

• SAP Fiori + Vue = ？

• SAP Fiori應(yīng)用的三種部署方式

• Jerry的Fiori原創(chuàng)文章合集

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

• Jerry和您聊聊Chrome開發(fā)者工具

• Jerry的UI5框架代碼自學(xué)教程

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

• SAP Cloud for Customer 使用SAP UI5的獨(dú)特之處

要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":

總結(jié)

以上是生活随笔為你收集整理的Fiori Fundamentals和SAP UI5 Web Components的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。