Skip to content

Commit e30a730

Browse files
oblomov-devoblomov-dev
authored
Update ui5.md
1 parent 5ce5ee1 commit e30a730

File tree

1 file changed

+11
-20
lines changed
  • docs/technical/technology

1 file changed

+11
-20
lines changed

‎docs/technical/technology/ui5.md‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,41 +12,33 @@ This page provides a structured technical comparison between **UI5 Freestyle** a
1212
| Aspect | UI5 Freestyle (MVC) | abap2UI5 |
1313
|-------------------|-------------------------------------------------------------|------------------------------------------------------------|
1414
| **Backend Stack** | ABAP services (OData/REST), loosely coupled | ABAP Classes generating XML Views and JSON ViewModels |
15-
| **Frontend Stack**| UI5 app (JavaScript, XML, Controller) | Static UI5 Shell |
15+
| **Frontend Stack**| UI5 Freestyle app (JavaScript, XML, Controller) | UI5 Freestyle App Static |
1616
| **Rendering** | View rendered by frontend controller | UI structure defined by backend, rendered in frontend |
1717
| **UI Definition** | XML Views maintained in frontend project | XML Views created directly in ABAP |
1818
| **Communication** | OData or custom AJAX calls | Simple HTTP requests (Over-the-Wire) |
1919
| **Runtime Control**| Logic split between backend and UI controller | Full control over UI and logic in backend |
20+
| **Model** | Defined at designtime via CDS | Designed at Designtime or Runtime via Internal Tables |
2021

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

3224
| Aspect | UI5 Freestyle | abap2UI5 |
3325
|----------------------------|-----------------------------------------------------|--------------------------------------------------------|
34-
| **Languages/Artifacts** | JS, XML, HTML, ABAP services | ABAP class for both View and logic |
26+
| **Languages/Artifacts** | JS, XML, HTML, OData services | ABAP class for both View and logic |
3527
| **Frontend Deployment** | UI5 app built and deployed to BSP/MTA | Shared static UI5 Shell (no app-specific deployment) |
3628
| **Tooling Requirements** | SAP Business Application Studio / Web IDE | Any ABAP IDE (including SE80), no additional tools |
3729
| **Transport** | Separate transport for frontend and backend | Single backend deployment via transport or abapGit |
3830
| **Development Style** | Imperative, frontend-driven | Declarative, ABAP-centric |
3931
| **Complexity** | High: frontend/backend split | Low: unified backend logic and layout |
4032

41-
### 4. Client–Server Communication Flow
33+
### 3. Client–Server Communication Flow
4234

4335
#### UI5 Freestyle
4436

4537
```plaintext
4638
Browser (UI5 App)
4739
├──> Load HTML/CSS/JS resources
4840
├──> Initialize models and views
49-
├──> Bind data via OData/custom AJAX
41+
├──> Bind data via OData
5042
├──> Handle logic in JS controller
5143
Backend (OData/REST)
5244
└──> Responds to requests, no control over UI
@@ -62,7 +54,7 @@ Backend (ABAP Class)
6254
└──> Processes event, updates ViewModel, returns changes
6355
```
6456

65-
### 5. Flexibility & Runtime Capabilities
57+
### 4. Flexibility & Runtime Capabilities
6658

6759
| Aspect | UI5 Freestyle | abap2UI5 |
6860
|---------------------------|---------------------------------------------|------------------------------------------|
@@ -71,7 +63,7 @@ Backend (ABAP Class)
7163
| **Use Case Fit** | Highly interactive or frontend-heavy apps | Backend-driven UIs with clean backend control |
7264
| **Learning Curve** | Steep (JS, XML, binding, tooling) | Flat (ABAP-only, no JS or metadata) |
7365

74-
### 6. Cloud Readiness & Compliance
66+
### 5. Cloud Readiness & Compliance
7567

7668
| Feature | UI5 Freestyle | abap2UI5 |
7769
|----------------------------|-------------------------------|-------------------------------|
@@ -80,7 +72,7 @@ Backend (ABAP Class)
8072
| **Clean Core Compliance** | ✅ Possible | ✅ Yes |
8173
| **Runtime Flexibility** | ✅ via JS logic | ✅ Fully runtime-capable |
8274

83-
> 🚀 **Both frameworks offer full UI flexibility.** abap2UI5 allows this using only ABAP, while UI5 Freestyle shifts control to the JavaScript layer.
75+
> 🚀 **Both approaches offer full UI flexibility.** abap2UI5 allows this using only ABAP, while UI5 Freestyle shifts control to the JavaScript layer.
8476
8577
### Conclusion
8678

@@ -93,11 +85,10 @@ Backend (ABAP Class)
9385
|--------------------------|-------------------------------|-----------------------------------|
9486
| UI Architecture | JavaScript MVC | Backend-driven Over-the-Wire |
9587
| Data & Actions | OData / custom AJAX | Simple HTTP |
96-
| State Handling | JSON Models in frontend | Central ABAP ViewModel |
9788
| UI Customization | Fully flexible via JS | Fully dynamic via ABAP |
9889
| Tooling | BAS / Web IDE | Any ABAP IDE |
9990
| Cloud Readiness | ✅ Yes | ✅ Yes |
100-
| Clean Core | ✅ Possible | ✅ Yes |
91+
| Clean Core | ✅ Yes | ✅ Yes |
10192
| Use Case Fit | Interactive web apps | Backend-driven UIs |
10293
| Learning Curve | High | Low |
103-
| Deployment | Split frontend/backend | Unified backend class |
94+
| Deployment | Split frontend/backend | Pure ABAP backend class |

0 commit comments

Comments
 (0)