Asynchronous load of SAPUI5
Inspired by following blogs/posts:
With a SAPUI5 mobile working via 3G you may need to wait up to a couple of seconds, before you get a first screen of the app. The reason is, that SAPUI5 is relative heavy library and need to load some megabytes of data to start working.
If you check the most of sapui5 examples – you’ll see something like
This code will be processed by your browser as followed.
SAPUI5 content consists of 2 libraries: sap.ui.commons and sap.m. That’s why library-preload.json, library.css and library-parameters.json loaded 2 times.
In the browser it looks like
Blue vertical line at almost 2 seconds mean the user will first see some content after loading about 500KB and 2 seconds awaiting (even more on mobile device with 3G).
The idea to show the loading screen as soon as possible to the user, and load SAPUI5 stuff after that. If user have to wait a couple of seconds before start to work – you may want to show some kind of a loading progress. For example, first show a spinner and then a content.
I desided to move all js code into a separate file application.js and include a spinner js code from github.
App logic should look as following
First page load time should reduce from 2+ seconds to 100-200 milliseconds. Initial load size from 500 KB should reduce to about 5 KB.
So, the new index.html consists of 3 js scripts: spinner, application.js and call of initialization.
And now the magic begins. There is no loading of SAPUI5 here.
Let’s check the code of application.js.
So, whole file is a definition of the js object, which has following methods
load – to call from index.html
loadSAPUI5 – to include SAPUI5 into document and load if asynchronously
onSAPUI5Loaded – to hide a spinner and show the app
initializeUI5 – to create SAPUI5 user interface (consists of the code from previous version of index.html).
Logic look like
LoadSAPUI5 is called asynchronously from oApplication.load via setTimeout() function. If you test your app in browser – you’ll get following.
at the bottom of page you can see, that DOMContentLoaded is in 21 ms (it’s due to local test) with 3 files. Let’s upload it to the hosting and make a fair test.
So, before show the application is just 5kb size and 146ms time.
In comparison with the first test:
P.S.: This idea helps to speedup only a first application response. SAPUI5 libraries have to be loaded in any case. Synchron or asynchron – it’s your choice.
P.P.S.: English language is not my native language, and any person is not insured from mistakes and typing errors. If you have found an error in the text, please let me know – I’ll correct the post.
P.P.P.S.: If you have some ideas, how to correct/improve this post – please don’t hesitate to leave a comment.