Skip to main content

Module 32: Migration & Modernization

Modernizing SAPUI5 applications is essential to:

  • Improve performance
  • Ensure upgrade safety
  • Align with SAP Fiori standards
  • Prepare for RAP and future UI5 versions

This module explains how to move from classic UI5 patterns to modern, recommended practices.

1. Classic SAPUI5 vs Modern UI5​

What is “Classic” UI5?​

Classic UI5 typically includes:

  • JS views
  • index.html heavy logic
  • Hardcoded routing
  • Direct DOM manipulation
  • Older UI5 versions

Modern UI5 Characteristics​

AreaClassicModern
ViewsJS / HTMLXML
RoutingCustommanifest.json
ArchitectureComponent-basedComponent-based
UXCustomFiori-compliant
SAP Direction

Modern UI5 aligns with Fiori, RAP, and S/4HANA.

2. XML Views over JS Views (Critical Migration)​

Why XML Views?​

XML views provide:

  • Declarative UI
  • Better readability
  • Tooling support
  • Performance benefits

JS View (Legacy)​

sap.ui.jsview("app.view.Main", {
  createContent: function () {
    return new sap.m.Text({ text: "Hello" });
  }
});

XML View (Modern)

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <Text text="Hello" />
</mvc:View>
Migration Rule

Prefer XML views for all new and migrated screens.

3. Old Routing → manifest.json Routing​

Legacy Routing (Controller-Based)​

this.getRouter().addRoute({
  pattern: "detail/{id}",
  name: "detail"
});

Modern Routing (manifest.json)

"routing": {
  "config": {
    "routerClass": "sap.m.routing.Router",
    "viewType": "XML",
    "async": true
  },
  "routes": [
    {
      "pattern": "detail/{id}",
      "name": "detail",
      "target": "detail"
    }
  ]
}
Modern Advantage

Manifest-based routing is declarative, centralized, and async-ready.

4. UI5 Version Upgrades​

Why Upgrade UI5 Versions?​

  • Security patches
  • Performance improvements
  • New controls & APIs
  • Deprecated API removal

Upgrade Strategy​

Follow These
  • Check SAP UI5 Compatibility Guide
  • Run UI5 Support Assistant
  • Fix deprecated APIs
  • Upgrade incrementally

Avoid Big-Bang Upgrades​

Risk

Large version jumps cause:

  • Broken controls
  • Layout issues
  • Unexpected behavior

5. Fiori Compliance​

What is Fiori Compliance?​

Fiori compliance ensures:

  • Consistent UX
  • Accessibility
  • Responsiveness
  • SAP design alignment

Fiori Compliance Checklist​

Follow These
  • Use sap.m controls
  • Follow Fiori floorplans
  • Use standard navigation patterns
  • Respect spacing & typography

Common Non-Compliant Patterns​

Avoid These
  • Custom CSS overriding SAP styles
  • Pixel-perfect positioning
  • Desktop-only layouts
  • Non-standard dialogs

6. Migration to Fiori Elements (Optional but Strategic)​

When to Migrate​

  • Standard CRUD apps
  • Reporting apps
  • S/4HANA systems

Benefits​

  • Reduced UI code
  • Built-in Fiori compliance
  • RAP compatibility
SAP Strategy

Migrate where possible, not everywhere.

7. Modernization Roadmap (Real Project)​

Legacy UI5 App
   ↓
XML Views
   ↓
Manifest Routing
   ↓
Component-Based Architecture
   ↓
UI5 Version Upgrade
   ↓
Fiori Compliance

8. Common Migration Pitfalls​

Avoid These
  • Mixing old and new patterns
  • Ignoring deprecated warnings
  • Over-customizing UI
  • Skipping UX validation

9. Interview-Grade Explanation​

Q: How do you modernize legacy SAPUI5 applications?

Answer:

I modernize UI5 apps by migrating to XML views, moving routing to manifest.json, upgrading UI5 versions incrementally, removing deprecated APIs, aligning with Fiori design principles, and migrating suitable apps to Fiori Elements where possible.

10. Summary​

  • Modern UI5 follows Fiori standards
  • XML views replace JS views
  • Manifest-based routing is mandatory
  • UI5 upgrades must be incremental
  • Fiori compliance improves UX and longevity
  • Modernization prepares apps for RAP