IBM Worklight Series – Part 1: Best Practices

IBM Worklight provides an open, comprehensive and advanced mobile application platform for smartphones and tablets, helping organizations of all sizes to efficiently develop, connect, run and manage HTML5, hybrid and native applications.

Worklight Supports the following frameworks for developing HTML5 and Mobile Applications

• DOJO
• Sencha Touch
• JQuery

Out of the above frameworks DOJO is widely used by IBM in their Portal and BPM suite of products and signifies IBM’s choice when it comes to RIA Frameworks.

In this 3 part series, we talk about Best Practices for developing Worklight based HTML5 and Mobile Applications in general. Note that some of them specific to DOJO Framework. However, parallels can be drawn and similar practices could be employed for Sencha and JQuery frameworks as well.

In the initial part, we focus on the folder structure, logging device information and splash screen.

1) Folder Structure:
Following is the recommended folder structure for Worklight Application (common folder)

Creating controllers and widgets folder under js folder helps in better organization of JavaScript assets as opposed to a single folder. Having a folder for html assets provides a clean structure and avoids them residing directly at root level.

When a Worklight built HTML5 Website or Mobile Application loads, InitPage.html or rather defined under application-descriptor.xml is invoked. A JavaScript file with same name InitPage.js contains necessary scripting information for the framework. Interactions between various components are shown below for better understanding. We will be discussing more on Web Framework in next couple of installments.

For the purposes of this discussion we call the as InitPage.html and main JavaScript file as InitPage.js. Normally, these are named as per Application created i.e. An Application with name ‘HelloWorldApp’ would have HelloWorldApp.html and HelloWorldApp.js as main HTML and JavaScript files.

2) Logging Device Information:
It is always a good practice to log device specific information for troubleshooting/ audits given the vast number of platforms and devices available today. This could be accomplished by calling the simple function below from a dojo listener in InitPage.js

3) Splash Screen/Text:
Mobile Applications have an initial splash screen that is displayed when an Application is launched. Following that, the initial page (in this case InitPage.html) is loaded. While the page is loaded, it might take a few seconds for framework libraries and CSS to load and user may experience a noticeable blip. To prevent this from happening, it is always a best practice to show some text/image when InitPage.html gets called for first loaded (call it as secondary splash screen/text). This is accomplished as follows:

Add the following snippet to InitPage.html

Add the following snippet to InitPage.js and call the function from dojo listener after page is loaded

In the second part of the series, we will be looking at some core features like Offline Mode, State Manager and Navigation.

Laks Sundararajan is a Solution Architect with Prolifics and a key member of highly specialized team working on IBM WebSphere Portal, Content Management and Collaboration technologies. He has led the implementation of many global projects using IBM WebSphere Portal and has extensive background in design and development of enterprise portals. He specializes in providing Enterprise SOA solutions leveraging WebSphere Portal, Content Management, Tivoli and Mashup’s. He holds Masters in Information Technology from Carnegie Mellon University and a Graduate Degree in Engineering from BITS, Pilani.