Skip to content

Commit 6de8205

Browse files
authored
Update concept.md
1 parent 73c0d73 commit 6de8205

File tree

1 file changed

+16
-12
lines changed

1 file changed

+16
-12
lines changed

docs/advanced/technical/concept.md

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -60,54 +60,58 @@ UI5 freestyle apps follow the Single Page Application (SPA) model. All UI artifa
6060
<em>Freestyle - ABAP Stack delivers only Data</em>
6161
</p>
6262

63-
Because UI5 is a client-side rendering framework, HTML cannot be generated on the backend and sent to the client. Instead, HTML must be generated in the browser using JavaScript and the UI5 framework.
63+
Since UI5 is a client-side rendering framework, the HTML output cannot be generated on the backend and sent to the client. Instead, HTML is produced in the browser using the UI5 framework and its built-in render.
6464

6565
#### Sending Views from Backend
6666

67-
Fortunately, UI5 has a defining characteristic that allows us to shift part of the view generation to the backend. Normally, each view is defined in XML — the so-called UI5 XML View. The UI5 framework uses this XML, along with the data provided by the backend, to generate the HTML in the browser.
67+
Fortunately, UI5 has a defining characteristic that allows us to shift part of the view generation to the backend. Normally, each view is defined in XML — the so-called UI5 XML View. The UI5 framework uses this XML definition, combined with data from the backend, to render HTML in the browser.
6868

6969
<p align="center">
7070
<img width="500" alt="image" src="https://github.com/user-attachments/assets/a9bf8f85-54e7-476d-be87-2cd028334d2d" />
7171
<br/>
72-
<em>UI5 Freestyle – HTML is generated from XML View and data sent via OData</em>
72+
<em>UI5 Freestyle – The browser renders HTML based on XML View and backend data</em>
7373
</p>
7474

75-
abap2UI5 introduces now a subtle shift: what if the server also delivers the XML view?
75+
abap2UI5 introduces a subtle but important shift: what if the server also delivers the XML view?
7676

77-
Although HTML rendering still occurs on the frontend, all relevant information — the view and the data — is provided by the backend via AJAX:
77+
While HTML rendering still happens on the frontend, both the view definition and the corresponding data are now delivered from the backend via AJAX:
7878

7979
<p align="center">
8080
<img width="500" alt="image" src="https://github.com/user-attachments/assets/ec1ac3f8-65fb-4155-84f6-1ec61a088c40" />
8181
<br/>
82-
<em>abap2UI5 – HTML is generated from XML View and data, both sent from the server</em>
82+
<em>abap2UI5 – The browser renders HTML based on XML View and data fully delivered by the backend</em>
8383
</p>
8484

85-
The UI5 application remains a single-page application (SPA), but its role shifts to that of a pure rendering engine for server-defined UI and data unaware of the current view structure (e.g., table, list, input fields) or the subsequent application flow
85+
The UI5 application remains a single-page application (SPA), but its role changes: it becomes a pure rendering engine. It simply receives server-defined views and data, without needing awareness of the UI structure (e.g., tables, lists, input fields) or the application's flow logic.
8686

8787
#### Handling Frontend Events in the Backend
8888

89-
We now add additional interaction by placing minimal static code in the frontend that sends events to the backend. This interaction model closely resembles the classical PAI/PBO model from SAP GUI applications. The app renders the provided view and data, and whenever an event is triggered, the event information is passed to the backend. The backend in the abap class then decides what should happen next. All business logic is handled in the backend:
89+
To enable user interaction, a minimal static UI5 shell is delivered with the initial HTTP request. This shell contains just enough logic to forward frontend events to the backend. The interaction model is inspired by the classic PAI/PBO pattern from SAP GUI applications.
90+
91+
When the user triggers an event (e.g., button press), the event is sent to the backend, where an ABAP class handles the corresponding logic and determines the next step. All business logic resides entirely in the backend:
9092

9193
<p align="center">
9294
<img width="500" alt="image" src="https://github.com/user-attachments/assets/ecd6e798-b6f6-4816-89ca-90f20647eb04" />
9395
<br/>
9496
<em>subtitle</em>
9597
</p>
9698

97-
The frontend application is a static UI5 shell, delivered with the first HTTP request: With this approach, the static logic remains in the frontend, while the backend handles the dynamic logic through ABAP classes. Each app becomes a self-contained ABAP class—no need for dedicated frontend apps anymore. Previously, we had to maintain many frontend artifacts:
99+
With this architecture, the frontend acts as a static UI5 container. It remains unchanged across apps and the actual logic of each app is stored in baclkend abap classes.
100+
101+
Previously, we had to maintain many frontend artifacts:
98102

99103
<p align="center">
100104
<img width="500" alt="image" src="https://github.com/user-attachments/assets/8b5c9b5b-3014-489f-90b4-55222744ba8a" />
101105
<br/>
102-
<em>subtitle</em>
106+
<em>UI5 Freestyle – multiple frontend artifacts per app</em>
103107
</p>
104108

105-
Now, we only need a single dummy UI5 app, and all views and logic can be centrally maintained in the backend:
109+
With abap2UI5, only one generic UI5 shell is needed. All views and application logic are defined and maintained centrally in the backend:
106110

107111
<p align="center">
108112
<img width="500" alt="image" src="https://github.com/user-attachments/assets/79c7c6be-6424-4c33-ab3c-9c7799a74747" />
109113
<br/>
110-
<em>subtitle</em>
114+
<em>abap2UI5 – One static frontend, all views and logic in ABAP</em>
111115
</p>
112116

113117
#### Editable Data Exchange

0 commit comments

Comments
 (0)