Skip to content

Commit f0a118f

Browse files
authored
Update concept.md
1 parent 914ede4 commit f0a118f

File tree

1 file changed

+13
-11
lines changed

1 file changed

+13
-11
lines changed

docs/technical/concept.md

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Key Concept: UI5 Over-the-Wire
22

3-
This page explains the basic architecture behind abap2UI5. The core idea is based on a pattern called _HTML Over-the-Wire_, adapted for the ABAP ecosystem. It simplifies UI5 development by moving both UI rendering and application logic entirely to the ABAP backend.
3+
The core idea of abap2UI5 is based on a pattern called _HTML Over-the-Wire_, adapted for the ABAP ecosystem. It simplifies UI5 development by moving both UI rendering and application logic entirely to the ABAP backend.
44

55
#### What is HTML Over-the-Wire?
66

@@ -32,7 +32,7 @@ Several modern frameworks adopt this pattern:
3232

3333
#### Comparison to Classic SSR
3434

35-
Isn't this just the same as traditional Server-Side Rendering (SSR)?
35+
But isn't this just the same as traditional Server-Side Rendering (SSR)?
3636

3737
In the early days of web development SSR was the standard. Every user interaction triggered a full-page reload, and the server responded with a complete HTML document. Within the SAP ecosystem, this approach was seen in technologies like ITS Mobile and SAP GUI for HTML.
3838

@@ -52,29 +52,29 @@ Architectural Comparison:
5252

5353
#### How UI5 Freestyle Works
5454

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:
55+
UI5 freestyle apps follow the Single Page Application model. All UI and app 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" />
5959
<br/>
6060
<em>UI5 freestyle - UI is built on the client; backend delivers only Data via OData</em>
6161
</p>
6262

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.
63+
Since UI5 is a client-side rendering framework, the HTML output cannot be generated as ready-to-render HTML on the backend. Instead, it must be produced in the browser using the UI5 framework and its built-in renderer.
6464

6565
#### Sending Views from Backend
6666

6767
But how can we generated UI5 HTML in the backend?
6868

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.
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 can be 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.
7070

7171
<p align="center">
7272
<img width="400" alt="image" src="https://github.com/user-attachments/assets/1ae233c6-96ff-4370-ac31-30705c18a0f7" />
7373
<br/>
7474
<em>UI5 freestyle – HTML rendered in browser based on frontend XML View and backend Data</em>
7575
</p>
7676

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

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

@@ -88,7 +88,7 @@ The UI5 application remains a single-page application (SPA), but its role change
8888

8989
#### Frontend Events on the Server
9090

91-
How can user interaction be handled in this architecture?
91+
How can user interaction be handled in this scenario?
9292

9393
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.
9494

@@ -113,7 +113,7 @@ With abap2UI5, the frontend becomes a static UI5 shell shared across all applica
113113
<p align="center">
114114
<img width="400" alt="image" src="https://github.com/user-attachments/assets/2d8b6441-84f3-464c-980f-2773d619af29" />
115115
<br/>
116-
<em>abap2UI5 – Shared shell app, each application is represented by backend ABAP classes</em>
116+
<em>abap2UI5 – Shared shell app, with each application defined by backend artifacts only</em>
117117
</p>
118118

119119
As a result, every UI5 app becomes a complete ABAP backend project managed through abapGit — eliminating the need for separate frontend deployments entirely.
@@ -132,7 +132,7 @@ Let’s take a closer look at a key UI5 feature: the concept of view models. In
132132
<em>UI5 View Model Concept – UI control properties are bound to View Model attributes</em>
133133
</p>
134134

135-
This leads to the second key architectural shift in abap2UI5: Instead of binding to OData, abap2UI5 assembles a custom view model entirely in the backend. This model is constructed dynamically after each request — tailored specifically to the current view — and is sent together with the view definition to the frontend:
135+
This leads to the second subtle shift in abap2UI5: Instead of binding Views to OData, abap2UI5 uses a custom view model created entirely in the backend. This model is constructed dynamically after each request — tailored specifically to the current view — and is sent together with the view definition to the frontend:
136136

137137
<p align="center">
138138
<img width="385" alt="image" src="https://github.com/user-attachments/assets/5bb4d351-4f5e-4ba0-a09a-f17883bd25e6" />
@@ -186,7 +186,7 @@ With the initial request, the static shell app is delivered. After each user int
186186

187187
#### Partial HTML Updates
188188

189-
A core benefit of the HTML Over-the-Wire approach is that only the affected parts of the UI are updated — not the entire page. But can this pattern be applied in UI5?
189+
A core benefit of the HTML Over-the-Wire approach is that only the affected parts of the UI are updated — not the entire page. But can this pattern also be applied in UI5?
190190

191191
In standard UI5 behavior, updating the XML View typically triggers a full re-render. However, abap2UI5 makes partial updates possible by updating only the view model. This enables UI5 to refresh only the relevant UI controls via data binding — without recreating the entire view structure.
192192

@@ -225,7 +225,9 @@ The illustration below shows the difference between a full re-render and a targe
225225
<em>Partly HTML Rerendering via View Model Updates - Only relevant DOM parts are re-rendered, preserving UI state</em>
226226
</p>
227227

228-
Thanks to UI5’s powerful data binding mechanism, only the modified DOM elements are updated. This preserves the current UI state — such as input focus — and ensures a smooth, uninterrupted user experience. The XML View and View Model concept make UI5 a perfect team player for the UI5 Over-the-Wire approach combining the strengths of ABAP and UI5 — without the complexity of full client-side re-renders.
228+
Thanks to UI5’s powerful data binding mechanism, only the modified DOM elements are updated. This preserves the current UI state — such as input focus — and ensures a smooth, uninterrupted user experience.
229+
230+
The XML View and View Model concept make UI5 a perfect team player for the UI5 Over-the-Wire approach elemenating the need of full client-side re-renders.
229231

230232
#### Conclusion
231233

0 commit comments

Comments
 (0)