Skip to content

Commit 3ac4f72

Browse files
authored
Update concept.md
1 parent 316164e commit 3ac4f72

File tree

1 file changed

+16
-14
lines changed

1 file changed

+16
-14
lines changed

docs/advanced/technical/concept.md

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

3-
This article provides a technical dive into abap2UI5, a framework that simplifies SAP UI5 application development by moving both UI rendering and logic back to the ABAP backend. It introduces the key architectural concept — HTML Over the Wire — and explains how this idea is adapted to the SAP ecosystem.
4-
3+
This article outlines the technical foundation of abap2UI5, a framework designed to streamline SAP UI5 application development by shifting both UI rendering and application logic to the ABAP backend. Central to this design is the architectural model known as HTML Over the Wire, which is adapted to SAP-specific technologies in this approach.
54

65
#### What is HTML Over-the-Wire?
76

8-
HTML Over the Wire refers to a web architecture where the server renders ready-to-use HTML and sends it directly to the browser. Instead of sending raw data (e.g., JSON) and rendering UIs with JavaScript frameworks on the client, the server handles both the application logic and HTML generation and sending it to the browser — without relying on JSON, client-side MVC frameworks, bundling, or transpiling pipelines.
7+
HTML Over the Wire describes a server-centric web architecture where the user interface is rendered on the server and transmitted as ready-to-use HTML to the browser. This eliminates the need for JSON data transfers, client-side MVC frameworks, and associated build pipelines. Application logic remains fully on the server.
98

109
> You can write fast, modern, responsive web applications by generating your HTML on the server, and delivering that directly to the browser. You don’t need JSON as an in-between format. You don’t need client-side MVC frameworks. You don’t need complicated bundling and transpiling pipelines.
1110
1211
> This is what HTML Over The Wire is all about. It’s a celebration of the simplicity in HTML as the format for carrying data and presentation together, whether this is delivered on the first load or with subsequent dynamic updates.
1312
14-
Unlike Single Page Applications (SPAs), which shift most responsibilities to the browser, HTML Over the Wire maintains control on the backend. UI updates are performed by sending partial HTML fragments over AJAX, which the browser inserts without full page reloads.
13+
Compared to Single Page Applications (SPAs), which shift most responsibilities to the browser, HTML Over the Wire maintains control on the backend. UI updates are performed by sending partial HTML fragments over AJAX, which the browser inserts without full page reloads.
1514

1615
<img width="400" alt="image" src="https://github.com/user-attachments/assets/a9fde24a-c572-4e5c-b203-59a0667b9931" />
1716

1817
_HTML "Over the Wire" Lifecycle [(Quelle)](https://community.sap.com/t5/technology-blog-posts-by-members/fiori-like-web-app-development-in-pure-abap-with-htmx-and-fundamental/ba-p/13500763)_
1918

20-
Several frameworks successfully implement the HTML Over-the-Wire approach:
19+
Several frameworks implement this pattern:
2120

2221
| Framework | Focus | Tech Stack |
2322
|-----------------------|--------------------------------------|----------------------|
@@ -28,7 +27,7 @@ Several frameworks successfully implement the HTML Over-the-Wire approach:
2827
| [Unpoly](https://unpoly.com) | Simplified partial page updates | Any web stack |
2928

3029

31-
#### Where does it come from?
30+
#### Historical Context
3231

3332
In early web development, **Server-Side Rendering (SSR)** was the default. Every user action triggered a full-page reload with a complete HTML response.
3433

@@ -39,7 +38,7 @@ However, SPAs introduced new challenges:
3938
- Separate frontend-backend development workflows
4039
- Complex build and deployment pipelines
4140

42-
As a reaction, the **Over-the-Wire** paradigm re-emerged:
41+
As an alternative, the HTML Over the Wire model reintroduced server-controlled UI:
4342
- Servers send UI fragments, not full pages
4443
- Browsers update only specific parts of the page
4544
- Frontends stay simple and declarative
@@ -86,7 +85,7 @@ UI5 vs. "UI5 Over the Wire" - Communication
8685

8786
We use an AJAX roundtrip logic similar to "HTML Over the Wire" approaches, but in this case, we cannot send HTML directly. Instead, we send a View combined with its Data. This results in a concept that we could refer to as "UI5-View Over the Wire".
8887

89-
###### Merging Data & Presentation
88+
Merging Data & Presentation
9089

9190
A typical "UI5-View Over the Wire" response looks like this:
9291

@@ -95,7 +94,7 @@ A typical "UI5-View Over the Wire" response looks like this:
9594
"UI5 Over the Wire" - Response with View & Data together
9695

9796

98-
#### Partial HTML Updates also possible?
97+
#### Partial HTML Updates
9998

10099
A key feature of HTML over-the-wire is that the browser does not re-render the entire HTML page, but only specific parts. Can we achieve this with UI5? While modifying the XML view would typically trigger a complete re-render, focusing solely on updating the view model and binding UI attributes to it allows the UI5 framework to automatically update only the affected parts. Try out this snippet:
101100

@@ -150,12 +149,9 @@ Limitations:
150149
- Offline functionality or complex client-side interactions are not covered.
151150
- Less effective if frontend and backend teams work independently.
152151

152+
By shifting UI control back to the ABAP backend and leveraging SAP UI5 for rendering, abap2UI5 enables maintainable, pragmatic business applications — without the overhead of SPA architectures. For typical enterprise apps — forms, dashboards, transactions — abap2UI5 offers a clean, backend-driven alternative with faster time-to-market and lower complexity.
153153

154-
By shifting UI control back to the ABAP backend and leveraging SAP UI5 for rendering, abap2UI5 enables maintainable, pragmatic business applications — without the overhead of SPA architectures.
155-
156-
For typical enterprise apps — forms, dashboards, transactions — abap2UI5 offers a clean, backend-driven alternative with faster time-to-market and lower complexity.
157-
158-
**Further Reading:**
154+
**Sources::**
159155
- [htmx in a nutshell](https://htmx.org/docs/#introduction)
160156
- [HTML Over the Wire](https://signalvnoise.com/svn3/html-over-the-wire/)
161157
- [Fiori-like web app development in pure ABAP with htmx and Fundamental](https://community.sap.com/t5/technology-blog-posts-by-members/fiori-like-web-app-development-in-pure-abap-with-htmx-and-fundamental/ba-p/13500763)
@@ -172,6 +168,12 @@ For typical enterprise apps — forms, dashboards, transactions — abap2UI5 off
172168

173169

174170

171+
172+
173+
174+
175+
176+
175177
But is this maybe just the same like RAP, but in a different format?
176178

177179

0 commit comments

Comments
 (0)