Skip to content

Commit 784e4bf

Browse files
oblomov-devoblomov-dev
authored
Create backup.md
1 parent 42cf6a6 commit 784e4bf

File tree

1 file changed

+192
-0
lines changed

1 file changed

+192
-0
lines changed

‎docs/advanced/technical/backup.md‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
2+
3+
4+
5+
6+
7+
8+
9+
10+
11+
12+
13+
14+
But is this maybe just the same like RAP, but in a different format?
15+
16+
17+
18+
19+
20+
21+
22+
23+
24+
25+
26+
This pattern has gained popularity through frameworks like htmx, Hotwire, Phoenix LiveView, and Laravel Livewire. They aim to simplify development, reduce dependencies, and return to server-driven UIs.
27+
28+
29+
This article provides a technical deep dive into **abap2UI5**. It is aimed at developers who want to understand how abap2UI5 works "under the hood" and how it simplifies UI5 development by keeping both logic and UI generation on the backend.
30+
31+
It covers the core ideas behind the framework — including its architecture, codebase, and compatibility — and shows how concepts like **"HTML Over the Wire"** are adapted to the ABAP environment, offering a new approach to building UI5 applications.
32+
33+
##### 1. HTML Over the Wire
34+
35+
One of the core ideas behind abap2UI5 is inspired by the concept of **"HTML Over the Wire"**. This approach suggests rendering HTML directly on the server and sending it to the browser — without relying on JSON, client-side MVC frameworks, bundling, or transpiling pipelines.
36+
37+
38+
39+
40+
41+
The idea was introduced in the SAP community through examples using the JavaScript library **htmx** to build Fiori-like apps. Unlike typical Single Page Applications (SPAs), where state and logic reside on the frontend, the **HTML Over the Wire** principle keeps all application logic and state on the server.
42+
43+
After the initial page load, only small HTML fragments are sent asynchronously via AJAX to update parts of the page — avoiding full reloads.
44+
45+
<img width="400" alt="image" src="https://github.com/user-attachments/assets/a9fde24a-c572-4e5c-b203-59a0667b9931" />
46+
47+
_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)_
48+
49+
This approach contrasts with the common separation of concerns, where HTML, CSS, and JavaScript are managed independently on the frontend while the backend only delivers data.
50+
51+
##### 2. Hypermedia Driven App
52+
53+
This concept evolves into what is termed a Hypermedia-Driven Application (HDA). In HDAs, the browser focuses solely on rendering HTML, CSS, and JavaScript without knowledge of the application's state. All logic is maintained on the server.
54+
55+
In contrast, SPAs define all routes and actions upfront on the frontend, requiring a full rebuild for any modification. The following illustration compares MPAs, SPAs, and HDAs:
56+
57+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/8117dc10-f0ba-4c52-9d1d-6b9d0986401d" />
58+
59+
MPA vs. SPA vs. HDA [(Quelle)](https://craftcms.com/events/dot-all-2022/sessions/a-practical-guide-to-html-over-the-wire)
60+
61+
62+
##### 3. Rethinking Separation of Concerns
63+
64+
Unlike traditional architectures, HDAs do not prioritize strict separation of CSS, JavaScript, and HTML. The backend generates the UI and handles program flow, much like SAP GUI applications in the past. This centralized approach simplifies customization and maintenance.
65+
66+
##### 4. Dive Deeper
67+
68+
Frameworks like Phoenix LiveView (2018) and Laravel Livewire (2019) were among the first to adopt this principle. Tools like htmx, hotwire, and unpoly followed, aiming to reduce complexity while maintaining high UI fidelity. These frameworks seek a "sweet spot" between SPA and MPA architectures:
69+
70+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/41af4a41-829e-4289-82f5-18ee7408054b" />
71+
"Sweet Spot" between SPA and MPA (Quelle)
72+
73+
A recommended video offers an excellent introduction to these ideas.
74+
75+
##### 5. UI5 Architecture
76+
77+
UI5 applications typically follow an SPA architecture. The backend delivers data via OData, while all logic and UI rendering occur on the frontend. But one specific characteristic we should examine closely is how the UI5 framework creates views. Each HTML output is rendered from an XML-View (let's ignore the former HTML/JS/JSON-Views), with its associated data from the server. The view is stored at the frontend as part of the app:
78+
79+
<img width="600" alt="image" src="https://github.com/user-attachments/assets/3b2a884e-e899-4b60-8a95-79b418f33657" />
80+
81+
UI5 normally - ABAP delivers only Data
82+
83+
84+
85+
86+
87+
88+
89+
90+
91+
92+
93+
94+
95+
96+
97+
98+
99+
100+
101+
102+
#### new
103+
104+
The key concept of **abap2UI5** is to apply the **HTML Over-the-Wire** approach to SAP UI5 application development.
105+
106+
#### Concept
107+
108+
**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.
109+
110+
```plaintext
111+
+-------------------+ +------------------+ +-------------------+
112+
| Server | | Browser | | User |
113+
|-------------------| |------------------| |-------------------|
114+
| HTML Definition | --> | Receives Response| --> | Interacts with UI |
115+
| | | Renders UI | | (clicks, inputs) |
116+
+-------------------+ +------------------+ +-------------------+
117+
```
118+
119+
Flow:
120+
- The server defines HTML
121+
- The browser inserts these definitions
122+
- Users interact with the UI — the backend handles logic and updates
123+
124+
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.
125+
126+
127+
#### Frameworks
128+
129+
Several frameworks successfully implement the HTML Over-the-Wire approach:
130+
131+
| Framework | Focus | Tech Stack |
132+
|-----------------------|--------------------------------------|----------------------|
133+
| [htmx](https://htmx.org) | Progressive enhancement via HTML partials | Any web stack |
134+
| [Hotwire (Turbo)](https://hotwired.dev) | HTML-over-the-wire for Rails apps | Ruby on Rails |
135+
| [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view) | Real-time UI with server rendering | Elixir / Phoenix |
136+
| [Livewire](https://livewire.laravel.com) | Server-driven UI components in PHP | Laravel / PHP |
137+
| [Unpoly](https://unpoly.com) | Simplified partial page updates | Any web stack |
138+
139+
140+
#### UI5 Over-the-Wire
141+
142+
So what does a UI5 Over-the-Wire approach look like?
143+
144+
In this approach, the UI5 View and UI5 View-Model 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.
145+
146+
**abap2UI5** brings the Over-the-Wire idea into the SAP world by combining:
147+
- ABAP-based UI definitions (UI5 views & view-models)
148+
- A static SAP UI5 frontend app for rendering
149+
- Backend-controlled UI and business logic
150+
- Targeted view-model updates, so only specific UI5 controls are re-rendered
151+
152+
```plaintext
153+
+---------------------+ +------------------+ +-------------------+
154+
| ABAP Backend | | Browser | | User |
155+
|---------------------| |------------------| |-------------------|
156+
| UI5 View Definition | --> | Receives Response| --> | Interacts with UI |
157+
| UI5 View-Model | | Renders UI | | (clicks, inputs) |
158+
+---------------------+ +------------------+ +-------------------+
159+
```
160+
161+
Flow:
162+
- The backend defines UI5 XML views and JSON view-models
163+
- The browser renders these definitions using a static UI5 application
164+
- Users interact with the UI — the backend handles logic and updates
165+
166+
Key Benefits:
167+
- **Static UI5 Frontend App:** Delivered with the first HTTP request and remains generic and stable across all applications.
168+
- **Backend-Driven UI Control:** All UI definitions and business logic are implemented in ABAP classes.
169+
- **Pure ABAP Development:** No need for custom JavaScript or separate frontend development.
170+
- **Simplified Architecture:** No frontend builds or complex SPA frameworks — everything is managed through backend artifacts using abapGit and transports.
171+
- **Seamless SAP Integration:** Fully aligned with SAP’s UI5 and ABAP technology stack, compatible with all ERP and S/4HANA releases.
172+
- **Efficient for Business Applications:** Particularly well-suited for CRUD-heavy apps, forms, tables, dashboards, and typical enterprise use cases.
173+
174+
Limitations:
175+
- Not suitable for highly interactive, real-time collaboration apps.
176+
- Offline functionality or complex client-side interactions are not covered.
177+
- Less effective if frontend and backend teams work independently.
178+
179+
180+
181+
#### Summary
182+
183+
The **key concept of abap2UI5** is to bring the simplicity and efficiency of the HTML Over-the-Wire pattern into the SAP ecosystem.
184+
185+
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.
186+
187+
For typical enterprise apps — forms, dashboards, transactions — abap2UI5 offers a clean, backend-driven alternative with faster time-to-market and lower complexity.
188+
189+
**Further Reading:**
190+
- [htmx in a nutshell](https://htmx.org/docs/#introduction)
191+
- [HTML Over the Wire](https://signalvnoise.com/svn3/html-over-the-wire/)
192+
- [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

Comments
 (0)