Skip to content

Commit f332112

Browse files
authored
Update concept.md
1 parent 3def9a8 commit f332112

File tree

1 file changed

+12
-10
lines changed

1 file changed

+12
-10
lines changed

docs/technical/concept.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Architectural Comparison:
5252

5353
#### How UI5 Freestyle Works
5454

55-
UI5 freestyle apps follow the Single Page Application (SPA) model. All UI artifacts are stored on the frontend, while the backend provides data via OData — typically based on CDS Views or custom ABAP implementations. Both rendering and logic execution take place entirely in the browser:
55+
UI5 freestyle apps follow the Single Page Application model. All UI artifacts are stored on the frontend, while the backend provides data via OData — typically based on CDS Views or custom ABAP implementations. Both rendering and logic execution take place entirely in the browser:
5656

5757
<p align="center">
5858
<img width="500" alt="image" src="https://github.com/user-attachments/assets/8043d0d9-5852-4dac-aefb-37ec8d6e66be" />
@@ -64,15 +64,17 @@ Since UI5 is a client-side rendering framework, the HTML output cannot be genera
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 definition, combined with data from the backend, to render HTML in the browser.
67+
But how can we still generate SAP UI5 views from the backend?
68+
69+
Fortunately, UI5 has a defining characteristic that allows us to shift part of the view generation to the backend. In UI5 Freestyle apps, 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.
6870

6971
<p align="center">
7072
<img width="400" alt="image" src="https://github.com/user-attachments/assets/1ae233c6-96ff-4370-ac31-30705c18a0f7" />
7173
<br/>
7274
<em>UI5 Freestyle – HTML rendered in browser based on Frontend XML View and Backend Data</em>
7375
</p>
7476

75-
abap2UI5 introduces a subtle but important shift: what if the backend also delivers the XML View?
77+
abap2UI5 introduces now a subtle but important shift: what if the backend also delivers the XML View?
7678

7779
While HTML rendering still happens on the frontend, both the view definition and the corresponding data are now sent from the backend:
7880

@@ -84,37 +86,37 @@ While HTML rendering still happens on the frontend, both the view definition and
8486

8587
The UI5 application remains a single-page application (SPA), but its role changes: it becomes a pure rendering engine for server-defined views and data.
8688

87-
How is user interaction handled in this architecture?
88-
8989
#### Frontend Events on the Server
9090

91-
To support user interaction, a minimal and static UI5 Freestyle app is delivered with the initial HTTP request. This app contains just enough logic to forward frontend events typically acts as a shell app. The interaction model is inspired by the classic PAI/PBO pattern from SAP GUI applications.
91+
How can user interaction be handled in this architecture?
92+
93+
To enable user interaction, a minimal and static UI5 Freestyle app is delivered with the initial HTTP request. This app contains just enough logic to forward frontend events and typically acts as a shell application. The interaction model is inspired by the classic PAI/PBO pattern known from SAP GUI applications.
9294

93-
When the user triggers an event (e.g., a button press), the event information is sent to the backend, where an ABAP class determines what happens next. All logic is executed entirely in the backend:
95+
When a user triggers an event (e.g., pressing a button), the event information is sent to the backend, where an ABAP class determines what happens next. All logic is executed entirely on the server:
9496

9597
<p align="center">
9698
<img width="500" alt="image" src="https://github.com/user-attachments/assets/64ed863f-09bf-4634-8688-5b5382595115" />
9799
<br/>
98100
<em>abap2UI5 – Simple shell app, backend handles all logic</em>
99101
</p>
100102

101-
In UI5 Freestyle apps, each application required a dedicated set of frontend artifacts:
103+
In standard UI5 Freestyle applications, each app requires its own dedicated set of frontend artifacts:
102104

103105
<p align="center">
104106
<img width="350" alt="image" src="https://github.com/user-attachments/assets/abfe4163-e75d-4eab-ad4c-621f693fa6c3" />
105107
<br/>
106108
<em>UI5 Freestyle – Each application requires its own set of deployed UI and App artifacts</em>
107109
</p>
108110

109-
With abap2UI5, the frontend becomes a static UI5 shell shared across all applications. Views and logic are fully defined and maintained in the backend. Each app is represented by a single ABAP class that generates the view and handles the events:
111+
With abap2UI5, the frontend becomes a static UI5 shell shared across all applications. Views and logic are fully defined and maintained in the backend. Each application is represented by a single ABAP class that generates the view and handles events:
110112

111113
<p align="center">
112114
<img width="350" alt="image" src="https://github.com/user-attachments/assets/646c10e3-ef82-403f-8538-9efe45836ca2" />
113115
<br/>
114116
<em>abap2UI5 – Shared shell app, each application is represented by backend ABAP classes</em>
115117
</p>
116118

117-
As a result, every UI5 app becomes a complete ABAP backend project managed through abapGiteliminating the need for separate frontend deployments entirely.
119+
As a result, every UI5 app becomes a complete ABAP backend project managed through abapGiteliminating the need for separate frontend deployments entirely.
118120

119121
#### Create & Update Data
120122

0 commit comments

Comments
 (0)