SAP 前端技術的演化史簡介

Jerry之前曾經寫過一篇微信公眾號文章，題目叫<<SAP UI和Salesforce UI開發漫談>>

關注我的公號“汪子熙”後，在歷史選單“前端開發相關”裡即可找到這篇文章：

該文章簡單回顧了SAP UI技術的發展歷史，然後提了下Salesforce的Apex和Lighting Component等技術和框架。

目錄

SAP UI
SAP GUI + Dynpro
Web Dynpro
BSP/CRM WebClient UI
SAP UI5/Fiori
UI5 in SAP Cloud for Customer
Hybris Enterprise Commerce Platform

---

Salesforce UI
Apex
Lightning Experience
Aura Framework
Lightning Component Framework
Visualforce

我也畫了張簡單的圖：

R1和針對於大型機的R2對我們來說實在太古老了，對我們來說，只能透過SAPGUI裡的復古主題，即Classical Theme來體驗一下這些老古董的外觀風采。

到了1992年出現了類似JSP技術的BSP(business server page)，能夠藉助在伺服器端執行的ABAP語言實現動態網頁效果。

在執行時，每個BSP頁面會自動生成一個臨時的ABAP類，執行這些BSP頁面上嵌入的ABAP程式碼，執行的結果再渲染成原生的HTML程式碼。

值得一提的是，BSP技術相容普通的HTML/JavaScript應用，換句話說，幾乎所有能執行在除Netweaver以為的web伺服器上的基於HTML/JavaScript的web應用，也能以BSP為載體，執行在Netweaver上。因此，即使是如今SAP的旗艦級產品S/4HANA裡的很多Fiori UI應用，也是以BSP應用為載體儲存在Netweaver上的。

比如S/4HANA物料主資料管理的Fiori應用，其名稱在Chrome開發者工具裡能看到：

這個BSP應用在Netweaver上能找到：

誕生於1992年的BSP技術到了今天還在服役，這本身就是一個奇蹟了。當然它本身由於歷史原因也有一些侷限：

1. 開發效率不夠高，沒有類似後來UI5裡控制元件庫的概念，導致開發人員需要重複造很多輪子。SAP後來自己也釋出了一些BSP Extension，類似JSP裡的tag，以此來彌補開發效率的缺陷。

另外BSP的開發工具在SAPGUI裡只有事務碼SE80，這個工具在做HTML和JavaScript開發時顯得不夠友好。因此後期SAP Fiori開發也採取了在本地現代IDE比如Eclipse裡做開發，完畢後再上傳到Netweaver自動生成BSP的方式。

1. 沒有MVC的概念，在大型企業級應用開發中顯得力不從心。

正是由於暴露了這兩個缺陷，促成了WebUI和Webdynpro的問世。對這兩種前端技術的詳細介紹，請參考Jerry之前提到的微信文章：SAP UI和Salesforce UI開發漫談，這裡不再重複，只是聊聊一些該文章中沒有提過的內容。

ABAP Webdynpro的亮點就是能夠以所見即所得的方式進行UI介面開發，缺點是不再支援類似BSP那樣相容傳統的HTML/JavaScript，因此無法實現某些對介面複雜度和互動性要求較高的需求。

而WebUI在繼承了BSP所有優點的同時，在BSP基礎上提供了對MVC的封裝，使得開發效率大大提高，同時開發出來的Web應用結構清晰，不再會出現一個檢視頁面幾千行程式碼的情況。

下圖是一個典型的WebUI模型，MVC三層在workbench裡有清晰的界定。

WebUI和ABAP Webdynpro至今仍廣泛應用於SAP產品中。在S/4HANA的CRM模組裡，WebUI繼續扮演著非常重要的角色，詳情請閱讀我下面這篇文章：Hello World, S/4HANA for Customer Management 1.0

而Webdynpro，是SAP SRM UI開發的主流技術。

搜尋公網上所有使用了SAP BSP技術的網站：

使用了Webdynpro的：

隨著時間的推移，使用者對移動裝置上訪問網頁的體驗要求越來越高，因此有了SAP從業者現在很熟悉的前端技術：SAP UI5。

關於UI5最新的技術發展方向，請關注我的公眾號“汪子熙”，閱讀我寫的這篇文章：

Fiori Fundamentals和SAP UI5 Web Components

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":