Skip to content

Commit 3462a38

Browse files
authored
Update concept.md
1 parent ccda371 commit 3462a38

File tree

1 file changed

+22
-8
lines changed

1 file changed

+22
-8
lines changed

docs/advanced/technical/concept.md

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,39 +53,47 @@ Architectural Comparison:
5353
| **Over-the-Wire** | HTML fragments for partial updates | Server renders, browser inserts | 2020s (re-emerging) |
5454

5555

56-
#### How can we adapt this to UI5?
56+
#### How works UI5?
5757

5858
UI5 freestyle apps follow the SPA model. All rtifacts are stored at the frontend and the backend supplies data through OData, while all rendering and logic execution occur in the browser:
5959

6060
<p align="center">
61-
<img width="500" alt="image" src="https://github.com/user-attachments/assets/3b2a884e-e899-4b60-8a95-79b418f33657" />
61+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/afb6e1bd-b60d-4890-ba47-5edd00da26c7" />
6262
</p>
6363

6464
UI5 Freestyle - ABAP Stack delivers only Data
6565

6666
As we need UI5 for rendering the HTML and it is a client side framework we are limited here, we can not build HTML in the backend and send it from there. But there is a defining feature of UI5 and its use of XML views to generate HTML. These views reside on the frontend and are populated with server JSON data. XML-Views and JSON Darta is used by the UI5 framework to generate the HTML at the frontend.
6767

68+
69+
#### Can we send the View from the backend?
70+
6871
abap2UI5 introduces here the first a small shift: what if the server now also delivers the xml view? The frontend becomes a passive display layer for views and data received from the server:
6972

7073
<p align="center">
71-
<img width="500" alt="image" src="https://github.com/user-attachments/assets/9717f500-c0de-4428-a996-11fc131c073c" />
74+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/ecd6e798-b6f6-4816-89ca-90f20647eb04" />
7275
</p>
76+
7377
"UI5 Over the Wire" - ABAP delivers Data & View
7478

7579
Although the frontend still renders HTML, all relevant information (view and data) is obtained from the backend via AJAX. The UI5 application technically remains an SPA but now functions solely as a rendering layer for the server-defined UI and Data:
7680
<p align="center">
77-
<img width="500" alt="image" src="https://github.com/user-attachments/assets/17a3a301-b698-4704-9cbc-43798c5bd600" />
81+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/3b464d0b-19fd-400c-a7e4-3eec893f7724" />
82+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/2c9f8dc1-c6d8-4e93-80a2-b50bfc1d5ec1" />
83+
7884
</p>
7985
UI5 app downgraded - Displaying Data & View received from the server
8086

8187
The frontend is unaware of the current view (e.g., table, list, input) or the next actions. All logic is handled on the backend. The frontend app is a static UI5 application delivered with the first request:
8288

83-
<p align="center">
84-
<img width="500" alt="image" src="https://github.com/user-attachments/assets/2c9f8dc1-c6d8-4e93-80a2-b50bfc1d5ec1" />
85-
</p>
89+
#### How can we use the model?
90+
91+
8692
The app renders the provided view and data, then returns any triggered events to the backend, which decides what should happen next. This process resembles the classical PAI/PBO model from SAP GUI applications:
8793

88-
<img width="500" alt="image" src="https://github.com/user-attachments/assets/3b464d0b-19fd-400c-a7e4-3eec893f7724" />
94+
<p align="center">
95+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/9717f500-c0de-4428-a996-11fc131c073c" />
96+
</p>
8997

9098
Communication relies on AJAX roundtrips akin to HTML Over the Wire, but pure HTML cannot be sent since UI5 still requires XML views and JSON models. abap2UI5 leverages UI5's capability to render HTML from these constructs. This results in a model referred to as _UI5-XML-View Over-the-Wire_
9199

@@ -98,6 +106,12 @@ A typical response in this pattern includes both view and model data:
98106

99107
"UI5 Over the Wire" - Response with View & Data together
100108

109+
#### Where is the app logic?
110+
111+
112+
113+
114+
101115

102116
#### Partial HTML Updates
103117

0 commit comments

Comments
 (0)