You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/advanced/technical/concept.md
+16-14Lines changed: 16 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,23 +1,22 @@
1
1
# Key Concept: UI5 Over-the-Wire?
2
2
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.
5
4
6
5
#### What is HTML Over-the-Wire?
7
6
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.
9
8
10
9
> 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.
11
10
12
11
> 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.
13
12
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.
@@ -28,7 +27,7 @@ Several frameworks successfully implement the HTML Over-the-Wire approach:
28
27
|[Unpoly](https://unpoly.com)| Simplified partial page updates | Any web stack |
29
28
30
29
31
-
#### Where does it come from?
30
+
#### Historical Context
32
31
33
32
In early web development, **Server-Side Rendering (SSR)** was the default. Every user action triggered a full-page reload with a complete HTML response.
34
33
@@ -39,7 +38,7 @@ However, SPAs introduced new challenges:
39
38
- Separate frontend-backend development workflows
40
39
- Complex build and deployment pipelines
41
40
42
-
As a reaction, the **Over-the-Wire** paradigm re-emerged:
41
+
As an alternative, the HTML OvertheWire model reintroduced server-controlled UI:
43
42
- Servers send UI fragments, not full pages
44
43
- Browsers update only specific parts of the page
45
44
- Frontends stay simple and declarative
@@ -86,7 +85,7 @@ UI5 vs. "UI5 Over the Wire" - Communication
86
85
87
86
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".
88
87
89
-
###### Merging Data & Presentation
88
+
Merging Data & Presentation
90
89
91
90
A typical "UI5-View Over the Wire" response looks like this:
92
91
@@ -95,7 +94,7 @@ A typical "UI5-View Over the Wire" response looks like this:
95
94
"UI5 Over the Wire" - Response with View & Data together
96
95
97
96
98
-
#### Partial HTML Updates also possible?
97
+
#### Partial HTML Updates
99
98
100
99
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:
101
100
@@ -150,12 +149,9 @@ Limitations:
150
149
- Offline functionality or complex client-side interactions are not covered.
151
150
- Less effective if frontend and backend teams work independently.
152
151
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.
153
153
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::**
159
155
-[htmx in a nutshell](https://htmx.org/docs/#introduction)
160
156
-[HTML Over the Wire](https://signalvnoise.com/svn3/html-over-the-wire/)
161
157
-[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
172
168
173
169
174
170
171
+
172
+
173
+
174
+
175
+
176
+
175
177
But is this maybe just the same like RAP, but in a different format?
0 commit comments