Skip to main content

Module 20: Component Reuse & Libraries

As SAPUI5 applications grow, reuse becomes critical.
Reusable components and libraries help you:

  • Reduce duplication
  • Improve consistency
  • Scale large enterprise landscapes
  • Improve performance with lazy loading

This module explains how reuse is done correctly in SAPUI5.

1. Reusable Components​

What is a UI5 Component?​

A UI5 component is a self-contained, reusable application unit with:

  • Its own Component.js
  • manifest.json
  • Views, controllers, models
Key Concept

A component is a mini application.

When to Create a Reusable Component​

Create reusable components for:

  • Common dialogs
  • Value help
  • Reusable dashboards
  • Cross-app widgets
Rule of Thumb

If logic + UI is reused across apps → component.

Basic Component Structure​

my.reuse.component/
 ├─ Component.js
 ├─ manifest.json
 ├─ view/
 ├─ controller/
 └─ model/

2. Component Containers​

What is ComponentContainer?​

sap.ui.core.ComponentContainer is used to:

  • Embed one component inside another
  • Load components dynamically

Example: Using ComponentContainer​

<core:ComponentContainer
  name="my.reuse.component"
  xmlns:core="sap.ui.core" />

Dynamic Component Loading​

sap.ui.component({
  name: "my.reuse.component"
}).then(function (oComponent) {
  // Use component instance
});
Best Practice

Use ComponentContainer for decoupled reuse, not fragments.

3. Custom UI5 Libraries​

What is a UI5 Library?​

A UI5 library is a collection of:

  • Custom controls
  • Utility classes
  • Reusable logic

Libraries are framework-level reuse, not app-level.

When to Use a Library vs Component​

Use CaseComponentLibrary
UI + Logic✅❌
Custom Controls❌✅
Cross-App Utils❌✅
Standalone App✅❌
Design Guideline

Libraries provide building blocks, components provide features.

Typical Library Structure​

my.custom.library/
 ├─ src/
 │  ├─ control/
 │  ├─ util/
 │  └─ library.js
 └─ manifest.json

4. Lazy Loading (Very Important)​

Why Lazy Loading?​

Lazy loading:

  • Improves initial load time
  • Reduces memory usage
  • Improves perceived performance

Lazy Loading Components​

this.getOwnerComponent().getRouter().navTo("lazyView");

UI5 loads:

  • View
  • Controller
  • Dependencies

only when needed.

Built-in Benefit

UI5 routing supports lazy loading by default.

Lazy Loading Libraries​

Libraries are loaded on demand based on usage.

Best Practice

Do not preload heavy libraries unnecessarily.

5. Dependency Management​

Dependency Declaration (manifest.json)​

"sap.ui5": {
  "dependencies": {
    "libs": {
      "sap.m": {},
      "sap.ui.core": {}
    },
    "components": {
      "my.reuse.component": {}
    }
  }
}

Why Explicit Dependencies Matter​

  • Predictable loading
  • Faster startup
  • Avoid runtime errors
SAP Rule

Declare all dependencies explicitly.

6. Versioning & Reuse Strategy​

Follow These
  • Version reusable components
  • Keep backward compatibility
  • Avoid breaking changes
  • Document APIs

Real Enterprise Pattern​

Shared UI Library
   ↓
Reusable Components
   ↓
Business Applications

7. Performance Considerations​

Reuse vs Performance​

AspectImpact
Too many componentsSlower load
Proper lazy loadingFaster load
Shared librariesSmaller bundles

Performance Best Practices​

Follow These
  • Keep components small
  • Lazy load heavy components
  • Avoid circular dependencies
  • Share common libraries

8. Common Mistakes​

Avoid These
  • Using fragments where components are needed
  • Overloading one component
  • Tight coupling between apps
  • Missing dependency declarations

9. Interview-Grade Explanation​

Q: How do you implement reuse in SAPUI5?

Answer:

I use reusable components for feature-level reuse and custom UI5 libraries for shared controls and utilities. Components are embedded using ComponentContainer and loaded lazily to optimize performance, with dependencies declared explicitly in manifest.json.

10. Summary​

  • Components enable feature reuse
  • ComponentContainer embeds components
  • Libraries enable framework-level reuse
  • Lazy loading improves performance
  • Dependency management is critical
  • Reuse improves scalability

11. What’s Next?​

➡️ Module 21: Performance Optimization in SAPUI5

Learning Tip

Good reuse reduces code — great reuse improves architecture.