Skip to main content

Module 29: UI5 Design Patterns

Design patterns in SAPUI5 help create applications that are clean, scalable, testable, and maintainable.
Without patterns, UI5 apps quickly turn into hard-to-maintain monoliths.

This module focuses on practical UI5 design patterns used in real enterprise projects.

1. MVC Best Practices (UI5 Context)​

MVC in SAPUI5​

  • Model → Data & state
  • View → UI layout
  • Controller → Orchestration logic
Golden Rule

Controllers should coordinate, not compute.

MVC Best Practices​

Follow These
  • Keep controllers thin
  • Move logic to services/helpers
  • Use XML views
  • Avoid direct DOM manipulation

MVC Anti-Patterns​

Avoid These
  • Business logic in views
  • Heavy logic in controllers
  • Direct model manipulation everywhere

2. Component-Based Architecture​

Why Component-Based?​

Components enable:

  • Clear boundaries
  • Independent development
  • Reuse
  • Lazy loading

Typical Component Structure​

Component
 ├─ Routing
 ├─ Models
 ├─ Views
 └─ Services
UI5 Insight

A component is the root architectural unit.

Best Practices​

Follow These
  • One business domain per component
  • Avoid cross-component access
  • Communicate via events

3. Facade Pattern​

What is Facade Pattern?​

Facade provides:

  • Simplified interface
  • Encapsulation of complexity
  • Central access point

UI5 Facade Use Case​

// services/SalesOrderService.js
return {
  approveOrder: function (sId) {
    return oModel.callFunction("/ApproveOrder", {...});
  }
};

// Controller
SalesOrderService.approveOrder(sId);
Benefit

Controllers don’t know how backend works.

4. Service Layer Pattern​

Why Service Layer?​

Service layer:

  • Handles OData calls
  • Handles errors
  • Encapsulates backend logic

Service Layer Example​

getSalesOrders: function () {
  return new Promise(function (resolve, reject) {
    oModel.read("/SalesOrderSet", {
      success: resolve,
      error: reject
    });
  });
}
Architecture Rule

Controllers call services, not models directly.

5. Clean UI5 Principles​

Clean UI5 Guidelines​

Follow These
  • One responsibility per file
  • Meaningful naming
  • Avoid magic strings
  • Use constants
  • Centralize configuration

Error Handling Principle​

Handle errors once, centrally.

Clean Code

Error handling scattered across controllers is a smell.

6. Anti-Patterns to Avoid​

Avoid These
  • Fat controllers
  • Direct OData calls everywhere
  • Duplicate logic
  • Tight coupling between UI and backend

7. Pattern Interaction (Real-World View)​

View
 ↓
Controller
 ↓
Facade / Service
 ↓
OData / RAP Backend
Result

Loose coupling, high maintainability.

8. Interview-Grade Explanation​

Q: How do you keep SAPUI5 applications maintainable?

Answer:

I follow MVC best practices, keep controllers thin, use component-based architecture, introduce a service layer or facade to encapsulate backend communication, and apply clean UI5 principles to avoid tight coupling and duplication.

9. Summary​

  • MVC must be respected
  • Components define architecture
  • Facade simplifies complexity
  • Service layer centralizes backend calls
  • Clean UI5 improves maintainability
  • Patterns prevent technical debt

10. What’s Next?​

➡️ Module 30: UI5 Interview Preparation & Capstone Projects

Learning Tip

Good UI5 architecture is invisible — bad architecture is painful.