18. Optimization

18. Optimization

Optimizing SAPUI5 applications is an important step to improve performance, responsiveness, and user experience. Below are the main best practices with examples of how to implement them in practice.

1. Lazy Loading and Split-Application

When:
Your app is large, with many pages, controllers, libraries.

How to set up:

  • Lazy loading controllers/fragments: 
    sap.ui.require(["my/app/controller/HeavyController"], function(HeavyController) {
  // Use the controller only when really needed
});
  • Lazy loading fragments: 
    if (!this._oDialog) {
  Fragment.load({
    name: "my.app.view.fragments.MyDialog",
    controller: this
  }).then(function(oDialog){
    this._oDialog = oDialog;
    this.getView().addDependent(oDialog);
    oDialog.open();
  }.bind(this));
} else {
  this._oDialog.open();
}
  • Split-Application (Component-preload.js):
    In manifest.json: 
    "sap.ui5": {
  "async": true,
  "resources": {
    "js": [
      {
        "uri": "Component-preload.js"
      }
    ]
  }
}
    Use ui5 build to generate preload files.

2. Minimizing the number of requests

When:
Many server requests, especially during app initialization.

How to set up:

  • Batch requests: 
    var oModel = new sap.ui.model.odata.v2.ODataModel("/odata/service/", {
  useBatch: true
});
  • Data caching: 
    var oModel = new sap.ui.model.odata.v2.ODataModel("/odata/service/", {
  defaultCountMode: "Inline",
  refreshAfterChange: false
});
  • Local storage: 
    localStorage.setItem("userData", JSON.stringify(data));
// When needed:
var data = JSON.parse(localStorage.getItem("userData"));

3. Effective use of Data Binding

When:
Large data volumes, complex tables, lists.

How to set up:

  • One-way binding: 
    <Text text="{/someProperty}" />
    In the controller: 
    this.getView().bindElement({
  path: "/someEntity",
  mode: "OneWay"
});
  • Server-side filtering and sorting: 
    var oFilter = new Filter("Status", FilterOperator.EQ, "Active");
oTable.getBinding("items").filter([oFilter]);
  • Aggregation binding with pagination: 
    <Table
  growing="true"
  growingThreshold="20"
  items="{/Products}">
  <!-- ... -->
</Table>

4. Working with resources

When:
Many JS/CSS files, heavy images.

How to set up:

  • Minification and bundling:
    In the project root: 
    ui5 build --all
    This will create minified and bundled files.
  • Image optimization:
    Use online services or tools like ImageOptim for compression.
  • Remove unused libraries:
    In manifest.json: 
    "sap.ui5": {
  "dependencies": {
    "libs": {
      "sap.m": {},
      "sap.ui.core": {}
      // Remove unnecessary libraries
    }
  }
}

5. UI and rendering

When:
Slow rendering, complex layout structures.

How to set up:

  • Reduce the number of controls:
    Use simple layout containers (VBox, HBox) instead of nested Grid, FlexBox unless necessary.
  • List virtualization: 
    <List
  growing="true"
  growingScrollToLoad="true"
  items="{/LargeCollection}">
  <!-- ... -->
</List>
  • Custom controls:
    Use standard controls; custom ones only if there is no standard solution.

6. Asynchronicity

When:
Long data loading, UI blocking.

How to set up:

  • Asynchronous component loading:
    In manifest.json: 
    "sap.ui5": {
  "async": true
}
  • Promises and async/await: 
    async function loadData() {
  const data = await fetch("/odata/service/EntitySet");
  // process data
}

7. Monitoring and profiling

When:
Need to analyze performance, find bottlenecks.

How to set up:

  • Support Assistant:
    Enable with Ctrl+Shift+Alt+S in the browser.
  • UI5 Inspector:
    Install the extension for Chrome/Edge.
  • Logging: 
    jQuery.sap.log.info("Data loaded in " + time + " ms");

8. Working with i18n

When:
Many languages, large translation files.

How to set up:

  • Lazy loading translations:
    Use asynchronous resource loading: 
    sap.ui.getCore().getLibraryResourceBundle("my.app", true).then(function(oBundle){
  // use oBundle.getText(...)
});
  • Minimize strings:
    Use keys, don’t duplicate values in i18n.properties.

9. Best Practices for mobile devices

When:
The app is used on smartphones/tablets.

How to set up:

  • Touch optimization:
    Use controls from the sap.m library, adaptive layouts (ResponsiveGridLayout).
  • Lazy loading for images and data:
    Don’t load large images immediately, use growing for lists.

10. Regular audit

When:
Before release, when making project changes.

How to set up:

  • Linters:
    Set up ESLint: 
    npm install eslint --save-dev
npx eslint yourfile.js
  • Performance analyzers:
    Use Chrome DevTools, Performance tab.
  • Dependency updates: 
    npm outdated
npm update

Conclusion:
Optimization is not a one-time task, but a continuous process. Follow best practices, use analysis tools, and don’t forget about user experience. A fast and responsive app is the key to your SAPUI5 project’s success!

See also