Start your large Rich UI application faster with Dynamic Loading
TonyChen 120000B5CJ Comment (1) Visits (9120)
An EGL Rich UI application is normally deployed into a single HTML and downloaded to user’s browser as a whole when the application starts. There are times you may want to download code only when it is being called to reduce the initial loading size and to speedup the starting of the application. The Dynamic Loading feature gives developers control of when to load application code. The initial version of Dynamic Loading has been available on the EGL Café for about 2 years and now an updated, enhanced version is formally included in RBD 220.127.116.11.
A typical RUI application that will benefit
from Dynamic Loading is one that has a main RUIHandler which navigates to multiple
functions each is provided as its own RUIHandler. The EGL Dojo Sample application
is a good example of such application. In this blog, I’ll walk you through the steps
to turn Dojo Sample into a Dynamic Loading application and see how the initial
loading size is improved.
A typical RUI application that will benefit from Dynamic Loading is one that has a main RUIHandler which navigates to multiple functions each is provided as its own RUIHandler. The EGL Dojo Sample application is a good example of such application. In this blog, I’ll walk you through the steps to turn Dojo Sample into a Dynamic Loading application and see how the initial loading size is improved.
A quick look at Dojo Sample
You can get the Dojo Sample from Help->Samples menu in RBD. Gallery.egl is the main handler which provides the screen layout, header, footer and left navigation. When a button in the left navigation is clicked, the corresponding sample will be launched in the content area in the middle.
Turn Dojo Sample into dynamic loading
The showSample() function is responsible to launch sample, it checks for the text of the button being clicked and decide which sample handler to be instantiate and put to the content area.
function showSample(e Event in)
First, instead of use key word “new” to instantiate the sample Handler, we will use Dyna
Each dynamic load is asynchronous. Next, you will write the listener function which responds to the load completion even and add the loaded handler instance into content area.
//The listener function
Register the listener function to DynamicLoader when the Gallery starts. The call to showDebugView() function is optional, debug view can display loading status which is helpful at development time.
With above changes to Gallery handler, the sample loads dynamically. Run the new sample application in Preview mode to see dynamic loading status in the debug view. To experience the performance gain, run the application in deployed mode.
Deploy the dynamic loaded Dojo Sample
In the EGL deployment descriptor, specify the handlers to load dynamically so that the code and necessary resources for these handlers are prepared for loading at runtime. Go to the Rich UI Deployment tab, select the new version of Gallery handler and click the Configure button in Dynamic loading setting section.
In the popup dialog, add the sample handlers which are going to be dynamically loaded to the list on the right and click finish to save the settings.
Now you are ready to deploy the dynamic Dojo Sample. After deployment, the HTML file size of the dynamic version is 367Kb which is nearly half of the static version which is 674Kb. If you consider the 280Kb runtime footprint for a RUIHandler, the improvement of initial load size is quite significant. The larger your application grows, the more benefit you’ll get from a dynamic loading infrastructure.
You find more details about the Dynamic Loading feature in the RBD 18.104.22.168 Information Center.