Skip to Content

In every UI5 application we declare usage on libraries like sap.ui.commons via “data-sap-ui-libs”.

Have you ever thought about how does the logic work? Since we only declare the NAME of libraries here, how, when, and where are these libraries loaded from repository when your UI5 application is launched?

/wp-content/uploads/2014/08/clipboard1_514102.png

Requirement

One colleague asked me how this works under the hood. He would like to know how to explore it by himself.

First attempt in Chrome

I have launched my UI5 application, I could already see the resource files for the corresponding above four declared libraries under the folder “resources”.

/wp-content/uploads/2014/08/clipboard2_514121.png

and observe from Network tab, our application html page is always loaded from repository first, and then the sap-ui-core.js, followed by all the other libraries.

/wp-content/uploads/2014/08/clipboard3_514123.png

I would assume it is sap-ui-core.js which issues the subsequent call to load the declared libraries from repository.

The proof is, I could find totally 27 AJAX calls in this big file ( 18697 lines ).

/wp-content/uploads/2014/08/clipboard4_514124.png

The question is: how to find the place to issue library load calls in an efficient way?

Approach1: use XHR breakpoint ( as usual )

Enable XHR Breakpoint, and type your application url in Chrome and press enter key. The breakpoint will be triggered for loading ui core library. Click callstack “jQuery.sap.preloadModules”.

/wp-content/uploads/2014/08/clipboard5_514125.png

type “m” in Watch Expressions tab, and then you can see the url for “library-preload.json”. This AJAX call generates the very entry in Network tab in the third screenshot of this document.

/wp-content/uploads/2014/08/clipboard6_514126.png

Press F8 for several times and then we reach this callstack. Click k._boot:

/wp-content/uploads/2014/08/clipboard7_514127.png

From here I could know these five libraries will be loaded via AJAX.

/wp-content/uploads/2014/08/clipboard8_514128.png

These five libraries will be loaded one by one in a for loop. And currently the third loop is working on sap.viz.library.

/wp-content/uploads/2014/08/clipboard9_514129.png

And for this library, if your browser support SVG, it will lead to the repository call for the following files:

/wp-content/uploads/2014/08/clipboard10_514130.png

And again you would see the url of each file in AJAX call, and know that the AJAX is actually done in a synchronous way.

/wp-content/uploads/2014/08/clipboard11_514131.png

So finally I could see the following files are fetched from repository, which are corresponded to the jQuery.sap.require method call in the previous screenshot ( line 93 ~ line 105 )

/wp-content/uploads/2014/08/clipboard12_514132.png

Approach2: A far more efficient way

If you have known that sap-ui-core.js uses the same code to fetch your application js code and sap UI standard library, you could find the place of this call in a more efficient way.

Deliberately generates a syntax error in your application view and launch the application.

/wp-content/uploads/2014/08/clipboard13_514134.png

And Chrome will point out the erroneous code position. Just click the hyperlink:

/wp-content/uploads/2014/08/clipboard14_514135.png

Then it will automatically navigate you to the line of error code. And click the pretty print button:

/wp-content/uploads/2014/08/clipboard15_514139.png

After pretty print format, you will see the line of code which raises the syntax error ( line 8136 ). And in line 8114, the AJAX call is just what we have found via approach1.

/wp-content/uploads/2014/08/clipboard16_514141.png

Although this document contains no actual development skills for UI5, it tries to demonstrate how to explore the fundamental of UI5 via Chrome by yourself. Hope it would be useful for your daily troubleshooting when developing UI5 applications.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply