今年由于疫情原因，SAP一年一度的DKOM(Developer Kick-Off Meeting)切換成了線上模式，剛剛于昨天圓滿落幕。

時間過得真快，去年的DKOM仿佛還歷歷在目：SAP成都研究院數(shù)字創(chuàng)新空間小伙伴們在2020 SAP上海DKOM.

但是Jerry昨天沒有太多時間去在線觀看，只因為… 我們團隊昨天收到了一個優(yōu)先級為VERY HIGH的客戶incident：

這個incident是客戶在使用SAP Spartacus并試圖啟用其服務(wù)器端渲染模式(Server Side Rendering，簡稱SSR)時，遇到了問題，因此我有機會回顧之前使用過的SAP UI開發(fā)技術(shù)里，關(guān)于客戶端渲染(Client Side Rendering，簡稱CSR)和服務(wù)器端渲染的知識點。

回顧目錄

• SAP ABAP Webdynpro - 服務(wù)器端渲染
• SAP BSP / WebClient UI - 服務(wù)器端渲染
• SAP UI5 - 客戶端渲染
• SAP Commerce Cloud Accelerator UI - 服務(wù)器端渲染
• Jerry手頭正在處理的incident - SAP * Spartacus Angular UI - 客戶端渲染 & 服務(wù)器端渲染

Jerry 2018年曾經(jīng)寫過一篇文章，SAP UI和Salesforce UI開發(fā)漫談 ，對我曾經(jīng)工作過的SAP產(chǎn)品里，所使用過的UI開發(fā)技術(shù)做了泛泛的介紹。

而本文，則是對這些UI技術(shù)采用的頁面渲染方式做一個簡單的總結(jié)。

客戶端渲染 VS 服務(wù)器端渲染

這組概念的比較，在網(wǎng)上有眾多文章介紹。

客戶端渲染，即客戶端發(fā)起HTML網(wǎng)頁請求時，服務(wù)器不做任何處理，直接返回靜態(tài)的HTML文件。客戶端收到后，執(zhí)行JavaScript，生成DOM，插入HTML頁面，完成最終頁面的繪制。

客戶端渲染模式里，視圖源代碼生成，頁面路由，以及應(yīng)用的業(yè)務(wù)邏輯，全部放在客戶端實現(xiàn)和運行執(zhí)。服務(wù)器只負(fù)責(zé)HTML頁面的持久化存儲，因此客戶端渲染應(yīng)用又稱為胖客戶端應(yīng)用(Rich Client Application).

而服務(wù)器端渲染模式里，視圖源代碼生成，頁面路由，以及應(yīng)用的業(yè)務(wù)邏輯均在服務(wù)器端完成，客戶端只負(fù)責(zé)接收到服務(wù)器端渲染好的HTML源代碼并解析。

兩種渲染方式各有優(yōu)缺點，及其應(yīng)用場合。

SAP ABAP Webdynpro - 服務(wù)器端渲染

應(yīng)用開發(fā)人員以所見即所得的方式開發(fā)ABAP Webdynpro的視圖，其源代碼存儲于ABAP系統(tǒng)的數(shù)據(jù)庫表里。ABAP Webdynpro的視圖同用戶的交互通過Action和Event完成，交互邏輯由ABAP實現(xiàn)，在ABAP服務(wù)器端執(zhí)行。

比如我開發(fā)了一個ABAP Webdynpro UI，在Input字段里輸入一個數(shù)字：

點擊Create按鈕之后，能夠動態(tài)生成對應(yīng)數(shù)量的Label和Text View控件：

而這些UI的動態(tài)繪制，是通過服務(wù)器端的ABAP編程語言，實現(xiàn)在Create按鈕的事件處理函數(shù)里的。點擊Create按鈕，運行在服務(wù)器端的ABAP代碼即觸發(fā)，動態(tài)創(chuàng)建新的UI控件實例。

SAP BSP / WebClient UI - 服務(wù)器端渲染

SAP BSP的名稱Business Server Page已經(jīng)告訴我們，這也是一種服務(wù)器端渲染技術(shù)。SAP WebClient UI基于SAP BSP，封裝了很多開發(fā)人員可以直接重用的標(biāo)簽，提高了UI開發(fā)效率。

舉個例子，下圖是一個典型的使用SAP WebClient UI實現(xiàn)的搜索頁面(searchFrame)，第2行和第3行聲明了SAP標(biāo)準(zhǔn)元素庫thtmlb和chtmlb的引用，然后在第11行使用了thtmlb庫里的標(biāo)簽searchFrame。

短短29行代碼，就繪制出了如下圖的搜索界面：不僅支持通過下拉菜單更換搜索條件，也支持通過帶有 + 和 - 的圓形按鈕添加或者刪除搜索條件。

如此一來，應(yīng)用程序開發(fā)人員無需再去編寫原生的HTML代碼和CSS，只需重用searchFrame標(biāo)簽，在運行時期，標(biāo)簽對應(yīng)的Render類會負(fù)責(zé)生成原生的HTML代碼。在下列高亮ABAP類的方法里設(shè)置斷點，就能調(diào)試searchFrame界面源代碼在服務(wù)器端渲染的明細(xì)。

在Jerry這兩篇文章里，對SAP WebClient UI技術(shù)的工作原理有詳細(xì)的介紹：

• SAP UI和Salesforce UI開發(fā)漫談
• SAP UI 搜索分頁技術(shù)

總結(jié)：SAP ABAP Webdynpro，SAP BSP和SAP WebClient UI，頁面源代碼的渲染發(fā)生在ABAP服務(wù)器端。如果需要調(diào)試這些頁面的源代碼生成邏輯，需要找到對應(yīng)的ABAP類，在ABAP服務(wù)器端進(jìn)行調(diào)試。

SAP UI5 - 客戶端渲染

Jerry之前的文章 深入學(xué)習(xí)SAP UI5框架代碼系列之二：UI5 控件的渲染器，對SAP UI5應(yīng)用的頁面渲染 做過介紹。

基于客戶端渲染的SAP UI5應(yīng)用，如果要調(diào)試其頁面生成邏輯，需要在瀏覽器里調(diào)試JavaScript代碼的執(zhí)行。

正因為基于客戶端渲染的應(yīng)用，其頁面通過JavaScript在瀏覽器的執(zhí)行而動態(tài)生成，因此其內(nèi)容無法被一般的網(wǎng)絡(luò)爬蟲收錄，不利于SEO(Search Engine Optimization，搜索引擎優(yōu)化).

Jerry出于好奇，搜索了OpenUI5的Github倉庫，沒有發(fā)現(xiàn)其對服務(wù)器端渲染模式支持的線索。

SAP Commerce Cloud Accelerator UI - 服務(wù)器端渲染

Accelerator UI采用和SAP BSP類似的JSP技術(shù)，服務(wù)器端渲染。

根據(jù)SAP官方文檔，Accelerator UI最終會被SAP Spartacus所替代，所以本文不對Accelerator的JSP展開描述。

對Accelerator UI JSP實現(xiàn)細(xì)節(jié)感興趣的朋友可以參考Jerry之前的文章：

SAP UI和Salesforce UI開發(fā)漫談

SAP Spartacus Angular UI - 客戶端渲染 & 服務(wù)器端渲染

最后再說到Jerry最近手頭上使用的Angular. 作為一款單頁面應(yīng)用(SPA，Single Page Application)開發(fā)框架，為了彌補客戶端渲染技術(shù)在搜索引擎優(yōu)化方面表現(xiàn)不佳的缺陷，Angular也同時支持服務(wù)器端渲染模式。

先看Angular常規(guī)的客戶端渲染模式。

SAP Spartacus的index.html，幾乎就是一個空的HTML頁面：只包含一個空的自定義標(biāo)簽cx-storefront:

在客戶端渲染模式下，服務(wù)器返回給瀏覽器的第一個請求，包含的正是這個幾乎空白的index.html頁面：

這個index.html頁面尺寸只有4kB，耗時309毫秒：

其后，我們團隊用TypeScript開發(fā)，然后編譯成的JavaScript代碼，在瀏覽器里執(zhí)行，渲染出最終的HTML頁面：

再看Spartacus的服務(wù)器端渲染的表現(xiàn)：服務(wù)器收到瀏覽器的頁面請求后，在服務(wù)器端即時渲染頁面，并將結(jié)果返回：

在服務(wù)器端渲染模式下，第一個HTTP請求的響應(yīng)數(shù)據(jù)里，包含了Spartacus home頁面的完整HTML源代碼：

服務(wù)器端渲染模式的支持，為網(wǎng)絡(luò)爬蟲解析完整的網(wǎng)頁內(nèi)容，掃清了障礙。

我們使用命令行工具curl，模擬網(wǎng)絡(luò)爬蟲讀取SAP Spartacus首頁內(nèi)容，在服務(wù)器端和客戶端渲染模式下，讀取到的內(nèi)容大小比較如下圖所示：

當(dāng)然，Angular對服務(wù)器端渲染的支持，絕不是開箱即用的。除了引入@angular/platform-server和@nguniversal/express-engine之外，還需要對現(xiàn)有的基于客戶端渲染的應(yīng)用做一些增強。

此外，如之前Jerry 文章 Jerry在2020 SAP全球技術(shù)大會的分享：SAP Spartacus技術(shù)介紹的文字版 提及的，SAP Spartacus是以庫文件的方式發(fā)布給SAP合作伙伴使用的。二次開發(fā)人員使用Spartacus庫文件，開發(fā)出符合自己實際業(yè)務(wù)需要的Storefront應(yīng)用，而二次開發(fā)過程中，合作伙伴自己編寫的前端代碼，理論上也可能會影響Angular應(yīng)用服務(wù)器端渲染功能的開啟，比如Jerry和同事這次處理的這個優(yōu)先級為VERY HIGH的客戶incident(具體原因還在分析中).

希望通過本文舉出的SAP Spartacus的這個實際例子，讓大家對服務(wù)器端渲染和客戶端渲染的差異有一個直觀的感受，感謝閱讀。

更多閱讀

• SAP UI和Salesforce UI開發(fā)漫談

• SAP UI 搜索分頁技術(shù)

• Jerry在2020 SAP全球技術(shù)大會的分享：SAP Spartacus技術(shù)介紹的文字版

• SAP UI5應(yīng)用開發(fā)人員了解UI5框架代碼的意義

• SAP UI5 module懶加載機制

• SAP UI5 控件渲染機制

• HTML原生事件 VS SAP UI5 Semantic事件

• SAP UI5控件元數(shù)據(jù)的元數(shù)據(jù)實現(xiàn)

• SAP UI5控件的實例數(shù)據(jù)修改和讀取邏輯

• SAP UI5控件數(shù)據(jù)綁定的實現(xiàn)原理

• SAP UI5控件數(shù)據(jù)綁定的三種模式：One Way, Two Way和OneTime實現(xiàn)原理比較

• SAP UI5控件ID的生成邏輯

• SAP UI5控件的多語言(國際化,Internationalization,i18n)支持的實現(xiàn)原理

• XML視圖里的button控件

• button控件和它背后的DOM元素

• SAP UI5 OData謠言粉碎機：極短時間內(nèi)發(fā)送兩個Odata request,前一個會自動被cancel掉嗎

• 漫談SAP產(chǎn)品里頁面上的Checkbox設(shè)計與實現(xiàn)系列之一

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP UI渲染模式：客户端渲染 VS 服务器端渲染的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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