Skip to content

Commit 1afa6ed

Browse files
oblomov-devoblomov-dev
authored
Update ui5.md
1 parent aa99c28 commit 1afa6ed

File tree

1 file changed

+82
-85
lines changed
  • docs/technical/technology

1 file changed

+82
-85
lines changed

‎docs/technical/technology/ui5.md

Lines changed: 82 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,102 @@
1-
# UI5: Architecture, State & Communication
2-
3-
This page compares **UI5 Freestyle applications** with **abap2UI5**, focusing on architecture, state handling, developer workflow, and client-server communication patterns.
4-
1+
---
2+
outline: [2, 4]
53
---
64

7-
## Architecture Comparison
8-
9-
### UI5 Freestyle
10-
- **Frontend-centric SPA** built with SAPUI5/OpenUI5.
11-
- Developers create XML Views, JavaScript Controllers, and Models in the frontend.
12-
- Application logic, navigation, and UI state are managed client-side.
13-
- Backend provides data via OData services (SEGW, CAP).
14-
- Tight coupling between frontend development and backend data provisioning.
15-
16-
### abap2UI5
17-
- Static UI5 shell in the browser, no app-specific frontend code.
18-
- Backend defines UI5 XML Views & JSON ViewModels in ABAP.
19-
- Frontend simply renders the backend-provided View definitions.
20-
- User interactions are handled by backend logic via Over-the-Wire communication.
21-
- Simplified, backend-driven UI rendering with minimal frontend complexity.
5+
# UI5 Freestyle vs. abap2UI5: Architecture, State & Developer Experience
226

23-
---
7+
This page provides a structured technical comparison between **UI5 Freestyle** and **abap2UI5**, focusing on architecture, state handling, developer workflow, and communication models.
248

25-
## State Handling
9+
### 1. Architectural Paradigms
2610

27-
| Aspect | UI5 Freestyle | abap2UI5 |
28-
|--------|---------------|----------|
29-
| **State Definition** | Managed in frontend models (JSONModel, ODataModel) | Managed in ABAP ViewModels |
30-
| **Frontend State Management** | Handled via controllers & bindings | Frontend has no state logic, purely renders backend ViewModels |
31-
| **Persistence** | OData services persist data | Backend updates ViewModels and persists state |
32-
| **Interactivity** | Events handled in frontend controllers | Events trigger backend logic, which returns updated ViewModels |
11+
| Aspect | UI5 Freestyle (MVC) | abap2UI5 |
12+
|-------------------|-------------------------------------------------------------|------------------------------------------------------------|
13+
| **Backend Stack** | ABAP services (OData/REST), loosely coupled | ABAP Classes generating XML Views and JSON ViewModels |
14+
| **Frontend Stack**| UI5 app (JavaScript, XML, Controller) | Static UI5 Shell |
15+
| **Rendering** | View rendered by frontend controller | UI structure defined by backend, rendered in frontend |
16+
| **UI Definition** | XML Views maintained in frontend project | XML Views created directly in ABAP |
17+
| **Communication** | OData or custom AJAX calls | Simple HTTP requests (Over-the-Wire) |
18+
| **Runtime Control**| Logic split between backend and UI controller | Full control over UI and logic in backend |
3319

34-
---
20+
### 2. State Management
3521

36-
## Developer Workflow
22+
| Aspect | UI5 Freestyle | abap2UI5 |
23+
|----------------------------|-----------------------------------------------------|-----------------------------------------------------|
24+
| **State Definition** | Managed in frontend model (JSON/BindingContexts) | Centralized in ABAP ViewModels |
25+
| **Frontend Involvement** | Fully responsible for UI state | Frontend has no independent state management |
26+
| **Persistence** | Via backend APIs or model syncing | Reflected through ViewModel updates |
27+
| **User Interaction Flow** | Triggers JS controller events and backend calls | Triggers backend events, state is updated in ABAP |
3728

38-
| Aspect | UI5 Freestyle | abap2UI5 |
39-
|--------|---------------|----------|
40-
| **UI Definition** | XML Views & JS Controllers developed in frontend | XML View & ViewModel defined in ABAP |
41-
| **APIs** | OData services required (SEGW, CAP) | Generic HTTP event handler, no OData needed, Unstructured through a generic service |
42-
| **Frontend Artifacts** | BSP or UI5 repository deployment required | Static UI5 Shell, no app-specific frontend deployment |
43-
| **Development Scope** | Separate frontend and backend development | Pure ABAP development |
44-
| **Deployment** | Frontend & backend deployed separately | Single ABAP transport / abapGit project |
45-
| **Complexity** | High: UI5 Views, Controllers, Models + OData coordination | Low: Backend-driven simplicity |
29+
### 3. Developer Workflow
4630

47-
---
31+
| Aspect | UI5 Freestyle | abap2UI5 |
32+
|----------------------------|-----------------------------------------------------|--------------------------------------------------------|
33+
| **Languages/Artifacts** | JS, XML, HTML, ABAP services | ABAP class for both View and logic |
34+
| **Frontend Deployment** | UI5 app built and deployed to BSP/MTA | Shared static UI5 Shell (no app-specific deployment) |
35+
| **Tooling Requirements** | SAP Business Application Studio / Web IDE | Any ABAP IDE (including SE80), no additional tools |
36+
| **Transport** | Separate transport for frontend and backend | Single backend deployment via transport or abapGit |
37+
| **Development Style** | Imperative, frontend-driven | Declarative, ABAP-centric |
38+
| **Complexity** | High: frontend/backend split | Low: unified backend logic and layout |
4839

49-
## Client-Server Communication Flow
40+
### 4. Client–Server Communication Flow
5041

51-
### UI5 Freestyle Flow
52-
1. **Frontend loads custom UI5 application** (BSP, repository app).
53-
2. **UI5 Views, JS Controllers, Models** are loaded and executed in browser.
54-
3. **Frontend handles UI logic, state, and user interactions**.
55-
4. **OData services are called for data retrieval & persistence**.
56-
5. Backend returns data but does not influence UI structure or flow.
57-
6. Frontend updates UI models and bindings accordingly.
42+
#### UI5 Freestyle
5843

5944
```plaintext
60-
Browser (UI5 Freestyle App)
61-
├──> Load XML Views, Controllers, Models
62-
├──> Handle events, state, navigation in frontend
63-
├──> OData Calls to backend for data operations
64-
Backend (OData Services / CAP)
65-
└──> Provides data, no involvement in UI rendering or logic
45+
Browser (UI5 App)
46+
├──> Load HTML/CSS/JS resources
47+
├──> Initialize models and views
48+
├──> Bind data via OData/custom AJAX
49+
├──> Handle logic in JS controller
50+
Backend (OData/REST)
51+
└──> Responds to requests, no control over UI
6652
```
6753

68-
## abap2UI5 Flow
69-
- Frontend loads static UI5 Shell (index.html).
70-
- Requests View & ViewModel from backend (ABAP Class).
71-
- Frontend renders UI5 controls from backend definitions.
72-
- User events trigger HTTP requests to backend.
73-
- Backend processes events, updates ViewModel.
74-
- Backend returns updated ViewModel.
75-
- Frontend re-binds UI, updating only affected controls.
76-
54+
#### abap2UI5
7755
```plaintext
7856
Browser (Static UI5 Shell)
79-
├──> HTTP Request: Load View & ViewModel
80-
├──> Render UI5 controls from backend definitions
81-
├──> User events → AJAX Event Request to backend
57+
├──> HTTP request: Load XML View + ViewModel
58+
├──> Renders UI5 controls as defined by backend
59+
├──> Sends event requests on interaction
8260
Backend (ABAP Class)
83-
└──> Processes events, updates ViewModel, returns changes
61+
└──> Processes event, updates ViewModel, returns changes
8462
```
8563

86-
## Side-by-Side Comparison
87-
88-
| Aspect | UI5 Freestyle | abap2UI5 |
89-
|--------|---------------|----------|
90-
| **UI Rendering** | Client builds UI with XML Views & JS Controllers | Frontend renders backend-defined XML View & ViewModel |
91-
| **Communication** | OData services (SEGW, CAP) for data operations | Simple HTTP event requests & ViewModel updates |
92-
| **State Handling** | Managed in frontend models & controllers | Fully backend-driven ViewModel state |
93-
| **Developer Workflow** | Separate frontend (UI5) and backend (OData) development | Pure ABAP class development |
94-
| **Frontend Artifacts** | Requires BSP or UI5 repository deployment | Static UI5 Shell, no per-app deployment |
95-
| **Flexibility** | High flexibility in frontend, but complex coordination with backend | Full backend control, runtime flexibility without frontend overhead |
96-
| **Complexity** | High: UI5 Views, Controllers, Models + OData + deployment | Low: ABAP-only, Over-the-Wire simplicity |
97-
98-
## Conclusion
99-
100-
Both UI5 Freestyle and abap2UI5 enable UI5 application development, but follow fundamentally different approaches:
101-
102-
- **UI5 Freestyle** offers maximum frontend freedom, suitable for highly customized, interactive applications, but comes with significant complexity in development, state handling, and deployment.
103-
- **abap2UI5** shifts UI control back to the ABAP backend, simplifying development by eliminating the need for separate frontend apps, OData services, and JavaScript controllers.
104-
105-
For projects where simplicity, backend-driven control, and rapid iterations are key, **abap2UI5 offers a pragmatic alternative** to the more frontend-heavy Freestyle approach.
64+
### 5. Flexibility & Runtime Capabilities
65+
66+
| Aspect | UI5 Freestyle | abap2UI5 |
67+
|---------------------------|---------------------------------------------|------------------------------------------|
68+
| **UI Customization** | Fully flexible (custom JS/UI) | Fully flexible via ABAP logic |
69+
| **Runtime Model Dynamics**| Mostly static, runtime requires JS coding | Dynamic via RTTI and runtime logic |
70+
| **Use Case Fit** | Highly interactive or frontend-heavy apps | Backend-driven UIs with clean backend control |
71+
| **Learning Curve** | Steep (JS, XML, binding, tooling) | Flat (ABAP-only, no JS or metadata) |
72+
73+
### 6. Cloud Readiness & Compliance
74+
75+
| Feature | UI5 Freestyle | abap2UI5 |
76+
|----------------------------|-------------------------------|-------------------------------|
77+
| **ABAP Cloud Compliant** | ✅ Yes | ✅ Yes |
78+
| **CDS/OData Dependency** | ❌ Optional | ❌ Not used |
79+
| **Clean Core Compliance** | ✅ Possible | ✅ Yes |
80+
| **Runtime Flexibility** | ✅ via JS logic | ✅ Fully runtime-capable |
81+
82+
> 🚀 **Both frameworks offer full UI flexibility.** abap2UI5 allows this using only ABAP, while UI5 Freestyle shifts control to the JavaScript layer.
83+
84+
### Conclusion
85+
86+
- **UI5 Freestyle** is best suited for interactive, frontend-rich applications that require tight control over the client.
87+
- **abap2UI5** is ideal for backend-driven UIs, faster iteration, and minimal frontend complexity — especially for ABAP-centric teams.
88+
89+
### Summary Table
90+
91+
| Category | UI5 Freestyle | abap2UI5 |
92+
|--------------------------|-------------------------------|-----------------------------------|
93+
| UI Architecture | JavaScript MVC | Backend-driven Over-the-Wire |
94+
| Data & Actions | OData / custom AJAX | Simple HTTP |
95+
| State Handling | JSON Models in frontend | Central ABAP ViewModel |
96+
| UI Customization | Fully flexible via JS | Fully dynamic via ABAP |
97+
| Tooling | BAS / Web IDE | Any ABAP IDE |
98+
| Cloud Readiness | ✅ Yes | ✅ Yes |
99+
| Clean Core | ✅ Possible | ✅ Yes |
100+
| Use Case Fit | Interactive web apps | Backend-driven UIs |
101+
| Learning Curve | High | Low |
102+
| Deployment | Split frontend/backend | Unified backend class |

0 commit comments

Comments
 (0)