Skip to content

Commit 11594d8

Browse files
oblomov-devoblomov-dev
authored
Update and rename sap.md to ui5.md
1 parent 0bb0532 commit 11594d8

File tree

2 files changed

+110
-67
lines changed

2 files changed

+110
-67
lines changed

‎docs/advanced/technical/sap.md‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎docs/advanced/technical/ui5.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: UI5 Freestyle vs abap2UI5: Architecture, State, Workflow & Communication
3+
description: Compare UI5 Freestyle with abap2UI5, focusing on architecture, state handling, developer workflow, and client-server communication.
4+
---
5+
6+
# UI5 Freestyle vs abap2UI5: Architecture, State, Workflow & Communication
7+
8+
This page compares **UI5 Freestyle applications** with **abap2UI5**, focusing on architecture, state handling, developer workflow, and client-server communication patterns.
9+
10+
---
11+
12+
## Architecture Comparison
13+
14+
### UI5 Freestyle
15+
- **Frontend-centric SPA** built with SAPUI5/OpenUI5.
16+
- Developers create XML Views, JavaScript Controllers, and Models in the frontend.
17+
- Application logic, navigation, and UI state are managed client-side.
18+
- Backend provides data via OData services (SEGW, CAP).
19+
- Tight coupling between frontend development and backend data provisioning.
20+
21+
### abap2UI5
22+
- Static UI5 shell in the browser, no app-specific frontend code.
23+
- Backend defines UI5 XML Views & JSON ViewModels in ABAP.
24+
- Frontend simply renders the backend-provided View definitions.
25+
- User interactions are handled by backend logic via Over-the-Wire communication.
26+
- Simplified, backend-driven UI rendering with minimal frontend complexity.
27+
28+
---
29+
30+
## State Handling
31+
32+
| Aspect | UI5 Freestyle | abap2UI5 |
33+
|--------|---------------|----------|
34+
| **State Definition** | Managed in frontend models (JSONModel, ODataModel) | Managed in ABAP ViewModels |
35+
| **Frontend State Management** | Handled via controllers & bindings | Frontend has no state logic, purely renders backend ViewModels |
36+
| **Persistence** | OData services persist data | Backend updates ViewModels and persists state |
37+
| **Interactivity** | Events handled in frontend controllers | Events trigger backend logic, which returns updated ViewModels |
38+
39+
---
40+
41+
## Developer Workflow
42+
43+
| Aspect | UI5 Freestyle | abap2UI5 |
44+
|--------|---------------|----------|
45+
| **UI Definition** | XML Views & JS Controllers developed in frontend | XML View & ViewModel defined in ABAP |
46+
| **APIs** | OData services required (SEGW, CAP) | Generic HTTP event handler, no OData needed |
47+
| **Frontend Artifacts** | BSP or UI5 repository deployment required | Static UI5 Shell, no app-specific frontend deployment |
48+
| **Development Scope** | Separate frontend and backend development | Pure ABAP development |
49+
| **Deployment** | Frontend & backend deployed separately | Single ABAP transport / abapGit project |
50+
| **Complexity** | High: UI5 Views, Controllers, Models + OData coordination | Low: Backend-driven simplicity |
51+
52+
---
53+
54+
## Client-Server Communication Flow
55+
56+
### UI5 Freestyle Flow
57+
1. **Frontend loads custom UI5 application** (BSP, repository app).
58+
2. **UI5 Views, JS Controllers, Models** are loaded and executed in browser.
59+
3. **Frontend handles UI logic, state, and user interactions**.
60+
4. **OData services are called for data retrieval & persistence**.
61+
5. Backend returns data but does not influence UI structure or flow.
62+
6. Frontend updates UI models and bindings accordingly.
63+
64+
```plaintext
65+
Browser (UI5 Freestyle App)
66+
├──> Load XML Views, Controllers, Models
67+
├──> Handle events, state, navigation in frontend
68+
├──> OData Calls to backend for data operations
69+
Backend (OData Services / CAP)
70+
└──> Provides data, no involvement in UI rendering or logic
71+
```
72+
73+
## abap2UI5 Flow
74+
- Frontend loads static UI5 Shell (index.html).
75+
- Requests View & ViewModel from backend (ABAP Class).
76+
- Frontend renders UI5 controls from backend definitions.
77+
- User events trigger HTTP requests to backend.
78+
- Backend processes events, updates ViewModel.
79+
- Backend returns updated ViewModel.
80+
- Frontend re-binds UI, updating only affected controls.
81+
82+
```plaintext
83+
Browser (Static UI5 Shell)
84+
├──> HTTP Request: Load View & ViewModel
85+
├──> Render UI5 controls from backend definitions
86+
├──> User events → AJAX Event Request to backend
87+
Backend (ABAP Class)
88+
└──> Processes events, updates ViewModel, returns changes
89+
```
90+
91+
## Side-by-Side Comparison
92+
93+
| Aspect | UI5 Freestyle | abap2UI5 |
94+
|--------|---------------|----------|
95+
| **UI Rendering** | Client builds UI with XML Views & JS Controllers | Frontend renders backend-defined XML View & ViewModel |
96+
| **Communication** | OData services (SEGW, CAP) for data operations | Simple HTTP event requests & ViewModel updates |
97+
| **State Handling** | Managed in frontend models & controllers | Fully backend-driven ViewModel state |
98+
| **Developer Workflow** | Separate frontend (UI5) and backend (OData) development | Pure ABAP class development |
99+
| **Frontend Artifacts** | Requires BSP or UI5 repository deployment | Static UI5 Shell, no per-app deployment |
100+
| **Flexibility** | High flexibility in frontend, but complex coordination with backend | Full backend control, runtime flexibility without frontend overhead |
101+
| **Complexity** | High: UI5 Views, Controllers, Models + OData + deployment | Low: ABAP-only, Over-the-Wire simplicity |
102+
103+
## Conclusion
104+
105+
Both UI5 Freestyle and abap2UI5 enable UI5 application development, but follow fundamentally different approaches:
106+
107+
- **UI5 Freestyle** offers maximum frontend freedom, suitable for highly customized, interactive applications, but comes with significant complexity in development, state handling, and deployment.
108+
- **abap2UI5** shifts UI control back to the ABAP backend, simplifying development by eliminating the need for separate frontend apps, OData services, and JavaScript controllers.
109+
110+
For projects where simplicity, backend-driven control, and rapid iterations are key, **abap2UI5 offers a pragmatic alternative** to the more frontend-heavy Freestyle approach.

0 commit comments

Comments
 (0)