Skip to content

Commit 7dd37d8

Browse files
authored
updates
1 parent 415bbf0 commit 7dd37d8

File tree

4 files changed

+112
-2
lines changed

4 files changed

+112
-2
lines changed

docs/.vitepress/config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@ export default defineConfig({
169169
{ text: 'Developer Experience', link: '/advanced/technical/dx' },
170170
{ text: 'Cloud Readiness', link: '/advanced/technical/cloud' },
171171
{ text: 'REST', link: '/advanced/technical/rest' },
172+
{ text: 'Runtime, Designtime', link: '/advanced/technical/runtime' },
172173
{ text: 'Technology', link: '/advanced/technical/overview', items: [
173174
{ text: 'UI5 Freestyle', link: '/advanced/technical/ui5' },
174175
{ text: 'RAP', link: '/advanced/technical/rap' },

docs/advanced/technical/dx.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,40 @@
11
# DX: ALV & Selection-Screen Style?
22

33

4-
hello world small app
4+
hello world small app
5+
6+
7+
##### 9. One HTTP-Service for all Apps
8+
9+
First, we do not define a specific HTTP-Service for transmitting the View and the Data. Instead, every app uses the same generic HTTP-Handler including two strings (one for the View and one for the Data) eliminating the need to develop individual OData-Services with SEGW or CDS. During runtime the ABAP variables & tables are transformed into a JSON-Model and transmitted as a string to the frontend. In JavaScript it is parsed again into a JSON-Model and binded to the UI5-View:
10+
11+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/163ca12b-fe37-43e8-80b6-a5eaae703d69" />
12+
13+
Data Transfer in abap2UI5 - ABAP variables & tables are automatically synchronized with the UI5-Model
14+
15+
Furthermore we not only send the data but also the metadata (Data Model) with every request (7). This is different from classic OData communication, where the metadata is sent with the initial OData request to establish the model at the beginning, and only the data is exchanged afterward. With this approach, we can now send different models with every request:
16+
17+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/95fe59c3-7e8a-4e21-8690-12de1110779f" />
18+
19+
OData vs. UI5 Over the Wire - Model & Data transfer
20+
21+
22+
##### 13. HTTP-Service
23+
24+
All apps and data models use the same single generic HTTP-Handler, which can be observed by setting a breakpoint in your app and examining the call stack.
25+
26+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/1ce80652-4105-4ee5-84e8-35a87eb47556" />
27+
28+
Call stack of an abap2UI5 app
29+
30+
Every app implementation is a REST-based HTTP-Post implementation, in which no session is maintained between two requests.
31+
32+
##### 23. As simple as possible
33+
34+
So, we have seen in (22), apps can be made very complex, but the opposite is also possible - we can make them extremely simple. One beautifully minimalistic approach is the use of if_oo_adt_classrun. By implementing just one method, we can generate an output with a single click (F9). This is extremely efficient and was one of the role models for abap2UI5. Here's a comparison of both approaches:
35+
36+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/28a09830-ba3a-4608-aab9-5f4af8028a18" />
37+
38+
if_oo_adt_classrun vs. abap2UI5
39+
40+
To summarize what we have covered so far, abap2UI5 is built in a highly generic manner, placing most of the responsibility on the user's apps. As a result, we gain a a lot of flexibility and freedom in the app implementation, but we also have full responsibility for the view creation and the program flow. Furthermore we have to keep the following downsides in mind.

docs/advanced/technical/rest.md

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,40 @@
1-
# REST: Where Did My Sessions Go?
1+
# REST: Where Did My Sessions Go?
2+
3+
4+
5+
##### 14. REST
6+
7+
This makes it compatible with all mobile use cases and devices, as well as with 'RESTful' Environments such as the BTP ABAP Environment and the new language version 'ABAP Cloud'. Similar to an OData-Implementation, where data changes are reflected in the app without requiring an app restart, it is now possible to develop the entire application and modify its view without restarting the frontend app. Take a look at this demo:
8+
9+
![gif_dev](https://github.com/user-attachments/assets/c2c1afce-7d72-46a2-b0a7-7725c70bf5f4)
10+
11+
Developing the ABAP class without restarting the frontend app
12+
13+
We get also the advantage shared by all over-the-wire approaches that there is no need for cache busting anymore, as the frontend app remains unchanged during the development process.
14+
15+
Up until now, we have observed that the abap2UI5 frontend app is unaware of the specific application, just like the generic HTTP-Service on the server, which has also no knowledge of the particular model and view it is transmitting. So, which layer ultimately defines what happens in this architecture?
16+
17+
18+
##### 16. Draft
19+
20+
With RAP, users can save interim results in drafts, giving them the opportunity to interrupt their work and continue later. The abap2UI5 architecture works as if we send a completely new app to the frontend after every event, but we still want to preserve the inputs and state that the user has made before. To achieve this, the z2ui5_if_app interface includes the if_serializable_object interface, which enables us to serialize and persist all important information of every request (such as the current view or its status):
21+
22+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/fc13f32d-3145-4510-a2d8-a0b646fdd6c4" />
23+
24+
z2ui5_t_draft - the abap2UI5 persistence for interim results
25+
26+
Furthermore, these drafts help us jump back to previous states with minimal effort, reducing the complexity that we would typically encounter in an HDA scenario when implementing a cancel or exit event of a view. Similar to the HTTP-Service, these drafts are also defined only in a generic way, eliminating the need to manually create typed draft tables for every data model, as required in RAP, and reducing again the number of backend artifacts:
27+
28+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/c32335ae-6d10-4b12-9fd1-786a0da595fe" />
29+
30+
RAP vs. Single (generic) Draft Table in abap2UI5
31+
32+
With this approach, we achieve a stateful-like PAI/PBO feeling similar to SAP GUI apps, even though we are still operating within the AJAX roundtrip logic. Furthermore since every request can be made to a different application server, abap2UI5 is compatible with scalable cloud environments, ensuring compatibility for future use:
33+
34+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/0c62e222-06b7-4f16-af2d-3663fd6df796" />
35+
36+
SAP GUI (stateful) vs. abap2UI5 (restful)
37+
38+
However, it is important to note that this feature should only be used for interim results and be cautious when serializing other parts of your app.
39+
40+
We have gained a lot of flexibility with (9) (10) (11) (16), now the next sections will focus more on how the framework tries to reduce its complexity. Let's begin by taking a look at the initial request.

docs/advanced/technical/runtime.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Runtime
2+
3+
4+
##### 10. Define Model at Runtime
5+
6+
This enables the possibility to define models not only at design time, but also at runtime. The user doesn't have to do any extra work because abap2UI5 handles the entire process in the background during every AJAX request:
7+
8+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/e9f1bf8c-6d8c-44ad-ba89-c3648b638335" />
9+
10+
abap2UI5 - Dynamic Data Binding & Model Creation
11+
12+
In apps we can use RTTI now again in a way that is similar to how it was used with ALVs. This means that there is no need to create separated apps for each model. In this demo, you can see an abap2UI5 app with a view including a table output that displays a generic table and its type is created and modified at runtime (similar to SE16):
13+
14+
![gif_se16_2](https://github.com/user-attachments/assets/20b4a140-7954-45b0-8d0e-8aa1e8a6f1f5)
15+
16+
Replacing the Model (metadata) at Runtime
17+
18+
19+
##### 11. Define View at Runtime
20+
21+
Same for the view: In RAP, only certain predefined control attributes can be modified at runtime, while the view is defined in CDS artifacts with UI annotations previously. However, in an abap2UI5 app, it is possible to replace entire view controls. For example, in the following app, a table control is replaced with a list control and vice versa:
22+
23+
![gif_ui_change2-1](https://github.com/user-attachments/assets/b6e081e4-2eae-4175-aca8-fc761b145762)
24+
Replacing the View at Runtime
25+
26+
##### 12. View & Model independent from the HTTP-Service
27+
28+
In the end, the View & Model are defined independent from the HTTP-Service and we are no longer forced to deliver a predefined static OData-Service for every app, as is the case in RAP. The number of backend artifacts is significantly reduced:
29+
30+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/6fb61790-87bc-47fa-855e-83d5292b70f3" />
31+
32+
RAP vs. Model & View decoupled from the (single & generic) HTTP-Service
33+
34+
Let's take a look to the HTTP-Handler that provides us with this flexibility.

0 commit comments

Comments
 (0)