This year, due to the epidemic, SAP’s annual Developer Kick-off Meeting (DKOM) switched to online mode and ended successfully yesterday.

How time flies, last year’s DKOM seems to still remember: SAP Chengdu Research Institute digital Innovation Space partners in 2020 SAP Shanghai DKOM.

But Jerry didn’t have much time to watch online yesterday, because… Our team received a customer Incident with a VERY HIGH priority yesterday:

The incident occurred when the client was using SAP Spartacus and trying to enable its Server Side Rendering (SSR) mode. Therefore, I had the opportunity to review the SAP UI development technology I had used before. Learn about Client Side Rendering (CSR) and server-side Rendering.

Review the directory

SAP ABAP Webdynpro – Server side rendering
SAP BSP/WebClient UI – Server-side rendering
SAP UI5 – Client rendering
SAP Commerce Cloud Accelerator UI – Server-side rendering
Jerry is dealing with incident – SAP * Spartacus Angular UI – client-side rendering & server-side rendering

Jerry wrote a 2018 post on SAP UI and Salesforce UI development, giving a broad overview of the UI development techniques used in SAP products I’ve worked on.

This article is a brief summary of the page rendering methods used by these UI technologies.

Client-side rendering VS server-side rendering

There are many articles on the web about the comparison of these concepts.

Client-side rendering, that is, when the client initiates an HTML web page request, the server does nothing and directly returns a static HTML file. After receiving it, the client executes JavaScript, generates DOM, inserts HTML pages, and completes the drawing of the final page.

In client rendering mode, view source code generation, page routing, and application business logic are all implemented and executed on the client side. The server is only responsible for the persistent storage of HTML pages, so the Client rendering Application is also called the Rich Client Application.

In server-side rendering mode, view source code generation, page routing, and application business logic are all done on the server side, and the client is only responsible for receiving and parsing the HTML source code rendered by the server side.

Both rendering methods have their own advantages and disadvantages, and their applications.

SAP ABAP Webdynpro – Server side rendering

Application developers develop views of ABAP Webdynpro on a WYSIWYG basis, with the source code stored in ABAP system database tables. ABAP Webdynpro views interact with users through actions and events. The interaction logic is implemented by ABAP and executed on the ABAP server.

For example, I developed an ABAP Webdynpro UI and entered a number in the Input field:

After clicking the Create button, you can dynamically generate the corresponding number of Label and Text View controls:

The dynamic rendering of the UI is implemented in the event handler of the Create button using the server-side ABAP programming language. Clicking the Create button triggers the ABAP code running on the server side to dynamically Create a new UI control instance.

SAP BSP/WebClient UI – Server-side rendering

As the name of SAP BSP, Business Server Page, tells us, this is also a server-side rendering technology. SAP WebClient UI is based on SAP BSP, which encapsulates many labels that developers can reuse directly, improving UI development efficiency.

For example, here is a typical search page (searchFrame) implemented using SAP WebClient UI. Lines 2 and 3 declare references to SAP standard element libraries THTMLB and CHTMLB, and line 11 uses the THTMLB library tag searchFrame.

In just 29 lines of code, we have a search interface like the one shown below: not only can we change search criteria through a drop-down menu, but we can also add or remove search criteria through a circular button with + and -.

Instead of writing native HTML code and CSS, the application developer reuses the searchFrame tag, whose corresponding Render class generates the native HTML code at run time. To debug details of the server-side rendering of the searchFrame interface source code, set breakpoints in the following highlighted ABAP class methods.

In Jerry’s two articles, the working principle of SAP WebClient UI technology is introduced in detail:

SAP UI vs. Salesforce UI Development
SAP UI search pagination technology

Summary: SAP ABAP Webdynpro, SAP BSP and SAP WebClient UI, page source rendering takes place on the ABAP server side. If you need to debug the source code generation logic for these pages, you need to find the corresponding ABAP class and debug it on the ABAP server side.

SAP UI5 – Client rendering

Jerry’s previous article took a closer look at SAP UI5 framework code series 2: Renderers for UI5 controls, which introduced page rendering for SAP UI5 applications.

To debug the page-generation logic of a SAP UI5 application based on client-side rendering, you need to debug the execution of JavaScript code in the browser.

Because of the application based on client rendering, its page is dynamically generated by JavaScript execution in the browser, so its content cannot be collected by the general web crawler, which is not conducive to SEO(Search Engine Optimization).

Curious, Jerry searched OpenUI5’s Github repository and found no hint of support for server-side rendering.

SAP Commerce Cloud Accelerator UI – Server-side rendering

Accelerator UI uses JSP technology similar to SAP BSP, server-side rendering.

According to SAP’s official documentation, Accelerator UI will eventually be replaced by SAP Spartacus, so this article will not describe Accelerator’S JSP.

Those interested in the details of the Accelerator UI JSP implementation can refer to Jerry’s previous article:

SAP UI vs. Salesforce UI Development

SAP Spartacus Angular UI – Client-side rendering & server-side rendering

Finally, Jerry recently used Angular. As a Single Page Application development framework, Angular also supports server-side rendering to compensate for the poor performance of client-side rendering in SEARCH engine optimization.

Start with Angular’s regular client-side rendering mode.

The index. HTML of SAP Spartacus is almost an empty HTML page: it contains only an empty custom tag cX-storefront:

In client rendering mode, the first request the server returns to the browser contains this almost blank index.html page:

The index.html page is only 4kB and takes 309 milliseconds:

Later, our team developed in TypeScript, compiled JavaScript code, executed in the browser, and rendered the final HTML page:

The server receives the browser’s request for a page, renders the page on the server, and returns the result:

In server-side render mode, the response data for the first HTTP request contains the complete HTML source code for the Spartacus Home page:

The support of server-side rendering mode clears the way for web crawlers to parse complete web pages.

We use the command line tool curl to simulate the web crawler to read the content of the SAP Spartacus home page. In the server-side and client-side rendering mode, the size of the content read is compared as shown in the figure below:

Of course, Angular’s support for server-side rendering is anything but out-of-the-box. In addition to the introduction of @Angular/platform-Server and @ngUniversal/Express-Engine, some enhancements to existing client-rendered applications are needed.

In addition, SAP Spartacus is distributed as a library file for use by SAP partners, as mentioned in Jerry’s previous post in the text version of Jerry’s share: SAP Spartacus Technology Introduction at THE 2020 SAP World Technology Conference. Secondary developers use Spartacus libraries to create Storefront applications that meet their business needs. In secondary development, partners write front-end code that could theoretically affect Angular application server rendering. For example, Jerry and his colleagues dealt with the customer incident with VERY HIGH priority this time (the specific reasons are still being analyzed).

The SAP Spartacus example will give you an intuitive sense of the difference between server-side rendering and client-side rendering. Thanks for reading.

Read more