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
The key concept of **abap2UI5** is to apply the **HTML Over-the-Wire** approach to SAP UI5 application development.
4
4
5
-
### HTML over-the-wire
6
-
7
5
#### Concept
8
6
9
-
**HTML Over-the-Wire** refers to a web architecture where the server renders user interfaces and sends ready-to-use HTML fragments to the browser. This avoids complex client-side frameworks and keeps the frontend lightweight and maintainable. The UI and Business Logic stays on the server.
7
+
**HTML Over-the-Wire** refers to a web architecture where the server renders user interfaces and sends ready-to-use HTML fragments to the browser. This avoids complex client-side frameworks and keeps the frontend lightweight and maintainable. Both the UI and business logic remain on the server.
@@ -18,7 +16,7 @@ The key concept of **abap2UI5** is to apply the **HTML Over-the-Wire** approach
18
16
```
19
17
Flow:
20
18
- The server defines HTML
21
-
- The browser inserts these Definitions
19
+
- The browser inserts these definitions
22
20
- Users interact with the UI — the backend handles logic and updates
23
21
24
22
While popular frameworks like Hotwire, Livewire, and Phoenix LiveView follow this approach, **abap2UI5 adapts it to SAP’s technological environment**, using SAP UI5 for frontend rendering and ABAP for backend-driven UI definitions.
@@ -27,42 +25,42 @@ While popular frameworks like Hotwire, Livewire, and Phoenix LiveView follow thi
27
25
28
26
In early web development, **Server-Side Rendering (SSR)** was the default. Every user action triggered a full-page reload with a complete HTML response.
29
27
30
-
The rise of **Single Page Applications (SPAs)** shifted rendering to the browser. SPAs fetch raw data (often via OData in SAP) and dynamically build UIs with JavaScript frameworks like React, Angular, Vue or in the SAP world UI5.
28
+
The rise of **Single Page Applications (SPAs)** shifted rendering to the browser. SPAs fetch raw data (often via OData in SAP) and dynamically build UIs with JavaScript frameworks like React, Angular, Vue, or, in the SAP world, UI5.
31
29
32
-
However, SPAs brought new challenges:
30
+
However, SPAs introduced new challenges:
33
31
- API layers and data contracts
34
32
- Separate frontend-backend development workflows
35
-
- Complex build & deployment pipelines
33
+
- Complex build and deployment pipelines
36
34
37
35
As a reaction, the **Over-the-Wire** paradigm re-emerged:
38
36
- Servers send UI fragments, not full pages
39
37
- Browsers update only specific parts of the page
40
38
- Frontends stay simple and declarative
41
39
42
-
###### Architectural Comparison
40
+
Architectural Comparison:
43
41
44
-
| Approach | Data Flow | Rendering Location | Period |
|[Unpoly](https://unpoly.com)| Simplified partial page updates | Any web stack |
61
59
62
60
63
-
### UI5 Over-the-Wire
61
+
####UI5 Over-the-Wire
64
62
65
-
So how can a UI5 over-the-wire approach look like? In this architecture, the UI is defined on the ABAP server and transmitted to the browser. The browser renders the interface using a static UI5 application — without requiring additional JavaScript logic, OData services, or frontend frameworks.
63
+
So what does a UI5 Over-the-Wire approach look like? In this architecture, the UI is defined on the ABAP server and transmitted to the browser. The browser renders the interface using a static UI5 application — without requiring additional JavaScript logic, OData services, or frontend frameworks.
- Targeted ViewModel updates ensure that only specific UI5 controls are re-rendered
86
-
87
-
###### Key Benefits
88
-
89
-
- Static UI5 Frontend App: Delivered with the first HTTP request and remains generic and stable across all applications.
90
-
- Backend-Driven UI Control: All UI definitions and business logic are implemented in ABAP classes.
91
-
- Pure ABAP Development: No need for custom JavaScript or separate frontend development.
92
-
- Simplified Architecture: No frontend builds or complex SPA frameworks — everything is managed through backend artifacts using abapGit and transports.
93
-
- Seamless SAP Integration: Fully aligned with SAP’s UI5 and ABAP technology stack, compatible with all ERP and S/4HANA releases.
94
-
- Efficient for Business Applications: Particularly well-suited for CRUD-heavy apps, forms, tables, dashboards, and typical enterprise use cases.
95
-
96
-
###### Limitations
97
-
81
+
- Backend-controlled UI and business logic
82
+
- Targeted view-model updates, so only specific UI5 controls are re-rendered
83
+
84
+
Key Benefits:
85
+
-**Static UI5 Frontend App:** Delivered with the first HTTP request and remains generic and stable across all applications.
86
+
-**Backend-Driven UI Control:** All UI definitions and business logic are implemented in ABAP classes.
87
+
-**Pure ABAP Development:** No need for custom JavaScript or separate frontend development.
88
+
-**Simplified Architecture:** No frontend builds or complex SPA frameworks — everything is managed through backend artifacts using abapGit and transports.
89
+
-**Seamless SAP Integration:** Fully aligned with SAP’s UI5 and ABAP technology stack, compatible with all ERP and S/4HANA releases.
90
+
-**Efficient for Business Applications:** Particularly well-suited for CRUD-heavy apps, forms, tables, dashboards, and typical enterprise use cases.
91
+
92
+
Limitations:
98
93
- Not suitable for highly interactive, real-time collaboration apps.
99
94
- Offline functionality or complex client-side interactions are not covered.
100
95
- Less effective if frontend and backend teams work independently.
101
96
102
-
###### Partly HTML Updates
103
-
One key feature is that the browser does not re-render the entire HTML page, but only specific parts. Can we achieve this with UI5?
97
+
#### Partial HTML Updates
98
+
99
+
A key feature is that the browser does not re-render the entire HTML page, but only specific parts. Can we achieve this with UI5?
104
100
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:
105
101
106
102
```abap
@@ -132,17 +128,17 @@ CLASS z2ui5_cl_app_partly_rerender IMPLEMENTATION.
132
128
133
129
ENDCLASS.
134
130
```
135
-
Isn't that beatuiful?
131
+
Isn't that beautiful?
136
132
137
-
### Summary
133
+
####Summary
138
134
139
135
The **key concept of abap2UI5** is to bring the simplicity and efficiency of the HTML Over-the-Wire pattern into the SAP ecosystem.
140
136
141
137
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.
142
138
143
139
For typical enterprise apps — forms, dashboards, transactions — abap2UI5 offers a clean, backend-driven alternative with faster time-to-market and lower complexity.
144
140
145
-
Further Reading:
141
+
**Further Reading:**
146
142
-[htmx in a nutshell](https://htmx.org/docs/#introduction)
147
143
-[HTML Over the Wire](https://signalvnoise.com/svn3/html-over-the-wire/)
148
-
-[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)
144
+
-[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)
0 commit comments