A Development Methodology for PhoneGap

The development methodology has three steps:
1. Build and test the app functionality
2. Build the screens as mockups with JavaScript/jQuery code for animation
3. Integrae the UX with the functionality UX development

Put your functionality code in Application.js, where all functions are defined as methods of an object(s). Separating it from the standard index.js. The main object is Application that has a method initApplication that does your functionality initialization. Have index.js call a initApplication in the body of onDeviceReady.

Build and test the functionality of the app including device capabilities such as location and camera, by placing buttons on the standard index.html. Put the callbacks for the buttons clicks in a mockup file, Mockup.js. Such a callback for button Camera, has the form:

$('#camera').click(function() {

});

The body of the callback has calls to the methods of Application. Most calls will use hard-wired parameters to simplify testing.

Later when the screens of the app are constructed, we will port the code from Mockup.js to the corresponding screens.

We use the EJS template engine to generate HTML for screens from array of data. This is best handled by having a common HTML generating function:

 function generateHTMLWithEJS(selector,ejsName,injectType, dataObj)
 // generate html with ejs
 // injectType - replace or append
 // replace/append html to elements selected by the selector
 {
     var domObj,template,html = '';
     domObj = $(selector);
     template = 'partials/' + ejsName;

     html = new EJS({url: template}).render(dataObj);

     if(injectType == 'replace'){
       domObj.html(html);
     }
     else if(injectType == 'append'){
       domObj.append(html);
     }
 }

To be called as generateHTMLWithEJS('.posts-list', 'list.ejs', 'replace', data)

The partial list.ejs is the EJS template, stored in a separate folder partials under www.

Because it is much easier to work with a desktop browser, such as Chrome, to develop screens, EJS creates a complication, as it will not load in a desktop because of the use of the url to set the partial.

A roundabout way is to run the app on a device for the first time and use console.log to get the generated HTML. The paste it in the screen HTML, and develop the screens from there. Get back the EJS code only when the screens look and feel is completed.

We construct screens using HTML and CSS (or Sass) without regard to functionality and behavior. As many screens may have dynamic parts such as popovers, hide/show, and filling of data using template engines, we need some JavaScript to fully construct the screens. For this we use a separate JavaScript file, Screens.js, that handles dynamic parts by hardwiring different conditions.

To modularize the file, we use the jQuery selector result length:

if ($('.news').length > 0){ // at news page


}

Once we move to constructing the individual screens, it is best to modularize the code, by having each screen functionality in a separate JavaScript file, e.g. Login.js for the Login screen (login.html). This file is included only in the relevant screen together with the common Application.js.