|
| 1 | +# abap2UI5 and "HTML Over the Wire" – Similarities to LiveView, Livewire & htmx |
| 2 | + |
| 3 | +**abap2UI5** follows the same fundamental principles as modern "HTML Over the Wire" frameworks like **Phoenix LiveView**, **Laravel Livewire**, and **htmx**. |
| 4 | + |
| 5 | +All of these frameworks simplify web development by rendering the UI on the server and sending it directly to the browser — reducing frontend complexity and keeping logic and state in the backend. |
| 6 | + |
| 7 | +abap2UI5 adapts this idea to the SAP world, allowing developers to build UI5 applications purely in ABAP, without OData, CDS, or complex frontend stacks. |
| 8 | + |
| 9 | +--- |
| 10 | + |
| 11 | +## Common Principles |
| 12 | + |
| 13 | +| Concept | LiveView / Livewire / htmx | abap2UI5 | |
| 14 | +|---------------------------|------------------------------------------------------|----------------------------------------------------------------| |
| 15 | +| **Server-rendered UI** | HTML is generated on the server and sent to the client | XML-Views (UI5) are created in ABAP and rendered as HTML in the browser | |
| 16 | +| **"Dumb" frontend** | Browser only displays HTML, no application logic | UI5 frontend does not know about views or application logic — everything stays in ABAP | |
| 17 | +| **Interactions trigger server calls** | Events send AJAX/WebSocket requests to the server | UI5 events are sent back to ABAP via AJAX (Over the Wire concept) | |
| 18 | +| **State remains in the backend** | Application state is managed on the server (LiveView uses WebSocket stateful sessions, Livewire does stateless diffs) | Complete application state is kept in ABAP — frontend holds no state | |
| 19 | +| **Delta Rendering** | Only HTML diffs are sent to update parts of the page | abap2UI5 sends View + Data together as JSON, frontend updates only changed UI5 controls | |
| 20 | +| **No dedicated APIs required** | No OData/REST APIs needed — server returns ready-to-render UI | No OData, CDS, or SEGW — View & Model are sent together in a JSON package | |
| 21 | +| **Minimal frontend code** | Little to no custom JavaScript needed | Generic UI5 frontend app — all app logic is implemented in ABAP | |
| 22 | +| **Backend-driven flexibility** | UI & logic changes are done in backend, no frontend builds | Views, models, and logic are fully controlled by ABAP, no redeployment of frontend apps | |
| 23 | + |
| 24 | +--- |
| 25 | + |
| 26 | +## How abap2UI5 differs |
| 27 | + |
| 28 | +While abap2UI5 shares the same architectural ideas, it adapts them to the specifics of SAP environments: |
| 29 | + |
| 30 | +- **View + Data combined as UI5 XML Views & JSON**, not plain HTML fragments like htmx. |
| 31 | +- **Stateless communication via AJAX**, similar to Livewire, while offering a stateful-like experience using drafts. |
| 32 | +- **UI5 Controls are ABAP objects**, providing code completion & consistency within ADT. |
| 33 | +- Designed for SAP systems — leveraging **RTTI**, internal tables, and classic ABAP patterns (e.g., ALV-like apps). |
| 34 | +- Avoids OData, RAP & CDS for faster development cycles and reduced complexity. |
| 35 | + |
| 36 | +In short, abap2UI5 brings the simplicity of "HTML Over the Wire" to ABAP developers by enabling full-stack UI5 development with pure ABAP — no JavaScript skills required, no extra frontend layers needed. |
| 37 | + |
| 38 | +--- |
| 39 | + |
| 40 | +## Further Reading |
| 41 | + |
| 42 | +- [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html) |
| 43 | +- [Laravel Livewire](https://laravel-livewire.com/) |
| 44 | +- [htmx](https://htmx.org/) |
| 45 | +- [abap2UI5 on GitHub](https://github.com/abap2UI5/abap2UI5) |
0 commit comments