Skip to content

Commit bd02839

Browse files
authored
Update concept.md
1 parent 883e302 commit bd02839

File tree

1 file changed

+17
-12
lines changed

1 file changed

+17
-12
lines changed

docs/advanced/technical/concept.md

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

3-
This page outlines the technical foundation of abap2UI5. At its core is an architectural model known as HTML Over-the-Wire, adapted to SAP-specific technologies. This approach streamlines UI5 app development by shifting both UI rendering and application logic to the ABAP backend.
3+
This page introduces the technical foundation of abap2UI5. At its core is an architectural model known as HTML Over-the-Wire, adapted to SAP-specific technologies. This approach streamlines UI5 app development by shifting both UI rendering and application logic to the ABAP backend.
44

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

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 OData data transfers, client-side MVC frameworks, and complex deployments. All application logic remains fully on the server [(1)](https://signalvnoise.com/svn3/html-over-the-wire/):
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.
8+
9+
Instead of building complex JavaScript frontends and dealing with APIs and JSON, the server takes care of everything: it renders the UI and sends HTML directly to the browser. No need for client-side MVC frameworks, no JSON conversions, and no complicated deployment processes [(1)](https://signalvnoise.com/svn3/html-over-the-wire/):
810

911
> 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.
1012
1113
> 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.
1214
13-
In contrast to client-side JavaScript frameworks, which offload most responsibilities to the browser, HTML Over-the-Wire keeps control on the backend. The initial request delivers all necessary JavaScript and CSS, and from then on, only partial HTML fragments are sent via AJAX, which the browser inserts without reloading the entire page.
15+
In this architecture:
16+
- The first request loads the basic JavaScript and CSS.
17+
- After that, the server only sends HTML fragments when needed.
18+
- The browser simply inserts those into the DOM. No full reloads required.
19+
20+
This keeps the frontend clean and simple — just a rendering layer, while all logic stays in the backend:
1421

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

1724
_HTML "Over the Wire" Lifecycle [(2)](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)_
1825

19-
Several frameworks adopt this pattern:
26+
Several modern frameworks follow this pattern:
27+
* [htmx](https://htmx.org), Progressive enhancement via HTML partials, Any web stack
28+
* [Hotwire (Turbo)](https://hotwired.dev), HTML-over-the-wire for Rails apps, Ruby on Rails
29+
* [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view), Real-time UI with server rendering,, Elixir / Phoenix
30+
* [Livewire](https://livewire.laravel.com), Server-driven UI components in PHP, Laravel / PHP
31+
* [Unpoly](https://unpoly.com), Simplified partial page updates, Any web stack
2032

21-
| Framework | Focus | Tech Stack |
22-
|-----------------------|--------------------------------------|----------------------|
23-
| [htmx](https://htmx.org) | Progressive enhancement via HTML partials | Any web stack |
24-
| [Hotwire (Turbo)](https://hotwired.dev) | HTML-over-the-wire for Rails apps | Ruby on Rails |
25-
| [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view) | Real-time UI with server rendering | Elixir / Phoenix |
26-
| [Livewire](https://livewire.laravel.com) | Server-driven UI components in PHP | Laravel / PHP |
27-
| [Unpoly](https://unpoly.com) | Simplified partial page updates | Any web stack |
2833

29-
#### Historical Context
34+
#### Isn't this just old-school server rendering?
3035

3136
In the early days of web development, Server-Side Rendering (SSR) was the standard. Each user interaction triggered a full-page reload, with the server delivering the complete HTML response. In the SAP ecosystem, this approach was used by technologies such as ITS Mobile and SAP GUI for HTML.
3237

0 commit comments

Comments
 (0)