on 12-18-2013 6:22 AM
Hi,
Can anyone tell me the best way to provide a mobile splash screen in SAPUI5?
I have developed a demo Fiori style app and it works nicely on phone, tablet and desktop, but over 3G it is very very slow to load (initial load > 2.5MB it takes up to 60s). What I would like is for it to be much faster, but I am aware of the issues with that as pointed out in his and from the great comments by Andreas Kunz and others. So as an interim measure I would like to at least show the user a "Loading..." screen so they can see something is happening and may be more patient (one can only hope). Currently it looks like the app is hanging or has crashed and users tend to give up.
Can anyone point me in the right direction?
Thanks,
Simon
Hi Simon,
what about to preload a simple page with spinner.
And load UI5 asynchron after that.
I want to write a blog post for that.
But you can see an example on http://ui5.anikeev.eu
First only spinner is shown.
Then OpenUI5 is loaded asynchron.
Regards
Konstantin
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Simon,
well, first of all, it should not be required to load > 2.5 MB. Is gzip enabled for all relevant file types on your server? The POA app (https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/poa/index.html#) comes in at 764 kB (which is still too much, I know) and a third of this is the huge icon font, but this app should have about everything yours has.
Still, loading can be slow and indeed it makes sense to display a loading screen NOT using UI5 when it is supposed to bridge the time while UI5 is loading.
One option is to add some plain HTML and CSS to the page, displaying an image or animation. Inline image in CSS, or even better in index.html, or a CSS animation would be preferred to avoid extra requests.
However, the browser only starts rendering the <body> once it is done processing the <head>. So if you load UI5 normally in the head, it could be that still everything is loaded synchronously before the browser goes on parsing the body and finally displaying something.
The solution for this is the async preload mode, see https://openui5.hana.ondemand.com/docs/guide/Bootstrap.html
In this mode UI5 (well, at least the libraries) is loaded asynchronously, so the browser can continue parsing the document without waiting for UI5 to load and init. This will help you to see something much faster. The one thing you have to do in this mode: you cannot use UI5 right away in the head, obviously, but you have to register for the Core's "init" event:
sap.ui.getCore().attachInit(function() {
// now your app can start using UI5
});
One could continue to optimize on top of this, e.g. also load the UI5 core asynchronously, but maybe the above already helps.
Regards
Andreas
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Andreas,
Thanks for your reply. Firstly regarding GZIP, I will need to look in to that, so I should be able to get the size down to ~750KB also. I assume that is easy to do on Tomcat (my local server) but not sure how/if I can do that when I deploy it to the Hana Cloud Platform (would you have any ideas?).
UPDATE: If anyone is interested you can find how to configure GZIP for your HCP app here:
Thanks for pointing out the async preload mode for the bootstrap - I will try it out too . Between yourself and Konstantin I think I have a workable solution. Thanks to you both!
BRgds,
Simon
Hi Prabaharan,
two things...:
1.) This example app is not fully optimized. It does not use async library loading and most important for high-latency connections: it does not bundle the needed modules in one file to reduce requests. This may be one reason for the slowness you experience.
The latency displayed for the single files in your screenshot is 200-700 milliseconds, even more than one second for the file cut at the top. Summing up these latencies explains most of the delay you measure, so an app bundled into only few files should be much faster.
2.) The displayed 2.4 MB confuse me a bit... the szes of the files visible in the network log look pretty much like the sizes I see, but even with newly deleted cache and all files being loaded from the server, Chrome shows "763 KB transferred" for me. Can you scroll up in the log to the second loaded file, "sap-ui-core.js"? It should say "114 KB" in black (that's the compressed, actual transferred size) and "395 KB" in grey (that's the uncompressed size).
When you sum up the black sizes, they should amount to 700-800 KB.
Regards
Andreas
Andeas,
Thanks for your valuable inputs...
1. Currently the POA app has 36 requests. Yes valid reason for delay as you mentioned.
Can you give some tips to bundle the app with few files with a small example?
2. Also in Chrome for "sap-ui-core.js" file for me the Actual transferrred is "396 KB" and uncompressed size is "395 KB". Attached is the chrome version.
Thanks
Prabaharan
Andreas,
Could you please suggest and example that runs in "Async mode" and many files bundled in a single request? Why i am asking you this is , many developers will know the solution to minimize the runtime of UI5 apps. Also currently we are experimenting the pro's and con's of SAPUI5 vs Jquery. Apart from this runtime performance SAPUI is excellent with rich set of controls and dynamic nature to adapt various screens..
Thanks
Prabaharan
Hi Andreas,
I am using data-sap-ui-preload="async" at the start of the application. It works fine. Then I found out setting URL parameter with ?sap-ui-debug=true
no longer works. In the console, I saw below message:
2014-10-02 18:03:57 Device API logging initialized - DEVICE
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. sap-ui-core.js:80
I tried version 1.22.4, 1.23.0, 1.24.1 even, 1.25.0-SNAPSHOT.
Thank you very much!
Best Regards,
Siyu
Hi Simon,
you can have look at demo example at sap.m Explored
I recreated it at http://jsbin.com/EYohuwa/6/edit
Regards,
Chandra
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
HI Chandra,
Thanks for this, however I don't really think it is what I am after exactly since it is still required to download the majority of the SAPUI5 JavaScript files (nearly 2.4MB in this case) before I can use the Busy Indicator... what I really need is something that will tell the user that something is happening before while all that JavaScript is being downloaded. Perhaps I can place something non-SAPUI5 in the index page before the SAPUI5 bootstrap...
Thanks,
Simon
User | Count |
---|---|
93 | |
11 | |
10 | |
9 | |
9 | |
7 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.