CODEWITHSUNDEEP
javascriptperformancecordovasapui5
Alberto
Alberto

Reputation: 1489

SAPUI5 - Preload view before navigation. Performance Improvement

I am working on SAPUI5 version: 1.56.13, an Hybrid application with Cordova with only Android platform.

I would like to know if there is a way to preload a view (in background/async mode) while the user is doing other things like viewing other pages so when the user wants to navigate to that preloaded view, it would be much faster in terms of performance.

First time the user navigates to the view takes like 30 seconds to show up the view.

The second time it takes like 5 seconds to open it.

I tried while user is on another view:

  1. Instantiate the view at background. 
sap.ui.view({
    viewName: "myViewFolder.MyView",
    controller: sap.ui.controller("myControllerFolder.MyController"),
    type: sap.ui.core.mvc.ViewType.XML,
    async: true
}).loaded().then(function(oView) {
    // I save the reference on app context so use it later (now is there just for testing).
    appScope.__myView = oView;
});

  1. Call service to retrieve data for the views's model and setup the data for the model.

    getDataFromService(this, oData => { 
    let oModel = this.getOwnerComponent().getModel(Constants.MY_DATA_MODEL)
    oModel.setData(oData);
});

  2. Initialize the view at the attachInit method:

    new sap.ui.xmlview({viewName:"myViewFolder.MyView"}).placeAt("content");

  3. Navigate to the view:

    appScope.getRouter().navTo("MyView")

I see that only when I am on the step of navigation, the view starts rendering as the app logs this:

Log-dbg.js:414 2019-07-11 12:36:45.609300 During a clone operation, a template was found that neither was marked with 'templateShareable:true' nor 'templateShareable:false'. The framework won't destroy the template. This could cause errors (e.g. duplicate IDs) or memory leaks (The template is used in aggregation 'items' of object '__list4').For more information, see documentation under 'Aggregation Binding'. -

This indicates that the view is being rendered, as it has some lists inside lists with custom elements to generate the view according the model.

Briefing:

Upvotes: 1

Views: 1472

Answers (1)

Leon Ho
Leon Ho

Reputation: 101

I've used Cordova and Openui5 before, and i can get my inital load times to under 3 seconds and individual page loads to be near instant after the initial load.

Here's some things that I did that greatly improved my performance:

  1. Don't use the CDN but download the mobile runtime and serve it up from within Cordova. If it takes 30 seconds to load a page most likely 99% of that is network time downloading the files from the SAP CDN.

  2. Use the preload files. If you're application is downloading every single module before displaying the page then you're going to have huge network overhead. By default UI5 ships with library-preload files for the sap libraries. You'll know its working right when you look at the network tab and you see the application loading the library-preload.js files when you initially open up the application. To turn it on i think you just need to follow this: https://openui5.hana.ondemand.com/#/topic/676b636446c94eada183b1218a824717

  3. You can also build a preload file for your own source code using this: https://github.com/SAP/grunt-openui5 that puts all of your source code into a single file that will be loaded when you first open up your application. Its the difference between 250 HTTP requests during the life time of your application vs 1 HTTP request at the start of your application.

I think the biggest gains in performance can be found in order of the options I gave above. Easiest gains is to just change the loading point from the CDN to a local copy of UI5. You'll easily see your startup time drop from 30 seconds to 3 seconds and page views drop from 5 seconds to 1 second.

Best of luck!

Upvotes: 2

Related Questions