This is the first of 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 
This is pretty straight forward, but how exactly the function() { alert(“UI5 is ready") } got called by the SAPUI5 framework?
Let’s first take a look at 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()
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, let’s focus on two method calls, sap.ui.predefine('sap/ui/core/Core', aDependencies, vFactory, bExport) and jQuery.sap.require('sap.ui.core.Core’).
sap.ui.predefine('sap/ui/core/Core', aDependencies, vFactory, bExport) // registers core module to the global mModules, module.state = PRELOADED
|
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 = LOADED
|
execModule('sap/ui/core/Core.js') // sets module.state = 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
|
// we got finally took back to the factory function with all the dependencies in place, and by the end of it, the call instance will be created, and with its interfaces returned as the Core module content, the end
