SAP 前端技術的演化史簡介

Jerry之前曾經寫過一篇微信公衆号文章，題目叫<>

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

該文章簡單回顧了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技術到了今天還在服役，這本身就是一個奇迹了。當然它本身由于曆史原因也有一些局限：

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

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

沒有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技術的網站：

https://www.google.com/search?q=inurl:/sap/bc/bsp/&gws_rd=ssl

使用了Webdynpro的：

随着時間的推移，使用者對移動裝置上通路網頁的體驗要求越來越高，是以有了SAP從業者現在很熟悉的前端技術：SAP UI5。

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

Fiori Fundamentals和SAP UI5 Web Components