Jerry previously wrote an article on wechat public account titled “SAP UI and Salesforce UI Development Talk”.

After following my public id “Wang Zixi”, you can find this article in the history menu “Front-end Development Related” :

This article briefly reviews the history of SAP UI technology and then mentions technologies and frameworks such as Salesforce’s Apex and Lighting Component.

directory

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

I also drew a simple picture:

R1 and mainframe-specific R2 were too old for us, and the only way we could experience the look of these old things was through the retro Theme in SAPGUI, the Classical Theme.

In 1992, BSP(Business Server Page), which is similar to JSP technology, was introduced to realize dynamic web page effects with the help of ABAP language executed on the server side.

At runtime, each BSP page automatically generates a temporary ABAP class that executes the ABAP code embedded in these BSP pages and renders the results into native HTML code.

It is worth mentioning that BSP technology is compatible with ordinary HTML/JavaScript applications. In other words, almost all HTML/ javascript-based Web applications that can run on web servers other than Netweaver can also run on Netweaver using BSP as a carrier. Therefore, even many Fiori UI applications in SAP’s flagship product S/4HANA are stored in Netweaver with BSP applications as the carrier.

For example, the Fiori app for S/4HANA Material Master data Management, whose name can be seen in Chrome developer Tools:

The BSP application can be found in Netweaver:

The fact that BSP technology is still in service today, which was born in 1992, is a miracle in itself. Of course, it also has some limitations due to historical reasons:

  1. The development was not efficient enough, there was no concept like the control library in later UI5, resulting in developers having to duplicate many wheels. SAP later released some BSP extensions of its own, similar to tags in JSPS, to compensate for the lack of development efficiency.

In addition, the BSP development tool only has transaction code SE80 in SAPGUI, which is not friendly enough for HTML and JavaScript development. Therefore, the later development of SAP Fiori also adopted the local modern IDE such as Eclipse to do development, and then uploaded to Netweaver to automatically generate BSP.

  1. Without the concept of MVC, the development of large-scale enterprise-level applications is inadequate.

It is because of these two defects exposed that webuis and Webdynpro came out. For a detailed introduction to these two front-end technologies, please refer to Jerry’s wechat article: SAP UI and Salesforce UI Development. I won’t repeat it here, but I’ll talk about some things that I didn’t mention in this article.

The highlight of ABAP Webdynpro is its ability to develop UI interfaces in a WYSIWYG manner. The disadvantage is that it no longer supports traditional HTML/JavaScript compatibility like BSP, so it cannot achieve some requirements for interface complexity and interactivity.

While inheriting all the advantages of BSP, WebUI provides MVC encapsulation on the basis of BSP, which greatly improves the development efficiency. At the same time, the developed Web application structure is clear, and there will no longer be thousands of lines of code on a view page.

The following figure shows a typical WebUI model, with three LAYERS of MVC clearly defined in the Workbench.

WebUI and ABAP Webdynpro are still widely used in SAP products. Web user interface (WebUI) continues to play an important role in THE CRM module of S/4HANA. For details, please read my article Hello World, S/4HANA for Customer Management 1.0

Webdynpro is the mainstream technology of SAP SRM UI development.

Search all the websites on the public network using SAP BSP technology: www.google.com/search?q=in…

Using Webdynpro:

As time went on, users became more demanding about the experience of accessing the web on mobile devices, hence the front-end technology that SAP practitioners are now familiar with: SAP UI5.

For the latest development direction of UI5 technology, please follow my official account “Wang Zixi” and read this article I wrote:

Fiori Fundamentals and SAP UI5 Web Components

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: