這是 Jerry 2021 年的第 54 篇文章，也是汪子熙公眾號(hào)總共第 331 篇原創(chuàng)文章。

任何企業(yè)級(jí)軟件的前端開(kāi)發(fā)，都離不開(kāi)組件(Component)這個(gè)概念。撇開(kāi)具體的 UI 開(kāi)發(fā)技術(shù)不談，所謂組件，就是界面的組成部分(UI Building Blocks). 組件在視覺(jué)或者業(yè)務(wù)功能上，能夠被視為單一元素。

組件可能被構(gòu)成應(yīng)用程序的其他組件重用，也可能包含其他組件。理想情況下，一個(gè)設(shè)計(jì)良好的組件，其同其他組件或者外部服務(wù)的依賴關(guān)系，可以被恰當(dāng)?shù)馗綦x，從而能夠單獨(dú)對(duì)組件進(jìn)行單元測(cè)試甚至自動(dòng)化測(cè)試。

近些年隨著微服務(wù)架構(gòu)浪潮而興起的微前端設(shè)計(jì)理念，甚至支持同一應(yīng)用內(nèi)不同的 UI 組件，采取不同的前端技術(shù)進(jìn)行開(kāi)發(fā)，這些異構(gòu)的 UI 組件，可以獨(dú)立地進(jìn)行開(kāi)發(fā)，測(cè)試，部署和交付，通過(guò)統(tǒng)一的微前端容器進(jìn)行管理，并構(gòu)成最終由用戶使用的前端程序。

Luigi 就是 SAP 推動(dòng)的一個(gè)微前端框架。

微前端框架的使用已經(jīng)超出了本文討論的范疇。本文就 SAP 下列四種產(chǎn)品所使用的前端開(kāi)發(fā)框架/工具中包含的組件概念，展開(kāi)進(jìn)行介紹。

SAP CRM / SRM

SAP S/4HANA

SAP Cloud for Customer

SAP Commerce Cloud

本世紀(jì)初，隨著企業(yè)應(yīng)用軟件從 Client/Server 模式往 Browser/Server 模式的遷移，SAP CRM 和 SAP SRM 的前端開(kāi)發(fā)技術(shù)，也踏上了不同的兩條演進(jìn)道路：分別基于 SAP WebClient UI 和 ABAP Webdynpro. 關(guān)于這兩項(xiàng)技術(shù)更多的介紹和 SAP UI 開(kāi)發(fā)技術(shù)的演進(jìn)之路，請(qǐng)參考 Jerry 之前的文章：SAP UI 和 Salesforce UI 開(kāi)發(fā)漫談。

SAP WebClient UI 的前身是 SAP BSP - Business Server Page.WebClient UI 在其基礎(chǔ)上，引入了組件的概念，并且在視圖層增添了對(duì) BSP 擴(kuò)展標(biāo)簽庫(kù)的支持，使得其開(kāi)發(fā)效率大大提高?；?SAP WebClient UI 的開(kāi)發(fā)方式，至今仍在 SAP S/4HANA Service 模塊領(lǐng)域中采用。

一個(gè)基于 SAP WebClient UI 的應(yīng)用，通常由多個(gè)組件構(gòu)成。單個(gè)組件的開(kāi)發(fā)，仍然基于傳統(tǒng)的 MVC，其中 Model 層的 Context Node，由 ABAP Class 實(shí)現(xiàn)，而 ABAP Webdynpro 中的 Context Node，采取的是 ABAP DDIC 數(shù)據(jù)字段中的數(shù)據(jù)結(jié)構(gòu)。

WebClient UI 組件的視圖層基于 HTML，能重用 SAP 標(biāo)準(zhǔn) BSP Extension 中提供的 HTML 標(biāo)簽。絕大多數(shù)情況下，應(yīng)用開(kāi)發(fā)人員無(wú)需編寫(xiě)原生的 HTML 代碼，這也降低了開(kāi)發(fā)門(mén)檻。ABAP Webdynpro 組件視圖層開(kāi)發(fā)，在 SAP 提供的所見(jiàn)即所得的布局編輯器中進(jìn)行，開(kāi)發(fā)人員無(wú)法使用原生的 HTML 編輯方式開(kāi)發(fā)視圖。

WebClient UI 里有一類特殊的組件，起著容器的作用，負(fù)責(zé)將其包含的其他組件的視圖按照用戶配置顯示出來(lái)。

下圖是一個(gè)例子：SAP CRM 產(chǎn)品概覽頁(yè)面，左邊紅色區(qū)域，是該容器組件支持的所有組件和組件視圖列表，右邊是當(dāng)前用戶配置的該容器到底要顯示哪些組件視圖，及這些組件視圖的加載方式：直接加載或者延遲加載。這種從一個(gè)支持組件列表里選擇部分加載的配置方式，在本文后續(xù)介紹 SAP Commerce Cloud 組件時(shí)會(huì)再次提及。

SAP S/4HANA

前文已經(jīng)介紹過(guò)，SAP S/4HANA Service 模塊的 UI，仍然基于 SAP WebClient UI 開(kāi)發(fā)。Service 模塊在 SAP 內(nèi)部簡(jiǎn)稱為 S4CRM，官方稱謂為 S/4HANA for Customer Management，詳情參考 Jerry 的文章：Hello World, S/4HANA for Customer Management 1.0.

SAP S/4HANA 除了 Service 之外的其他模塊，其 UI 通過(guò) SAP Fiori Elements 開(kāi)發(fā)，該框架后臺(tái)模型為加上了注解的 SAP CDS view 即暴露給外界消費(fèi)的 OData 服務(wù)，前臺(tái)開(kāi)發(fā)框架為 SAP UI5. Component.js 是所有配置到 SAP Fiori Launchpad 中的 SAP UI5 應(yīng)用的入口。

以 SAP S/4HANA Sales Management Overview 這個(gè) Fiori 應(yīng)用為例：

和其他所有基于 Fiori Elements 開(kāi)發(fā)的應(yīng)用一樣，Sales Management Overview 應(yīng)用工程內(nèi)僅包含一個(gè) Component.js, 該文件內(nèi)聲明了對(duì) manifest.json 文件的引用。其余在 Freestyle SAP UI5 開(kāi)發(fā)模式下需要應(yīng)用開(kāi)發(fā)人員編寫(xiě)的 Controller，View 等資源文件，在 Fiori Elements 應(yīng)用里均被 SAP UI5 框架提供的模板版本所取代。

在 manifest.json 文件里，我們能得到下列這些信息：

該 Fiori 應(yīng)用消費(fèi)的 OData 服務(wù)名稱，SD_OVP_SM

該 Fiori 應(yīng)用消費(fèi)的 OData 服務(wù)基于的 CDS view 名稱：C_PROFITMARGINBYMONTHQUERY_CDS

Fiori 應(yīng)用 ID：F2601

有了 F2601 這個(gè) Fiori ID 之后，從 Jerry 文章 SAP Fiori應(yīng)用索引大全 里介紹的網(wǎng)站上，根據(jù)該 ID，即可查詢到該 Fiori 應(yīng)用的設(shè)計(jì)詳情：

關(guān)于 SAP Fiori Elements 應(yīng)用 manifest.json 更多的細(xì)節(jié)介紹，請(qǐng)參考 Jerry 之前的文章：

在沒(méi)有任何前端開(kāi)發(fā)經(jīng)驗(yàn)的基礎(chǔ)上, 創(chuàng)建第一個(gè) SAP Fiori Elements 應(yīng)用

答網(wǎng)友提問(wèn)：使用 SAP Fiori Tools 創(chuàng)建的 Fiori Elements 應(yīng)用，如何進(jìn)行二次開(kāi)發(fā)？

關(guān)于 SAP Fiori Elements 開(kāi)發(fā)的更多介紹，可以參考 Jerry 翻譯的 OpenSAP 上的公開(kāi)課。由于工作繁忙，目前只完成了前四期視頻的翻譯工作：

OpenSAP Fiori Elements 公開(kāi)課第一單元：總體介紹

OpenSAP Fiori Elements 公開(kāi)課第二單元：架構(gòu)介紹

OpenSAP Fiori Elements 公開(kāi)課第三單元：OData 服務(wù)和注解介紹

OpenSAP Fiori Elements 公開(kāi)課第四單元：開(kāi)發(fā)環(huán)境搭建

SAP Cloud for Customer

同 ABAP Webdynpro 一樣，SAP Cloud for Customer 的組件開(kāi)發(fā)，也是在所見(jiàn)即所得的編輯器里進(jìn)行，這個(gè)編輯器叫做 UI Designer.

如果說(shuō) SAP Fiori Elements 是基于 CDS view 以及 OData 服務(wù)進(jìn)行的組件開(kāi)發(fā)，那么 SAP Cloud for Customer 的組件開(kāi)發(fā)則是基于 Business Object 驅(qū)動(dòng)的。

開(kāi)發(fā)人員使用 SAP Cloud Application Studio 完成 Business Object 模型創(chuàng)建后，可以使用向?qū)?，一鍵生成針對(duì)該 BO 進(jìn)行增刪改查操作的全套 UI.這些 UI 類型各異, 由不同的組件所實(shí)現(xiàn)。

打開(kāi)任意一個(gè) UI 組件，發(fā)現(xiàn)其仍然分為 MVC 三層。其中視圖層，開(kāi)發(fā)人員可以在 Toolbox 面板中拖拽合適的 UI 控件，以所見(jiàn)即所得的方式設(shè)計(jì)視圖;

在模型層，選擇 C4C 標(biāo)準(zhǔn)的 BO 或者 Partners 二次開(kāi)發(fā)的 BO, 可以完成視圖控件字段同 BO 字段的數(shù)據(jù)綁定;

在控制器層面，可以采用非編碼的聲明方式，指定該視圖響應(yīng)用戶操作之后，應(yīng)該執(zhí)行何種業(yè)務(wù)邏輯。

由于歷史原因，SAP C4C 用戶訪問(wèn)入口，并不是像 S/4HANA 那樣采用了 Fiori Launchpad，而是同 SAP CRM 一樣，選擇工作中心(Work Center)作為入口。

用戶被分配的業(yè)務(wù)角色(Business Role)決定了其能夠訪問(wèn)的工作中心。C4C 的 UI 組件被添加到工作中心視圖中，后者再被添加到工作中心內(nèi)，從而被用戶訪問(wèn)。

因?yàn)椴⑽赐ㄟ^(guò) Fiori Launchpad, 進(jìn)行管理，所以 C4C 組件也就不存在 Component.js. 每個(gè) C4C UI 組件本質(zhì)上是一個(gè) XML 文件，該文件存儲(chǔ)在 C4C 后臺(tái)一個(gè)叫做 X-Repository 的基礎(chǔ)設(shè)施上。

運(yùn)行時(shí)當(dāng)所屬的工作中心視圖被訪問(wèn)時(shí)，UI 組件的源代碼從 C4C 后臺(tái)加載到瀏覽器，被 SAP UI5 框架解析。后者按照 C4C 特有的視圖格式，根據(jù)組件源代碼里包含的控件定義內(nèi)容，創(chuàng)建對(duì)應(yīng)的 UI5 控件實(shí)例。這些控件實(shí)例再使用對(duì)應(yīng)的渲染器，按照文章 深入學(xué)習(xí)SAP UI5框架代碼系列之二：UI5 控件的渲染器 里介紹的邏輯，生成最終的原生 HTML 源代碼。

傳統(tǒng)的 SAP UI5 應(yīng)用里，UI5 框架基于 JavaScript 或者 XML 視圖文件，創(chuàng)建對(duì)應(yīng)的 SAP UI5 控件實(shí)例。而 C4C 則是基于組件視圖文件，進(jìn)行控件實(shí)例化，這算是 C4C 組件使用 SAP UI5 的獨(dú)特之處。

關(guān)于 C4C 組件設(shè)計(jì)的更多細(xì)節(jié)和其與 SAP UI5 框架交互的深入分析，請(qǐng)參考我的同事 Yang Joey 的文章: SAP Cloud for Customer 使用 SAP UI5 的獨(dú)特之處。

SAP Commerce Cloud

SAP Commerce Cloud UI 作為 Headless Commerce 即無(wú)頭電商架構(gòu)的前端展現(xiàn)層，是一個(gè) 100% API 驅(qū)動(dòng)的電商 Storefront：店鋪待顯示的組件列表，通過(guò) API 調(diào)用的方式從 Commerce Cloud 后臺(tái)端的內(nèi)容管理系統(tǒng)(Content Management System，簡(jiǎn)稱 CMS)中獲取，而店鋪具體顯示的視圖效果和與用戶交互的邏輯，由前端基于 Angular 的組件實(shí)現(xiàn)。

以 SAP Commerce Cloud UI 打開(kāi)后顯示的默認(rèn)主頁(yè)為例，該頁(yè)面的 id 為 homepage，其頁(yè)面顯示的內(nèi)容列表，在 SAP Commerce Cloud Backoffice CMS 控制臺(tái)中定義。

SAP Commerce Cloud 中一個(gè)頁(yè)面被劃分成若干個(gè)區(qū)域，這些區(qū)域被所謂的 ContentSlot(內(nèi)容插槽)來(lái)區(qū)分，這個(gè)名稱很形象——每個(gè)內(nèi)容插槽，允許插入一個(gè)或者多個(gè)組件。

在 CMS Page 編輯頁(yè)面里，點(diǎn)擊 Content Slots 面板，定義該頁(yè)面由哪些內(nèi)容插槽組成：

下圖展示了 homepage 由內(nèi)容插槽 Section1, Section2A，Section2B，Section2C 等區(qū)域組成。

一個(gè) Content Slot 可以容納多個(gè)組件，下圖展示了 Section1 這個(gè) Content Slot，容納 Electronics Homepage Splash Banner Component 和 Electronics Homepage Splash Discount Component 這兩個(gè)組件。

大家可以類比前文介紹的 SAP CRM 容器組件，用戶可以指定容器組件內(nèi)顯示哪些其他組件的視圖，二者的設(shè)計(jì)思路是一致的。

SAP Commerce Cloud CMS 只負(fù)責(zé)定義頁(yè)面的 Content Slots 信息和 Content Slots 內(nèi)包含的組件信息，而不負(fù)責(zé)具體的頁(yè)面視圖開(kāi)發(fā)以及用戶交互邏輯開(kāi)發(fā)——后者均是由 Jerry 所在的團(tuán)隊(duì)，開(kāi)發(fā)的 SAP Spartacus 這個(gè)開(kāi)源項(xiàng)目里實(shí)現(xiàn)。

每一個(gè)在 SAP Commerce Cloud CMS 中定義的組件，在 SAP Spartacus 中都有一個(gè)與之一一對(duì)應(yīng)的 Angular 組件。

當(dāng)在瀏覽器中打開(kāi) SAP Commerce Cloud UI 時(shí)，SAP Spartacus 會(huì)發(fā)起一個(gè) API 調(diào)用，向 Commerce Cloud 后臺(tái)索取該頁(yè)面的 CMS 信息。下圖展示了 homepage 在 CMS 中的建模信息，通過(guò) API 調(diào)用的方式返回給 SAP Spartacus：

其中 Section1 這個(gè) Content Slot 里包含的兩個(gè) Components 名稱，正是我之前在 Commerce Cloud CMS 里維護(hù)的兩個(gè) Component：

SAP Spartacus 接收到這些 API 響應(yīng)后，解析出 CMS Component 的名稱以及與其一一對(duì)應(yīng)的 Angular Component 的名稱，將后者動(dòng)態(tài)渲染出來(lái)。

下圖是 SAP Commerce Cloud 默認(rèn)的主頁(yè)：

如何才能知道其中哪個(gè)區(qū)域，代表我前文提到的內(nèi)容插槽 Section1，及放置在其中的兩個(gè)組件呢？

我在 SAP Spartacus 渲染 Content Slots 中放置的組件代碼位置處，加上了一些調(diào)試信息，打印出了 Slot ID 和 Component ID，便于大家理解：

刷新 SAP Commerce Cloud 頁(yè)面：

根據(jù)頁(yè)面上打印的調(diào)試信息，一目了然，下圖黃色高亮部分，代表 ID 為 Section1 這個(gè)內(nèi)容插槽在頁(yè)面上的起始位置。綠色高亮為 Section1 包含的兩個(gè)組件的 ID，而紅色及藍(lán)色矩形框，代表的是這兩個(gè)組件被 Angular 渲染后的最終顯示效果：

總結(jié)

本文概述了 SAP CRM，SAP S/4HANA，SAP Cloud for Customer 和 SAP Commerce Cloud 這四個(gè)產(chǎn)品中前端 UI 開(kāi)發(fā)中使用到的組件理念。雖然具體實(shí)現(xiàn)技術(shù)不同，但這四個(gè)產(chǎn)品前端的組件，都體現(xiàn)了對(duì)各自完成功能的封裝，以及作為應(yīng)用程序前端界面構(gòu)建塊的用途。

由于篇幅所限，本文沒(méi)有辦法針對(duì)每個(gè)產(chǎn)品逐一展開(kāi)深入介紹，大家可以使用我這篇文章 如何高效搜索汪子熙公眾號(hào)發(fā)表的文章 介紹的搜索功能，搜索本公眾號(hào)之前發(fā)布的文章，以對(duì)這些產(chǎn)品的 UI 開(kāi)發(fā)技術(shù)進(jìn)行深入了解。