Skip to content

Commit 87a16b9

Browse files
oblomov-devoblomov-dev
authored
Update overview.md
1 parent 99069b2 commit 87a16b9

File tree

1 file changed

+52
-45
lines changed

1 file changed

+52
-45
lines changed

‎docs/advanced/technical/overview.md‎

Lines changed: 52 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,67 @@
1-
# Technology Comparison: abap2UI5, RAP, UI5 Freestyle, Web Dynpro, ITS Mobile
1+
# Technology Evolution: From ITS to abap2UI5
22

3-
This page compares **abap2UI5** with other common SAP UI technologies to help understand its architectural position and when to use it.
3+
This page explains how SAP UI technologies have evolved over the years — from classic Server-Side Rendering approaches like **ITS** and **Web Dynpro**, to client-side SPAs with **UI5 Freestyle** and **RAP**, and finally to the **Over-the-Wire** paradigm of **abap2UI5**.
44

5-
While many SAP applications rely on client-side Single Page Applications (SPAs) or traditional Server-Side Rendering (SSR), abap2UI5 follows a pragmatic **Over-the-Wire** approach. It bridges the gap between simplicity and flexibility by shifting UI control back to the ABAP backend — without sacrificing the power of UI5 on the frontend.
5+
## 1. ITS Mobile: Bringing SAP GUI to the Web (2000+)
6+
The **Internet Transaction Server (ITS)** was SAP’s first step to bring SAP GUI screens (Dynpro) to the web. ITS Mobile converts classical Dynpro screens into basic HTML pages.
67

7-
### abap2UI5: Over-the-Wire Approach for ABAP/UI5 (2023+)
8-
abap2UI5 applies the Over-the-Wire principle to SAP UI5 apps. The backend (ABAP) defines UI5 XML Views and ViewModels, which are sent to the browser. A generic, static UI5 app dynamically renders this content.
8+
- Pure **Server-Side Rendering (SSR)**: HTML is generated on the server for every interaction.
9+
- Optimized for simple mobile devices (e.g., warehouse scanners).
10+
- Focus on reusing existing Dynpro logic for web & mobile use cases.
11+
- Still used today for specific legacy scenarios.
912

10-
- Frontend stays generic & static
11-
- No custom JavaScript development needed
12-
- Perfect for CRUD-heavy business applications
13-
- Inspired by modern Over-the-Wire frameworks like Hotwire, Livewire
14-
- Addresses SAP's "Clean Core" approach by keeping custom code backend-driven
13+
## 2. Web Dynpro ABAP: Structured Web Applications (2003+)
14+
**Web Dynpro ABAP** introduced a component-based UI framework for web applications.
1515

16-
### RAP / Fiori Elements: Backend-driven SPA (2019+)
17-
The **RESTful Application Programming Model (RAP)** standardizes how SAP applications expose data and services via OData V4. **Fiori Elements** apps use these services to render UIs client-side in the browser.
16+
- UI definitions are created in ABAP (Views, Context, Controllers).
17+
- Still **Server-Side Rendering**: UI is built on the server, rendered as HTML in the browser.
18+
- Suitable for transactional business applications.
19+
- More structured and modular than ITS, but limited for modern UX expectations.
1820

19-
- Developers define CDS Annotations in ABAP
20-
- UI is built dynamically by the UI5 Fiori Elements runtime (SPA)
21-
- Suitable for standard apps with CRUD patterns
22-
- Reduces custom UI development, but still SPA complexity (OData Metadata handling, UI5 runtime)
21+
## 3. UI5 Freestyle: Full Client-Side SPAs (2010+)
22+
With the advent of smartphones and richer web experiences, **UI5 Freestyle** was introduced.
2323

24-
### UI5 Freestyle: Custom SPA (2010+)
25-
UI5 Freestyle apps offer full control over the frontend. Developers build custom UI5 applications using JavaScript, XML Views, and UI5 Controls.
24+
- Based on **JavaScript, XML Views, and UI5 Controls**.
25+
- Follows a **Single Page Application (SPA)** architecture.
26+
- Full control over frontend behavior and look & feel.
27+
- Enables highly customized, interactive applications.
28+
- Requires dedicated frontend development expertise.
2629

27-
- Allows highly customized, interactive UIs
28-
- Full SPA architecture in the browser
29-
- Requires frontend expertise (JavaScript, UI5 skills)
30-
- More flexible, but also more complex in development & maintenance
30+
## 4. RAP / Fiori Elements: Standardized Backend-Driven SPA (2019+)
31+
The **RESTful Application Programming Model (RAP)** and **Fiori Elements** aim to standardize application development.
3132

32-
### Web Dynpro ABAP: Server-Side Rendering (2003+)
33-
Web Dynpro ABAP is SAP's traditional web UI framework. It renders HTML on the server and sends complete pages to the browser for each interaction.
33+
- Developers define **CDS Annotations** in ABAP to describe UI behavior.
34+
- The UI5 Fiori Elements runtime in the browser renders the app as a **SPA**.
35+
- Simplifies UI development by using predefined floorplans and templates.
36+
- Still SPA complexity (OData Metadata handling, UI5 runtime in browser).
3437

35-
- Component-based UI framework fully implemented in ABAP
36-
- Classic Server-Side Rendering paradigm (SSR)
37-
- Suitable for transactional SAP applications
38-
- Limited flexibility for modern UI patterns, but robust
38+
## 5. abap2UI5: Over-the-Wire for SAP (2023+)
39+
**abap2UI5** brings the simplicity of the **Over-the-Wire** concept to SAP UI5 development.
3940

40-
### ITS Mobile: Legacy SSR for Mobile Devices (2000+)
41-
**Internet Transaction Server (ITS) Mobile** converts classical SAP Dynpro (SAP GUI) screens into HTML pages for mobile browsers.
41+
- The ABAP backend defines **UI5 XML Views** and **JSON ViewModels**.
42+
- A static UI5 frontend dynamically renders these definitions.
43+
- No custom JavaScript development required.
44+
- Combines backend-driven development with UI5 flexibility.
45+
- Aligns with SAP's "Keep the Core Clean" strategy.
4246

43-
- Simplifies legacy app mobilization (e.g., warehouse scanners)
44-
- Pure server-side HTML rendering (SSR)
45-
- Very basic UI, optimized for keyboard-based navigation
46-
- Still relevant for niche use cases with rugged devices
47+
## Comparison Table
4748

49+
| Feature | ITS Mobile | Web Dynpro (ABAP) | UI5 Freestyle | RAP (Fiori Elements) | abap2UI5 |
50+
|----------|------------|------------------|---------------|---------------------|----------|
51+
| **Era** | 2000+ | 2003+ | 2010+ | 2019+ | 2023+ |
52+
| **UI Definition** | Dynpro Screens | ABAP Component Views | JavaScript + XML Views | CDS Annotations | ABAP Class (XML View & JSON ViewModel) |
53+
| **Data Flow** | Dynpro → HTML | Context Nodes | OData / Custom APIs | OData V4: Metadata & Data | View + ViewModel via JSON |
54+
| **UI Rendering** | Server-Side Rendering (SSR) | Server-Side Rendering (SSR) | Client-side SPA | Client-side SPA | Over-the-Wire |
55+
| **Frontend Code** | HTML generated by ITS | HTML/JS generated by ABAP runtime | Custom UI5 App (SPA) | UI5 Fiori Elements SPA Runtime | Static generic UI5 Shell |
56+
| **Developer Focus** | ABAP Dynpro | ABAP | ABAP + JavaScript | ABAP | ABAP only |
57+
| **Complexity (Frontend)** | Very Low | Low | High | Medium | Very Low |
58+
| **Typical Use Cases** | Mobile terminals, legacy apps | Transactional SAP apps | Custom, interactive dashboards | Standard CRUD apps with templates | CRUD-heavy apps, forms, dashboards |
4859

49-
### Comparison Table
60+
## Summary: Why abap2UI5?
5061

51-
| Feature | abap2UI5 | RAP (Fiori Elements) | UI5 Freestyle | Web Dynpro (ABAP) | ITS Mobile |
52-
|----------|----------|---------------------|---------------|------------------|------------|
53-
| **UI Definition** | ABAP Class (XML View & JSON ViewModel) | CDS Annotations | JavaScript + XML Views | Dynpro / Floorplan Components | Dynpro (SAP GUI Screens) |
54-
| **Data Flow** | View + ViewModel via JSON (Over-the-Wire) | OData V4: Metadata & Data | OData / Custom APIs | Server-side (Context Nodes) | Server-side (Dynpro → HTML) |
55-
| **UI Rendering** | UI5 Shell renders dynamic View from backend definitions | UI5 Fiori Elements renders UI in Browser (SPA) | UI5 Framework renders UI in Browser (SPA) | Server-side Rendering (SSR) | Server-side Rendering (SSR) |
56-
| **Frontend Code** | Static generic UI5 Shell | UI5 Fiori Elements SPA Runtime | Custom UI5 App (SPA) | Generated HTML/JS from ABAP runtime | Generated HTML from ITS Service |
57-
| **Developer Focus** | 100% ABAP (no JS needed) | 100% ABAP (no JS needed) | ABAP + JavaScript development | ABAP development | ABAP Dynpro development |
58-
| **Architecture** | Over-the-Wire | Backend-driven SPA | Custom SPA | Server-Side Rendering (SSR) | Server-Side Rendering (SSR) |
59-
| **Complexity (Frontend)** | Very Low | Medium (predefined SPA runtime) | High (full frontend stack) | Low (no client-side rendering logic) | Very Low (HTML rendering of GUI screens) |
60-
| **Typical Use Cases** | CRUD-heavy apps, forms, dashboards | Standard apps with CDS-based annotations | Custom UIs, interactive dashboards | Classic SAP transactional apps | Legacy mobile apps (scanner, warehouse) |
62+
- **ITS & Web Dynpro**: Full SSR, but limited UX flexibility.
63+
- **UI5 Freestyle**: Richer UIs, but introduce SPA complexity
64+
- **RAP**: Limited Felxibility, CDS and UI Annotations
65+
- **abap2UI5**: Bridges the gap — backend-driven like ITS/Web Dynpro, but with modern UI5 rendering & Over-the-Wire efficiency.
66+
67+
For typical business applications (forms, tables, dashboards), abap2UI5 offers a pragmatic and maintainable alternative to SPA-heavy approaches — fully in line with SAP UI5 and clean core principles.

0 commit comments

Comments
 (0)