SAPUI5 walkthrough step 2 - bootstrap, dive in - how does attachInit work?

[Former Member]

Welcome to my SAPUI5 Walkthrough, And Dive In blog series, where I’ll not only walkthrough the tutorial, but dive in, to explore the magic behind SAPUI5. Buckle up and sit tight, it's gonna be a bumpy ride as I’m no expert in any way shape or form, just a humble learner who loves coding and likes to get to the bottom of things =。=

Let’s kick off our journey with Step 2: Bootstrapof the walkthrough tutorial.

Let's take a closer look at the process of loading and initializing SAPUI5 (aka bootstrapping) via debugging to find out how does the function we passed in to attachInit method get executed by the SAPUI5 framework.

Alright, we'll go straight to the implementation of the attachInit method.

It is defined in sap-ui-core.js which we included in our index.html page, when it's called, it pushes our function into the array this.aInitListeners.

And the this._executeInitListeners() method is where our function is actually being called, it loops through all the functions in the this.aInitListeners array, then have them to be called.

And how’s the this._executeInitListeners method called? Here’s my findings after debugging:

As you can see in the screenshot below, we create a new instance of the Core.

In the constructor method of the Core, these methods will be called:

that.handleLoad() // called upon document ready

↓

this.init()

↓

this._executeInitListeners() // where our function is actually being called as I mentioned above

And how’s new Core().getInterface() called? That’s where things get really interesting, to answer this question, we’ll be able to take a peek at how SAPUI5 define it’s module, journey continues...

During the sap-ui-core.js loading process, we focus on two methods that will be called:

sap.ui.predefine(sModuleName, aDependencies, vFactory, bExport)

//...

jQuery.sap.require(sModuleName).

We first predefine the 'sap/ui/core/Core' module:

sap.ui.predefine('sap/ui/core/Core', aDependencies, vFactory, bExport) // registers core module to the global mModules, and sets module.state to PRELOADED

Since the factory function is a callback, we'll come back to it later, let's move on to jQuery.sap.require('sap.ui.core.Core'), that's where we'll be diving in (I extracted the essential method / function calls and listed them below companied with screen captures in chronological order to reveal the framework magic from a high-level)

jQuery.sap.require('sap.ui.core.Core') // ensures that the given module is loaded and executed before execution of the current script continues

↓

ui5ToRJS('sap.ui.core.Core') + '.js' // converts 'sap.ui.core.Core ' to requireJS module name syntax 'sap/ui/core/Core.js'

↓

requireModule('sap/ui/core/Core.js') // sets module.state to LOADED

↓

execModule('sap/ui/core/Core.js') // sets module.state to EXECUTING

↓

sap.ui.define.apply(sap.ui, module.data) // calls sap.ui.define with module.data as argument

↓

sap.ui.define('sap/ui/core/Core’, aDependencies, vFactory, bExport) // defines a Javascript module with its name, its dependencies and a module value or factory.

↓

requireAll('sap/ui/core/', aDependencies, callback) // resolves dependencies

↓

Now, we got finally took back to the factory function with all the dependencies in place, and by the end of it, the core instance will be created, and with its interfaces returned as the Core module content, the end :smile: