|
1 | 1 | # Key Concept: UI5 Over-the-Wire? |
2 | 2 |
|
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. |
4 | 4 |
|
5 | 5 | #### What is HTML Over-the-Wire? |
6 | 6 |
|
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/): |
8 | 10 |
|
9 | 11 | > 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. |
10 | 12 |
|
11 | 13 | > 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. |
12 | 14 |
|
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: |
14 | 21 |
|
15 | 22 | <img width="400" alt="image" src="https://github.com/user-attachments/assets/a9fde24a-c572-4e5c-b203-59a0667b9931" /> |
16 | 23 |
|
17 | 24 | _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)_ |
18 | 25 |
|
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 |
20 | 32 |
|
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 | |
28 | 33 |
|
29 | | -#### Historical Context |
| 34 | +#### Isn't this just old-school server rendering? |
30 | 35 |
|
31 | 36 | 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. |
32 | 37 |
|
|
0 commit comments