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/over_the_wire.md
+21-22Lines changed: 21 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,26 +1,26 @@
1
1
# Key Idea: Over-the-Wire in abap2UI5
2
2
3
-
The key idea of **abap2UI5** is to apply the principles of **Over-the-Wire (OtW)** web development to the SAP ecosystem.
3
+
The key idea of **abap2UI5** is to apply the principles of **Over-the-Wire** web development to the SAP ecosystem.
4
4
5
-
Over-the-Wire refers to a pattern where the **server is responsible for rendering the user interface (UI)**and sends **ready-to-render HTML fragments** to the browser. This avoids complex client-side frameworks and keeps the frontend lean and maintainable.
5
+
Over-the-Wire refers to a pattern where the server is responsible for rendering the user interface and sends ready-to-render HTML fragments to the browser. This avoids complex client-side frameworks and keeps the frontend lean and maintainable.
6
6
7
-
While this approach is widely used in frameworks like Hotwire, Livewire, or Phoenix LiveView, **abap2UI5 adapts this idea for SAP**, using the SAPUI5 runtime to render the UI based on server-provided definitions.
7
+
While this approach is widely used in frameworks like Hotwire, Livewire, or Phoenix LiveView, **abap2UI5 adapts this idea for the SAP technoligal environment**, using the SAP UI5 framework to render the UI based on server-provided definitions created in ABAP.
8
8
9
9
### History: From SSR to Over-the-Wire
10
10
11
-
In the early days of web development, **Server-Side Rendering (SSR)** was the standard approach. Every user interaction triggered a request to the server, which returned a fully rendered HTML page.
11
+
In the early days of web development, Server-Side Rendering (SSR) was the standard approach. Every user interaction triggered a request to the server, which returned a fully rendered HTML page.
12
12
13
-
With the rise of **Single Page Applications (SPAs)**, UI rendering shifted to the browser. SPAs request **raw data (e.g., JSON)** from the server and build the UI dynamically using JavaScript frameworks like React, Angular, or Vue.
13
+
With the rise of Single Page Applications (SPAs), UI rendering shifted to the browser. SPAs request raw data (e.g., JSON) from the server typically send via OData and build the UI dynamically using JavaScript frameworks like React, Angular, or Vue at the frontend.
14
14
15
15
While SPAs enable rich client-side experiences, they also introduce significant complexity:
16
16
- API layers and data contracts
17
17
- Separate frontend-backend development
18
18
- Complex build & deployment pipelines
19
19
20
-
As a response to this complexity, the **Over-the-Wire approach re-emerged**:
21
-
- The **server renders UI fragments**, not full pages.
22
-
- The **browser simply inserts those fragments** into the page.
23
-
- The frontend remains simple and declarative.
20
+
As a response to this complexity, the Over-the-Wire approach re-emerged:
21
+
- The server renders UI fragments, not full pages
22
+
- The browser simply inserts those fragments into the page
23
+
- The frontend remains simple and declarative
24
24
25
25
##### Architectural Comparison
26
26
@@ -32,7 +32,7 @@ As a response to this complexity, the **Over-the-Wire approach re-emerged**:
32
32
33
33
##### Over-the-Wire Frameworks
34
34
35
-
The followring frameworks are modern implementations of this concept.
35
+
The followring frameworks are implementations of this concept.
36
36
37
37
| Framework | Key Use Case | Technology |
38
38
|-----------|--------------|------------|
@@ -48,25 +48,25 @@ The followring frameworks are modern implementations of this concept.
48
48
49
49
**abap2UI5** adopts the Over-the-Wire principle but tailors it to SAP's technical environment:
50
50
51
-
- The **ABAP backend defines the UI** via a **view and a view model**.
52
-
- This structured data is sent to the browser.
53
-
-The **SAPUI5 runtime (static frontend code)** renders the UI dynamically based on this data.
54
-
- The frontend code itself is **never generated dynamically**. It remains stable and generic.
55
-
- All business logic, UI definitions, and dynamic behavior are maintained on the backend.
51
+
- The ABAP backend defines the UI via a UI5 XML View and UI5 JSON View-Model
52
+
- This data is sent to the browser
53
+
-A static UI5 frontend app renders the UI dynamically based on this responses
54
+
- The frontend code itself is never generated dynamically. It remains stable and generic.
55
+
- All business logic, UI definitions, and dynamic behavior are maintained on the backend in an ABAP Class
56
56
57
57
##### Key Characteristics:
58
-
- Frontend code is astatic UI5 app and send with the first request
58
+
- Frontend code is a static UI5 app and send with the first request
59
59
- Backend fully controls UI definitions and logic
60
60
- No separate frontend development needed, all apps are pure backend abap artifacts
61
61
- Aligns with SAP's technology stack (ABAP & UI5) while following Over-the-Wire principles
62
62
63
63
##### Benefits for SAP Applications
64
64
65
-
-**Reduced Frontend Complexity**: No need for custom JavaScript development per app.
65
+
-**Reduced Frontend Complexity**: No need for custom JavaScript development
66
66
-**Faster Development Cycles**: UI and logic are controlled via ABAP in the backend
67
-
-**Maintainable Architecture**: Reuse of SAPUI5 runtime, minimal frontend code.
68
-
-**Seamless SAP Integration**: abap2UI5 app fits into existing ABAP Stacks on any release
69
-
-**Ideal for Business Applications**: CRUD-heavy apps, forms, dashboards, transactions.
67
+
-**Maintainable Architecture**: No frontend code, all apps are ABAP Classes
68
+
-**Seamless SAP Integration**: abap2UI5 app run on any ERP and S/4 release
69
+
-**Ideal for Business Applications**: CRUD-heavy apps, forms, dashboards, transactions etc.
70
70
71
71
##### Limitations to Consider
72
72
@@ -77,8 +77,7 @@ While Over-the-Wire (and abap2UI5) offers many advantages, it may not be suitabl
77
77
78
78
### Conclusion
79
79
80
-
The **key idea of abap2UI5** is to apply the simplicity of the Over-the-Wire approach to the SAP world.
81
-
It enables building efficient, maintainable business applications by shifting UI control back to the backend, while using SAPUI5 as a stable frontend runtime.
80
+
The **key idea of abap2UI5** is to apply the simplicity of the Over-the-Wire approach to the SAP world. It enables building efficient, maintainable business applications by shifting UI control back to the backend, while using SAP UI5 as a frontend framework.
82
81
83
82
This reduces development complexity, shortens time-to-market, and ensures a clean architecture — without giving up the flexibility of SAPUI5.
0 commit comments