Skip to content

Commit 9e5f5b1

Browse files
oblomov-devoblomov-dev
authored
update
1 parent 0fedb69 commit 9e5f5b1

File tree

1 file changed

+46
-32
lines changed

1 file changed

+46
-32
lines changed

‎docs/advanced/technical/concept.md‎

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,21 @@ The key concept of **abap2UI5** is to apply the **HTML Over-the-Wire** concept t
44

55
**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.
66

7-
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.
8-
9-
#### Concept Overview
10-
117
```plaintext
12-
+------------------------+ +-----------------------+ +--------------------+
13-
| ABAP Backend | | Browser | | User |
14-
|------------------------| |-----------------------| |--------------------|
15-
| - UI5 View Definition | --> | Receives Response | --> | Interacts with UI |
16-
| - UI5 View-Model | | Renders with UI5 | | (clicks, inputs) |
17-
+------------------------+ +-----------------------+ +--------------------+
8+
+---------------------+ +------------------+ +-------------------+
9+
| Backend | | Browser | | User |
10+
|---------------------| |------------------| |-------------------|
11+
| HTML Definition | --> | Receives Response| --> | Interacts with UI |
12+
| | | Renders UI | | (clicks, inputs) |
13+
+---------------------+ +------------------+ +-------------------+
1814
```
1915
Flow:
20-
- The backend defines UI5 XML Views and JSON View-Models
21-
- The browser renders these definitions using a static UI5 application
16+
- The backend defines HTML
17+
- The browser inserts these Definitions
2218
- Users interact with the UI — the backend handles logic and updates
2319

20+
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.
21+
2422
### From SSR to HTML Over-the-Wire
2523

2624
In early web development, **Server-Side Rendering (SSR)** was the default. Every user action triggered a full-page reload with a complete HTML response.
@@ -45,35 +43,51 @@ As a reaction, the **Over-the-Wire** paradigm re-emerged:
4543
| **SPA** | Raw data (JSON), client builds UI | Client-side (JavaScript) | 2010s – today |
4644
| **Over-the-Wire** | HTML fragments for partial updates | Server renders, browser inserts | 2020s (re-emerging) |
4745

48-
#### Over-the-Wire Frameworks
46+
#### Related Frameworks
47+
48+
Several frameworks successfully implement the HTML over-the-wire approach:
49+
50+
| Framework | Focus | Tech Stack |
51+
|-----------------------|--------------------------------------------------|----------------------|
52+
| [htmx](https://htmx.org) | Progressive enhancement via HTML partials | Any web stack |
53+
| [Hotwire (Turbo)](https://hotwired.dev) | HTML-over-the-wire for Rails apps | Ruby on Rails |
54+
| [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view) | Real-time UI with server-rendering | Elixir / Phoenix |
55+
| [Livewire](https://livewire.laravel.com) | Server-driven UI components in PHP | Laravel / PHP |
56+
| [Unpoly](https://unpoly.com) | Simplified partial page updates | Any web stack |
4957

50-
Several frameworks successfully implement this pattern:
5158

52-
| Framework | Key Use Case | Technology |
53-
|-----------|--------------|------------|
54-
| [htmx](https://htmx.org/) | Progressive enhancement for server-rendered apps | Any web stack |
55-
| [Hotwire (Turbo)](https://hotwired.dev/) | Modern Over-the-Wire for Rails apps | Ruby on Rails |
56-
| [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view) | Real-time server-rendered UIs | Elixir / Phoenix |
57-
| [Livewire](https://livewire.laravel.com/) | Server-driven UI components | PHP / Laravel |
58-
| [Unpoly](https://unpoly.com/) | Simplified partial page updates | Any web stack |
59-
| [Blazor Server](https://learn.microsoft.com/en-us/aspnet/core/blazor/) | Server-side UI rendering with SignalR | .NET / C# |
60-
| [Inertia.js](https://inertiajs.com/) | SPA-like experience with server-driven UI | JavaScript + Laravel/Rails |
59+
### From HTML to UI5 Over-the-Wire
60+
61+
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.
62+
63+
```plaintext
64+
+---------------------+ +------------------+ +-------------------+
65+
| ABAP Backend | | Browser | | User |
66+
|---------------------| |------------------| |-------------------|
67+
| UI5 View Definition | --> | Receives Response| --> | Interacts with UI |
68+
| UI5 View-Model | | Renders UI | | (clicks, inputs) |
69+
+---------------------+ +------------------+ +-------------------+
70+
```
71+
Flow:
72+
- The backend defines UI5 XML Views and JSON View-Models
73+
- The browser renders these definitions using a static UI5 application
74+
- Users interact with the UI — the backend handles logic and updates
6175

62-
### abap2UI5: UI5 Over-the-Wire
6376

6477
**abap2UI5** transfers the Over-the-Wire idea into SAP’s world by combining:
6578
- ABAP-based UI definitions (UI5 Views & UI5 View-Models)
6679
- A static SAP UI5 frontend app for rendering
67-
- Backend-controlled UI logic and state management
80+
- Backend-controlled UI & Business logic
6881
- Targeted ViewModel updates ensure that only specific UI5 controls are re-rendered
6982

70-
#### Key Benefits and Characteristics
71-
- Static UI5 Frontend App: Delivered tieh the first HTTP request, remaining generic and stable for all apps
72-
- Backend-Driven UI Control: All UI definitions and business logic is defined in ABAP classes
73-
- Pure ABAP Development: No need for custom JavaScript or separate frontend development
74-
- Simplified Architecture: No frontend builds, no complex SPA frameworks — everything managed through backend artifacts with abapGit and transports
75-
- Seamless SAP Integration: Fully aligned with SAP’s UI5 and ABAP technology stack, compatible with all ERP and S/4HANA releases
76-
- Efficient for Business Applications: Especially suitable for CRUD-heavy apps, forms, tables, dashboards, and typical enterprise use cases.
83+
#### Key Benefits
84+
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.
7791

7892
#### Limitations to Consider
7993

0 commit comments

Comments
 (0)