Optimizing OpenUI5/SAPUI5 Apps

[matthias_osswald]

Large web applications usually consist of multiple files. Every single resource has to be fetched from the server which comes with overhead and latency.

During development this is usually not a problem. It also allows only reloading files that have been changed instead of bundling all files after only one line was changed.

However when running an app in production the performance is important for a great user experience. A bundling process does also not create too much overhead as it won't be done every minute.

There are some simple techniques to boost the loading performance of OpenUI5 applications which do not even require you to touch app code.

All this does of course also apply for SAPUI5 and can be used by SAP customers and partners to optimize apps locally and e.g. upload them to a SAP NetWeaver system.

What can be done?

Reducing HTTP requests

Reducing the number of requests to the server is often the most effective way to boost performance.

OpenUI5 has already a built-in concept called preload. Usually when a module gets required and wasn't loaded before, a XHR will be sent to load that specific file. The preload allows loading multiple modules bundled into a single file. This can currently be done on library or component level.

If a module gets required after the bundled preload file was loaded, it can be executed directly, because the module content is already available. This can speed up the initial loading process especially if there is a high latency (mobile network / long distance to server).

Reducing payload

The payload size can be reduced by removing white-space and line-breaks or even rename variables or remove/rewrite code. This can reduce the file size a lot which not only speeds up loading those files but also reduces the amount of traffic for you and your users (bandwidth can be very limited in mobile scenarios).

Example

Let's assume our app's component has the following files/folders:

• controller
  
  
  
  • BaseController.js
  
  
  • Detail.controller.js
  
  
  • LineItem.controller.js
  
  
  • ListSelector.js
  
  
  • Master.controller.js
  
  
  
  


• model
  
  
  
  • AppModel.js
  
  
  • Device.js
  
  
  • formatter.js
  
  
  • grouper.js
  
  
  
  


• view
  
  
  
  • App.view.xml
  
  
  • Detail.view.xml
  
  
  • LineItem.view.xml
  
  
  • Master.view.xml
  
  
  • NotFound.view.xml
  
  
  • ViewSettingsDialog.fragment.xml
  
  
  
  


• Component.js

In total

• 10 Javascript files


• 6 XML files

If we would just load the component, all files are loaded and this would end up into 16 requests, just for our component.

(As you can see, a "Component-preload.js" file will be loaded first, but currently it's not there and OpenUI5 will fall back to the "Component.js" file)



What if we could load all the files in 1 request and also reduce the overall file size?

Note: This does only include JavaScript files and views. Locale specific files (i18n) or custom CSS would create additional requests.

You can use the grunt-openui5 plugin for this. Grunt is a task-runner based on node.js. See here for more information and help about grunt in general.

openui5_preload task

This task can be configured to bundle and minimize all relevant files of your component.

For our example app, it could look like this:

grunt.initConfig({

    openui5_preload: {

        component: {

            options: {

                resources: {

                    cwd: 'webapp', // path to app root folder

                    src: [ // include/exclude patterns for files

                        '**/*.js', // in this example, we do only have js/xml files

                        '**/*.xml' // but this can be used to e.g. exclude language-specific files

                    ],

                    prefix: 'my/app' // namespace prefix (in case the namespace is not already in folder structure like sap/ui/core/**)

                },

                dest: 'dist' // destination for the Component-preload.js file

            },

            components: 'my/app' // specify which component(s) should be processed

        }

    }

});

When we now load the component, you can see that only the Component-preload.js will be loaded which contains all the modules of our app.

(All other files in the screenshot are part of OpenUI5 itself, not the app)

Further information

A detailed documentation of the grunt task can be found on GitHub:

SAP/grunt-openui5 · GitHub

There is also a very small sample app project that demonstrates the usage of bower & grunt with OpenUI5:

SAP/openui5-sample-app · GitHub

 

 

Best regards,

Matthias

 

Twitter: @matthiaso

GitHub: matz3