Skip to content

Commit ab6d5d6

Browse files
authored
Update concept.md
1 parent df77e94 commit ab6d5d6

File tree

1 file changed

+5
-7
lines changed

1 file changed

+5
-7
lines changed

docs/advanced/technical/concept.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,7 @@ In this architecture the initial request delivers JavaScript and CSS assets, Sub
1919
<p align="center">
2020
<img width="400" alt="image" src="https://github.com/user-attachments/assets/a9fde24a-c572-4e5c-b203-59a0667b9931" />
2121
<br/>
22-
<em>
2322
HTML "Over the Wire" Lifecycle
24-
</em>
2523
</p>
2624

2725
This results in a clean and lightweight frontend — a pure rendering layer — while all logic remains under full control of the backend.
@@ -61,7 +59,7 @@ In short: Over-the-Wire sends only partial HTML updates, while SSR reloads the f
6159
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:
6260

6361
<p align="center">
64-
<img width="600" alt="image" src="https://github.com/user-attachments/assets/3b2a884e-e899-4b60-8a95-79b418f33657" />
62+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/3b2a884e-e899-4b60-8a95-79b418f33657" />
6563
</p>
6664

6765
UI5 Freestyle - ABAP Stack delivers only Data
@@ -71,24 +69,24 @@ As we need UI5 for rendering the HTML and it is a client side framework we are l
7169
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:
7270

7371
<p align="center">
74-
<img width="600" alt="image" src="https://github.com/user-attachments/assets/9717f500-c0de-4428-a996-11fc131c073c" />
72+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/9717f500-c0de-4428-a996-11fc131c073c" />
7573
</p>
7674
"UI5 Over the Wire" - ABAP delivers Data & View
7775

7876
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:
7977
<p align="center">
80-
<img width="400" alt="image" src="https://github.com/user-attachments/assets/17a3a301-b698-4704-9cbc-43798c5bd600" />
78+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/17a3a301-b698-4704-9cbc-43798c5bd600" />
8179
</p>
8280
UI5 app downgraded - Displaying Data & View received from the server
8381

8482
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:
8583

8684
<p align="center">
87-
<img width="400" alt="image" src="https://github.com/user-attachments/assets/2c9f8dc1-c6d8-4e93-80a2-b50bfc1d5ec1" />
85+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/2c9f8dc1-c6d8-4e93-80a2-b50bfc1d5ec1" />
8886
</p>
8987
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:
9088

91-
<img width="400" alt="image" src="https://github.com/user-attachments/assets/3b464d0b-19fd-400c-a7e4-3eec893f7724" />
89+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/3b464d0b-19fd-400c-a7e4-3eec893f7724" />
9290

9391
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_
9492

0 commit comments

Comments
 (0)