uMobile PhoneGap Architecture

Owned by Jen Bourey
Last updated: Mar 04, 2013 by Matthew Polizzotti (Deactivated)Version comment
3 min read

Summary

The current uMobile implementation uses Backbone.js and jQuery Mobile with a single HTML page. Application state and credentials are saved to HTML5 local storage using a custom Backbone sync implementation.

Directory Structure

Overview
umobile
  -config
   config.json		// Build settings & configurations.
  -src				// Application source code.
   -css				// CSS implementation.
   -data			// Test data (Sample JSON feeds).
   -images			// Images & icons.
   -js				// JavaScript Libraries & Backbone implementation.
   -modules			// Native module implementations.
   index.html		// uMobile markup implementation.
  -tasks			// Build plugins.
   targethtml.js
  -www				// Empty. Houses production code after a build.
  app.js			// Development server implementation (Node & Express).
  config.js			// Pulls in settings from config/config.json for use in the build.
  Gruntfile.js		// Build implementation (Similar to Apache Ant).
  package.json		// Describes necessary node dependencies.
  README.md
JavaScript Libraries & Backbone Implementation
// This is a close up view of the umobile/src/js/ directory.
 
js
  -lib						// Javascript Libraries.
  -src
   -collection
    ModuleCollection.js		// Backbone Collection. A collection of Module models.
   -model
    Credential.js			// Backbone Model. Login credentials.
    Module.js				// Backbone Model. Module data (i.e., fname, title, url, etc.).
    State.js				// Backbone Model. User authentication status.
   -service
    Authentication.js		// Service. Authentication implementation.
    SessionTracker.js		// Service. Session tracking implementation.
    SessionTrackerMock.js	// Service. Mocks the in-memory implementation of the SessionTracker.
    Storage.js				// Service. Storage implementation.
   -view
    App.js					// Backbone View. Main application view.
    Credential.js			// Backbone View. Login view.
    Module.js				// Backbone View. Module view (i.e., Portlet links rendered on main view).
   app.js					// Namespace implementation (i.e., umobile.model, umobile.view, etc.).
   bootstrap.js				// Entry point for the application.
   config.js				// uMobile configuration. Defines a config:{} object that is leveraged through out the application.

Key Workflows

General Page Load

  1. The index.html is loaded.
  2. Check the backend session access tracker using the uMobile PhoneGap plugin (i.e., SessionTracker.js). If it's non-zero, set the current JS-based application state's session access tracker to that value.
  3. Check application state for last session access timestamp. If it's present and is within the session length, assume we have a valid session and skip authentication.
  4. If the session isn't valid, attempt the authentication / layout retrieval.
    1. Check for persisted credentials.
    2. If credentials exist, attempt login. If they don't exist, establish a guest session. Save the current timestamp in the state.
    3. Parse the returned layout.json file, extracting portlets and combining that list with local modules.
  5. Render the home screen with one entry for each module.
  6. Check to see if a module parameter has been supplied to the main index page. If it has, set the module attribute on the state and load the specified module into the main interface.
  7. Check to see if a module is saved in the application state. If it has, load the specified module.

Module Load

  1. Set the module iframe to the module URL and show the module page.
  2. Save the current module in the application state.
  3. On each page / resource load of the module, the backend (Java, Cocoa, etc.) code checks to see if the last session access was within the session window. If it is, update the session access tracker with the current timestamp. If it isn't, reload index.html to force a new session to be created.

Credential Update

  1. Update the persisted credentials, then either log in or establish a guest session. Save the current timestamp in the state.
  2. Parse the returned layout.json file, extracting portlets and combining that list with local modules.
  3. Render the home screen with one entry for each module.

Backbone Models

State
  • authenticated: Boolean flag. Indication of authentication status.
  • lastSessionAccess: Timestamp of last session-maintaining page / resource load, in milliseconds since the epoch.
  • currentView: The fname of the current module, used to load application into correct module upon application relaunch.
Credentials
  • username: A user's username.
  • password: A user's password.
  • The credential model may need to be extended to accomodate other credential types.
Module
  • fname: Human-readable string identifier for portlet or module (i.e., news, calendar, etc.)
  • title: Title of portlet or module.
  • url: Location of the portlet or module.
  • iconUrl: Location of portlet or module icon.
  • newItemCount: Indicator to illustrate updates to the module or portlet.
  • isNative: Indicates uMobile native support for module or portlet.
  • Post-processing makes URLs absolute, etc.

Backbone Collections

ModuleCollection

  • models: Ordered array of Modules corresponding to merged user layout and native modules.
  • Needs to be extended to accomodate alternate folder-based layout.

Backbone Views

  • App View:
    • Parent view for the uMobile application.
    • Renders icon list of portlets and modules.
    • Houses code that initializes the Credential and Module views.
  • Credential View:
    • Houses the login view.
  • Module View:
    • Houses the focused module or portlet view.
    • Loads modules and portlets into an iFrame.

URL Handling

Content Display

Authentication

Session Management

Â