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

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

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

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

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

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

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

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

Fiori Fundamentals

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

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

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

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

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

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

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

這是例子里引用的CSS：

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

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

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

SAP UI5 Web Components

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

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

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

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

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

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

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

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

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

https://www.webcomponents.org/introduction

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

這個規(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的實現(xiàn)當(dāng)然也滿足這些標(biāo)準(zhǔn)。

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

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

舉個例子，如果我們想使用UI5控件庫里提供的button控件，就算只在XML視圖里寫簡單的一行定義，

最后運行時的UI5框架也會執(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)入UI5框架，就能直接使用UI5里的控件。按照Peter文章的描述，SAP UI5 Web Components能用于任何前端框架中，即下圖中高亮的最后一句話。

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

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

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

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

看個具體的例子:

在瀏覽器里打開下面的HTML頁面，

會看到一個UI5按鈕。點擊后彈出這個按鈕實例的innerHTML屬性的值。這是一個最簡單的SAP UI5 Web Components的Hello World例子。

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

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

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

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

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

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

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

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

最后，SAP UI5 Web Components的使用場景是什么？

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

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

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

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

最后，有朋友可能會有疑問，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)于這兩個概念大家如果有疑問，請直接留言給我，或者點擊“閱讀原文”，跳轉(zhuǎn)到SAP社區(qū)上給Peter留言，感謝閱讀。

相關(guān)閱讀

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

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

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

• 在Kubernetes上運行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的獨特之處

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

總結(jié)

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

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