Asynchronous load of SAPUI5

[konstantin_anikeev]

Inspired by following blogs/posts:

Why I want my Fiori to run like a Ferrari

SAPUI5 Mobile Splash Screen

SAPUI5 Content Compression

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.

oApplication = { // Application is an object

  views: {}, // Application views

  load: function(src, id, libs, theme, callback) {

  var opts = {

  length: 12, // The length of each line

  width: 4, // The line thickness

  radius: 12, // The radius of the inner circle

  };

  var target = document.getElementById('content');

  this.spinner = new Spinner(opts).spin(target);

  setTimeout(this.loadSAPUI5(src, id, libs, theme, callback));

  },

  loadSAPUI5: function (src, id, libs, theme, callback)

  {

  var s,r,t;

  r = false;

  s = document.createElement('script');

  s.type = 'text/javascript';

  s.src = src;

  s.id = id;

  s.setAttribute("data-sap-ui-libs", libs);

  s.setAttribute("data-sap-ui-theme", theme);

  s.onload = s.onreadystatechange = function() {

      //console.log( this.readyState ); //uncomment this line to see which ready states are called.

  if ( !r && (!this.readyState || this.readyState == 'complete') ){

  r = true;

  callback();

  }

  };

  t = document.getElementsByTagName('script')[0];

  t.parentElement.insertBefore(s, t);

  },

  onSAPUI5Loaded: function(){

  oApplication.initializeUI5();

  $("body").fadeOut("slow",function(){

  $("#content").empty();

  $("#content").removeAttr('style');

  oApplication.app.placeAt("content");

  $(this).fadeIn("slow");

  });

  },

  initializeUI5: function(){

  var oApp = new sap.m.App( "mApp" );

  var oPage = new sap.m.Page({

  id : "mPage", // sap.ui.core.ID

  title : "Mobile page", // string

  showFooter : false, // boolean, since 1.13.1

  });

  var oContent = new sap.m.ObjectHeader({

  id : "mObjHeader", // sap.ui.core.ID

  title : "Title", // string

  number : "250", // string

  numberUnit : "EUR", // string

  markFavorite : true, // boolean, since 1.16.0

  markFlagged : true, // boolean, since 1.16.0

  showMarkers : true, // boolean, since 1.16.0

  attributes : [ new sap.m.ObjectAttribute({

  id : "mAttribute", // sap.ui.core.ID

  visible : true, // boolean

  text : "This is a test attribute of ObjectHeader", // string

  }) ], // sap.m.ObjectAttribute

  });

  oPage.addContent(oContent);

  oApp.addPage(oPage);

  this.app = oApp;

  }

}

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:

Example on jsbin.

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.