SAPUI5/OpenUI5 performance

[tamasszirtes]

SAPUI5/OpenUI5 is a great technology for creating good looking, responsive web applications. There is a huge number of controls available, so really beautiful applications can be composed. The total user experience, on the other hand, is not just the look & feel. Now I will focus on a very important aspect of user experience: performance.

Performance has, of course, many aspects. Is the back end processing fast enough? Can you maybe optimize the logic? Sometimes complete seconds can be saved by such improvements. Is the right amount of data exposed by Gateway, in other words, is your OData not too extensive? When in the application work flow do you request data from the back end? Do you use OData or json models? Network, connectivity and such infrastructure aspects also play a role.

With SAPUI5/OpenUI5 web applications are created. For a mobile experience I really like the approach of creating hybrid apps. For example by SAP Mobile Platform via Kapsel. Creating hybrid apps based on the web application has many benefits, but some companies just would like to keep the applications as responsive web.

I am not talking about simple applications with one or two screens, few OData calls, that’s it. Performance is becoming a topic for larger applications, e.g. with dozens of views. Each view has a controller, plus the additional files (internalization, component.js, css, mimes, util files, at least one html file), so we end up with dozens, maybe even 100+ files. These files have to “travel” from the server to the browser when the application is loaded. With fast internet connection, with fast devices, it can be still acceptable, but once you try it on a less powerful mobile device with bad internet connection, the experience is terrible.

There is a huge opportunity to improve performance regarding the dozens of files. Two things can be done: reduce the number of them, reduce the size of them.

matthias.osswald (SAP) has just published a blog titled “Optimizing OpenUI5/SAPUI5 Apps”, which explains the solution in detail. It is based on grunt, so basically once the development of the application has finished, a grunt script can be executed (after proper configuration) and it will compress the files and combine the js file and views into one file. For large applications several seconds of load time can be saved with this approach. Give it a try, I was very pleased with the result.