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