Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 


Asynchronous loading is one of the main drivers for improving the performance of your UI5 application. With asynchronous loading files are retrieved quickly in parallel.
Synchronous loading, on the other hand, fetches each file sequentially. This makes synchronous requests much slower and can even delay important tasks in the browser. The app will not respond to user interaction until the request is completed.

To avoid this, UI5 offers several areas where asynchronous behavior can be switched on and off.
The most prominent are of course setting data-sap-ui-preload="async" in the bootstrap of the index.html and adding "async: true" to the creation of a sap.ui.component or a sap.ui.core.ComponentContainer.

But these are not the only places where this feature can speed up your app's performance. Another very effective location for asynchronicity is the manifest.json, where you can enable asynchronous loading of views:

By adding "async": true to the rootView section of sap.ui5, you ensure that the root view is loaded asynchronously.
"sap.ui5": {
"rootView": {
"viewName": "sap.ui.demo.worklist.view.App",
"type": "XML",
"async": true,
"id": "app"
},
...

For all other views just add an "async" flag to the config section of routing in sap.ui5
"sap.ui5": {
...
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"async": true,
"viewType": "XML",
"viewPath": "sap.ui.demo.worklist.view",
...
},
...

In preparation for upcoming changes that are part of the UI5 Evolution process, we also recommend that you refactor your code:
Simply follow the new asynchronous module definition syntax to get rid of synchronous APIs.

This means that you should not use jQuery.sap.declare and jQuery.sap.require any longer, because they load and evaluate modules synchronously.

We recommend to use sap.ui.define or sap.ui.require instead, so that you don't have to rely on global namespaces or lazy library loading.

Here is a small example on how such a refactoring could look like:



Within the UI5 framework there are some functionalities where synchronous requests are used internally. For most of them you can already use asynchronous alternatives in shape of JavaScript Promises, or you can change the synchronous behavior as shown below.

Whenever you want to load something after instantiating the UI5 app, add the async flag and run the code in the then part of the Promise.

Example: The loading of an additional library
    sap.ui.getCore().loadLibrary("sap.m")

should be written as
    sap.ui.getCore().loadLibrary("sap.m", {
async: true
}).then(
...
);

Another example: The request of a resource bundle
    var oBundle = jQuery.sap.resources({ 
url: "mybundle.properties"
});

can be improved by
   jQuery.sap.resources({ 
url: "mybundle.properties",
async: true
}).then(function(oBundle) { ... });

At first it might look like lots of work to refactor existing code to asynchronous behavior. But it will be worth it! By transforming the modules you can make sure that you benefit from future enhancements of the UI5 evolution.

Previous Post: UI5ers Buzz #28

Have a great day,

Arnd








Arnd is an Expert Developer at SAP. He discovered the art of programming on pocket calculators, legacy home computers and game consoles. Today his focus is mainly on Web development technologies and UI5.


 

3 Comments