Skip to content

Commit 1d9dd22

Browse files
authored
Update concept.md
1 parent 9c991c6 commit 1d9dd22

File tree

1 file changed

+24
-24
lines changed

1 file changed

+24
-24
lines changed

docs/advanced/technical/concept.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
# Key Concept: UI5 Over-the-Wire?
22

3-
This page 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.
3+
This page outlines the technical foundation of abap2UI5, a framework developed to streamline SAP UI5 application development by shifting both UI rendering and application logic to the ABAP backend. At its core lies an architectural model known as HTML Over the Wire, which has been adapted to SAP-specific technologies in this context.
44

55
#### What is HTML Over-the-Wire?
66

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.
7+
HTML Over the Wire describes a server-centric web architecture in which the user interface is rendered on the server and transmitted to the browser as ready-to-use HTML. This eliminates the need for JSON data transfers, client-side MVC frameworks, and complex build pipelines. All application logic remains fully on the server.
88

99
> 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.
1010
1111
> 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.
1212
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.
13+
In contrast to Single Page Applications (SPAs), which delegate most responsibilities to the browser, HTML Over the Wire keeps control on the backend. UI updates are performed by sending partial HTML fragments via AJAX, which the browser inserts without reloading the entire page.
1414

1515
<img width="400" alt="image" src="https://github.com/user-attachments/assets/a9fde24a-c572-4e5c-b203-59a0667b9931" />
1616

1717
_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)_
1818

19-
Several frameworks implement this pattern:
19+
Several frameworks adopt this pattern:
2020

2121
| Framework | Focus | Tech Stack |
2222
|-----------------------|--------------------------------------|----------------------|
@@ -28,16 +28,16 @@ Several frameworks implement this pattern:
2828

2929
#### Historical Context
3030

31-
In early web development, **Server-Side Rendering (SSR)** was the default. Every user action triggered a full-page reload with a complete HTML response.
31+
In early web development, **Server-Side Rendering (SSR)** was the norm. Each user interaction triggered a full-page reload, with the server returning the complete HTML content.
3232

33-
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.
33+
With the rise of Single Page Applications (SPAs), rendering responsibilities shifted to the browser. SPAs retrieve raw dataoften via OData in SAP systems—and dynamically build UIs using JavaScript frameworks such as React, Angular, or Vue, or in the SAP context, UI5.
3434

35-
However, SPAs introduced new challenges:
35+
However, SPAs brought along new complexities:
3636
- API layers and data contracts
3737
- Separate frontend-backend development workflows
3838
- Complex build and deployment pipelines
3939

40-
As an alternative, the HTML Over the Wire model reintroduced server-controlled UI:
40+
As a counter-approach, HTML Over the Wire reestablishes server-driven UI updates:
4141
- Servers send UI fragments, not full pages
4242
- Browsers update only specific parts of the page
4343
- Frontends stay simple and declarative
@@ -53,35 +53,35 @@ Architectural Comparison:
5353

5454
#### How can we adapt this to UI5?
5555

56-
UI5 applications typically follow an SPA architecture. The backend delivers data via OData, while all logic and UI rendering occur on the frontend:
56+
UI5 applications typically follow the SPA model. The backend supplies data through OData, while all rendering and logic execution occur in the browser:
5757

5858
<img width="400" alt="image" src="https://github.com/user-attachments/assets/3b2a884e-e899-4b60-8a95-79b418f33657" />
5959

6060
UI5 Freestyle - ABAP delivers only Data
6161

62-
One specific characteristic we should examine closely is how the UI5 framework creates views. Each HTML output is rendered from an XML-View, with its associated data from the server. The view is stored at the frontend as part of the app. abap2UI5 now introduces a pivotal change: the backend also sends the view. This shifts the frontend’s role towards displaying views and data received from the server:
62+
A defining feature of UI5 is its use of XML views to generate HTML. These views reside on the frontend and are populated with server JSON data. abap2UI5 introduces a fundamental shift: the server also delivers the view. The frontend becomes a passive display layer for views and data received from the server:
6363

6464
<img width="400" alt="image" src="https://github.com/user-attachments/assets/9717f500-c0de-4428-a996-11fc131c073c" />
6565

6666
"UI5 Over the Wire" - ABAP delivers Data & View
6767

68-
Despite still relying on frontend HTML rendering, all necessary information (view & data) is now retrieved via AJAX from the backend. As a result, the UI5 app remains a SPA, but its role is now reduced to solely displaying the view and its data:
68+
Although the frontend still renders HTML, all relevant information (view and data) is obtained from the backend via AJAX. The UI5 application technically remains an SPA but now functions solely as a rendering layer for the server-defined UI and Data:
6969

7070
<img width="400" alt="image" src="https://github.com/user-attachments/assets/17a3a301-b698-4704-9cbc-43798c5bd600" />
7171

7272
UI5 app downgraded - Displaying Data & View received from the server
7373

74-
This means that the frontend app is not aware of what it is currently displaying (whether it's a table, list or input) and neither is it aware of what actions will be taken next. The app logic remains completely on the server and the frontend app is just a generic UI5 app send with the first request:
74+
The frontend is unaware of the current view (e.g., table, list, input) or the next actions. All logic is handled on the backend. The frontend app is a static UI5 application delivered with the first request:
7575

7676
<img width="400" alt="image" src="https://github.com/user-attachments/assets/2c9f8dc1-c6d8-4e93-80a2-b50bfc1d5ec1" />
7777

78-
The app displays the view with its data and sends back each event to the server for determination of the next action and output. This process is somewhat similar to the PAI/PBO process used in former SAP GUI apps:
78+
The app renders the provided view and data, then returns any triggered events to the backend, which decides what should happen next. This process resembles the classical PAI/PBO model from SAP GUI applications:
7979

8080
<img width="400" alt="image" src="https://github.com/user-attachments/assets/3b464d0b-19fd-400c-a7e4-3eec893f7724" />
8181

82-
For communication we use an AJAX roundtrip logic similar to "HTML Over the Wire" approaches, but in this case, we cannot send HTML directly because wen need the ui5 fornten to render the html. Instead, we send a View combined with its vieww model and with that use a second characteristic of the ui5 framework that it can use html out of xml views and ists json model. This results in a concept that we could refer to as "UI5-View Over the Wire".
82+
Communication relies on AJAX roundtrips akin to HTML Over the Wire, but pure HTML cannot be sent since UI5 still requires XML views and JSON models. abap2UI5 leverages UI5's capability to render HTML from these constructs. This results in a model referred to as UI5-View Over the Wire.
8383

84-
A typical "UI5-View Over the Wire" response looks like this:
84+
A typical response in this pattern includes both view and model data:
8585

8686
<img width="400" alt="image" src="https://github.com/user-attachments/assets/d52112e6-b9b7-4e7f-ac7f-825c20620240" />
8787

@@ -90,7 +90,7 @@ A typical "UI5-View Over the Wire" response looks like this:
9090

9191
#### Partial HTML Updates
9292

93-
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:
93+
A central feature of HTML Over the Wire is that only the affected parts of the page are updated, rather than the entire document. Can this be achieved in UI5? While altering the XML view would typically trigger a full re-render, updating only the view model and binding attributes accordingly allows UI5 to update just the relevant UI elements. Consider this example:
9494

9595
```abap
9696
CLASS z2ui5_cl_app_partly_rerender DEFINITION PUBLIC CREATE PUBLIC.
@@ -123,22 +123,22 @@ ENDCLASS.
123123

124124
#### Summary
125125

126-
The **key concept of abap2UI5** is to bring the simplicity and efficiency of the HTML Over-the-Wire pattern into the SAP ecosystem.
126+
The core idea behind abap2UI5 is to bring the simplicity and efficiency of the HTML Over-the-Wire paradigm into the SAP ecosystem.
127127

128128
Key Benefits:
129-
- Static UI5 Frontend Application: Delivered with the initial HTTP request; generic and consistent across all use cases.
130-
- Backend-Driven UI Control: UI definitions and business logic are implemented entirely in ABAP classes.
131-
- ABAP-Centric Development: Eliminates the need for additional JavaScript or dedicated frontend development.
132-
- Simplified Deployment Model: No SPA-specific tooling or build processes; application logic and artifacts are maintained via abapGit and standard transport mechanisms.
133-
- Tight SAP Integration: Fully aligned with existing UI5 and ABAP technology stacks; compatible with ERP and S/4HANA systems.
134-
- Efficient for Business Applications: Particularly well-suited for CRUD-heavy apps, forms, tables, dashboards, and typical enterprise use cases.
129+
- Static UI5 Frontend Application: Delivered with the initial HTTP request; generic and consistent across all use cases
130+
- Backend-Driven UI Control: UI definitions and business logic are implemented entirely in ABAP classes
131+
- ABAP-Centric Development: Eliminates the need for additional JavaScript or dedicated frontend development
132+
- Simplified Deployment Model: No SPA-specific tooling or build processes; application logic and artifacts are maintained via abapGit and standard transport mechanisms
133+
- Seamless SAP Integration: Fully compatible with UI5 and ABAP, supports ERP and S/4, ABAP Standard & ABAP Cloud ready
134+
- Efficient for Business Applications: Ideal for CRUD operations, forms, dashboards, and all typical enterprise use cases
135135

136136
Limitations:
137137
- Not designed for highly interactive or collaborative real-time applications
138138
- Offline functionality or complex client-side interactions are not covered
139139
- Less effective if frontend and backend teams work independently
140140

141-
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.
141+
By relocating UI control to the ABAP backend and using UI5 purely for HTML rendering, abap2UI5 enables pragmatic, maintainable business application development — without the complexity of SPA architectures. For common enterprise use cases like dashboards, transactional forms, or reporting apps, it offers a clean, backend-driven alternative with shorter development cycles.
142142

143143
**References:**
144144
- [htmx in a nutshell](https://htmx.org/docs/#introduction)

0 commit comments

Comments
 (0)