Skip to content

Commit f8ea6ed

Browse files
oblomov-devoblomov-dev
authored
Update comparison.md
1 parent e07dcbb commit f8ea6ed

File tree

1 file changed

+39
-36
lines changed

1 file changed

+39
-36
lines changed

‎docs/advanced/technical/comparison.md‎

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,54 @@
1-
# Comparison
1+
# abap2UI5 in Comparison: "HTML Over the Wire", UI5 Freestyle & RAP
22

3-
**abap2UI5** follows the same fundamental principles as modern "HTML Over the Wire" frameworks like **Phoenix LiveView**, **Laravel Livewire**, and **htmx** (while also contrasting it with **RAP (Fiori Elements)**).
3+
This page compares **abap2UI5** with both:
4+
1. Modern "HTML Over the Wire" frameworks like **Phoenix LiveView**, **Laravel Livewire**, and **htmx**.
5+
2. Traditional SAP UI5 approaches: **Freestyle UI5** and **RAP (Fiori Elements)**.
46

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.
7+
The goal is to show how abap2UI5 combines Over-the-Wire simplicity with SAP-specific technologies, offering a lightweight alternative for UI5 development.
68

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.
9+
---
810

9-
### Comparison to LiveView, Livewire, htmx, RAP and UI5 Freestyle
11+
## 1. abap2UI5 vs LiveView, Livewire & htmx
1012

11-
| Concept | LiveView / Livewire / htmx | abap2UI5 | UI5 Freestyle | RAP (Fiori Elements) |
12-
|---------------------------|------------------------------------------------------|----------------------------------------------------------------|-----------------------------------------------------------|------------------------------------------------------------|
13-
| **Server-rendered UI** | HTML is generated on the server and sent to the client | XML-Views (UI5) are generated in ABAP, rendered in the browser | Frontend (XML Views, JS/Controller) renders data from backend | UI defined via annotations & templates, rendered in frontend |
14-
| **Frontend is "dumb"** | Browser displays HTML, no application state | UI5 app only renders server-provided view & data | Full application logic in frontend controller | Minimal frontend logic, driven by backend annotations |
15-
| **Interactivity triggers server calls** | AJAX/WebSocket calls on user events | Events sent via AJAX to ABAP backend | Event handling in frontend, OData used for data exchange | OData requests on UI interactions |
16-
| **State remains in the backend** | State managed server-side | State & flow fully in ABAP, drafts simulate persistence | State often kept in frontend models | State persistence managed via RAP framework (drafts etc.) |
17-
| **Delta Rendering** | HTML diffs sent to update UI | View & Data sent as JSON diff, partial UI5 control updates | Full re-rendering managed in frontend controllers | Smart controls manage partial updates based on metadata |
18-
| **APIs required?** | No explicit API needed, returns UI | No OData/CDS necessary, simple HTTP handler used | Requires OData Service (SEGW or CAP) | Requires typed OData services & CDS artifacts |
19-
| **Frontend development effort** | Minimal JS, mostly markup-driven | No custom JS needed, pure ABAP | Separate frontend app (BAS/WebIDE), heavy JS development | Generated UI, low-code approach, limited flexibility |
20-
| **Backend-driven flexibility** | Full flexibility, logic stays on server | Complete control in ABAP classes (Views, Models, Logic) | Backend delivers data only, UI logic in JS | Backend defines UI behavior via annotations, limited runtime flexibility |
21-
| **Custom UI controls** | Can be added via normal HTML/JS | Possible via Over-the-Wire delivery of JS/HTML | Developed separately, integrated in frontend | Limited to RAP-defined extensibility options |
13+
| Concept | LiveView / Livewire / htmx | abap2UI5 |
14+
|---------------------------|------------------------------------------------------|----------------------------------------------------------------|
15+
| **Server-rendered UI** | HTML is rendered on the server, sent as fragments | UI5 XML Views are generated in ABAP and rendered in browser |
16+
| **Frontend knowledge** | Browser is "dumb", no app state, only rendering HTML | UI5 app does not know app state or logic, renders Views + Data |
17+
| **Interactivity** | User events trigger AJAX/WebSocket requests to server | User events trigger AJAX roundtrips to ABAP backend |
18+
| **State Management** | Server maintains state (LiveView via WebSockets, Livewire via stateless diffs) | State and flow managed fully in ABAP (Drafts simulate statefulness) |
19+
| **Delta Rendering** | Only changed HTML parts are sent | View & Data sent as JSON diff, UI5 Controls are selectively updated |
20+
| **APIs required?** | No REST/OData needed, server returns UI directly | No OData/CDS needed, simple generic HTTP handler |
21+
| **Frontend development** | Minimal JS needed, declarative, markup-driven | No custom JS needed, all UI logic in ABAP |
22+
| **Deployment** | Part of backend app, simple web deployment | Pure ABAP code, no separate UI deployment, fully via abapGit |
2223

23-
### What makes abap2UI5 different?
24+
> **Summary:** abap2UI5 applies the "HTML Over the Wire" principle to SAP UI5 applications. Like LiveView, Livewire, and htmx, it keeps state and logic on the server, simplifying frontend complexity. The difference: it leverages UI5 XML Views and integrates natively into ABAP workflows.
2425
25-
While abap2UI5 follows the "Over the Wire" principle like LiveView, Livewire, and htmx, it is adapted to the SAP ecosystem:
26+
---
2627

27-
- Instead of sending raw HTML, abap2UI5 transmits **UI5 XML Views and Data models** to the frontend.
28-
- Uses **stateless AJAX requests**, simulating stateful behavior via ABAP drafts.
29-
- Avoids OData, CDS & RAP layers — reduces backend artifacts to a minimum.
30-
- Leverages **ABAP Classes** as UI components, offering code completion and consistency.
31-
- Brings back an ALV-like development flow for modern UI5 apps.
28+
## 2. abap2UI5 vs SAP Freestyle UI5 & RAP
3229

33-
Compared to UI5 Freestyle and RAP:
34-
- abap2UI5 offers more flexibility than RAP but avoids the complexity of Freestyle frontend stacks.
35-
- UI logic and state remain entirely in ABAP, without maintaining separate frontend projects.
30+
| Concept | abap2UI5 | UI5 Freestyle | RAP (Fiori Elements) |
31+
|---------------------------|--------------------------------------------------------|-----------------------------------------------------------|------------------------------------------------------------|
32+
| **UI Rendering** | UI5 XML Views generated in ABAP, rendered in browser | XML Views & JS Controllers render data in frontend | UI generated from annotations & templates |
33+
| **Frontend knowledge** | Frontend shows Views & Data from backend, no app logic | Application logic resides in frontend JS Controllers | Frontend driven by annotations, minimal logic |
34+
| **Interactivity** | Events sent via AJAX to ABAP backend | Event handling in frontend JS, calls backend via OData | OData calls on interaction, bound to annotations |
35+
| **State Management** | Managed in ABAP, Drafts emulate stateful flow | Frontend models handle state, backend only for persistence | RAP Draft handling via framework abstractions |
36+
| **APIs required?** | Simple generic HTTP handler, no OData/CDS necessary | Requires SEGW / OData / CAP service layers | Requires typed OData & CDS artifacts |
37+
| **Flexibility** | Full control in ABAP for Views, Models & Logic | Flexible, but high frontend development effort | Highly structured, less runtime flexibility |
38+
| **Frontend Artifacts** | No BSP / UI5 app deployment needed, index.html in ABAP | BSP App, UI5 repository deployment required | UI5 App generated from annotations, deployment required |
39+
| **Development Workflow** | Pure ABAP development, deploy via ABAP class activation | Frontend/backend developed & deployed separately | Backend annotations drive frontend generation |
40+
| **Versioning & Deployment**| Single ABAP code line, full abapGit integration | Separate transport of frontend & backend | CDS, OData, UI5 app artifacts transported separately |
3641

42+
> **Summary:** abap2UI5 avoids the complexity of OData, CDS, and separate frontend deployments. Unlike UI5 Freestyle (which requires full-stack JS development) and RAP (which follows strict structures), abap2UI5 allows for rapid, flexible UI5 development directly in ABAP — all in a single code line.
3743
38-
### Conclusion
44+
---
3945

40-
abap2UI5 combines the simplicity of "HTML Over the Wire" with SAP UI5's capabilities — fully backend-driven, minimalistic, and flexible. It offers ABAP developers a way to build UI5 applications without the overhead of OData, CAP, or JavaScript-heavy frontend apps.
46+
## Conclusion
4147

42-
For developers used to SAP GUI or ALV-based programming, abap2UI5 feels familiar while embracing modern web technologies under the hood.
48+
abap2UI5 takes the best of the "HTML Over the Wire" philosophy and applies it to SAP UI5 development. It reduces the overhead of typical SAP frontend architectures by:
49+
- Keeping all logic and state in ABAP.
50+
- Avoiding OData, CDS, and separate frontend deployments.
51+
- Leveraging UI5 XML Views for rendering without losing UI5 flexibility.
4352

44-
### Further Reading
53+
For developers familiar with SAP GUI and ALV, abap2UI5 offers a modern yet minimalistic approach to build UI5 applications — fast, backend-driven, and efficient.
4554

46-
- [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html)
47-
- [Laravel Livewire](https://laravel-livewire.com/)
48-
- [htmx](https://htmx.org/)
49-
- [SAPUI5 Freestyle Documentation](https://sapui5.hana.ondemand.com/)
50-
- [RAP Guide (Fiori Elements)](https://help.sap.com/viewer/product/ABAP_RESTFUL_APPLICATION_PROGRAMMING_MODEL/latest/en-US)
51-
- [abap2UI5 on GitHub](https://github.com/abap2UI5/abap2UI5)

0 commit comments

Comments
 (0)