uMobile PhoneGap Exploration

Owned by Jen Bourey
Last updated: Jun 05, 2013 by Matthew Polizzotti (Deactivated)Version comment
4 min read

Overview

  1. Looking at a PhoneGap wrapped HTML5 solution as a way to build once and deploy native applications to both Android and iOS platforms.
  2. uMobile is currently built on jQuery, jQuery Mobile, Backbone and Underscore (older versions).
  3. A user is provided with 3 views: Home, Module and Preferences (Login screen).
  4. All three views always exist and live in the index.html. View visibility is toggled off and on.
  5. Portlet web views or modules are loaded into an iframe in the Module view.
  6. Local and CAS authentication have been implemented. Experiencing some issues with Local and CAS authentication.

Completed

  1. Reviewed the existing codebase.
  2. Documented the uMobile code base with the yuiDoc tool.
  3. Updated documentation for Android development environment.
  4. Updated documentation for Web or HTML5 development environment.
  5. Updated documentation for iOS development environment.
  6. Cleaned up project files and directory structure.
    1. Added basic markup to mocked modules (i.e., Courses, Calendar, News).
    2. Separated out Backbone implementation into separate files (i.e., Models, Collections, Views and Services).
  7. Implemented automated build script for the front-end.
    1. HTML is complied.
    2. CSS is minified.
    3. JavaScript is linted, optimized and minified.
    4. Cordova (PhoneGap) files are programmatically added to the application based upon environment (i.e., iOS, Android, Web).

Recommend Improvements

  1. Create a separate JIRA for the uMobile project.
  2. Foster community support and discussion around recommendations and roadmap.
  3. Improve existing screens and screen work flow.
    1. What types of screens or views do we want to offer?
    2. Develop wireframes for proposed screens and solicit feedback.
    3. Develop responsive screens for both tablet and smartphone.
    4. Add logout / login access to all screens and not just the preference screen.
  4. Fix styling issue with the guest login button.
  5. Add native support for more portlets or mocked modules (i.e., Courses, Calendar, News).
    1. Current implementations for mocked modules are empty except for the Map module.
  6. Improve the login screen.
    1. Provide better error handling and client side validation.
  7. Implement application localization.
  8. Develop an overall approach to error handling.
    1. How should the UI respond to a failed request?
    2. How should the UI respond to failed login attempts?
    3. How should the UI respond to a failed request for user layout data?
  9. Upgrade libraries and technology stack for better application scalability and maintainability (See: Proposed Technology Stack).
  10. Implement automated JavaScript unit tests for more complete code coverage.
  11. Implement a CI environment for the uMobile project.
  12. Resolve issues with Local & CAS login implementation.
  13. Portal and portlet icons for display on Retina displays.
  14. Implement Shibboleth authentication.
  15. Implement inter-module linking.
  16. Implement native map and directory functionality.
  17. Implement back button for external modules.
  18. Consider offline functionality approach.

Proposed Technology Stack

The uMobile PhoneGap implementation, in its current state, is just a prototype and additional work is needed to increase the application's maintainability and scalability. The below technology stack aims to modernize the uMobile application as well make the code base as easy to use and accessible to wide range of development skills. The recommendations listed below seek to create a code base that is modular, documented, testable through automated build tools and able to be integrated into a CI build environment.

*Note: Recommendations assume that portlets and modules will be loaded into an iframe and that the uMobile application owns and controls routes and can freely manage the application url. In addition, some of the technologies and statements listed below are the opinion of two developers currently working on this code base. Statements are open for discussion.

  1. Upgrade to the latest PhoneGap version.
  2. Upgrade to the latest jQuery version.
  3. Update to the latest Underscore version.
  4. Remove the fluid library from the technology stack.
  5. Remove jQuery Mobile from the technology stack.
    1. Only using jQuery Mobile to manage views & provide out of the box styling.
    2. Implement a responsive approach instead for tablet and smartphones (i.e., Bootstrap).
  6. Implement Require.js.
    1. Require.js is script loader for JavaScript applications.
    2. Allows script tags to be loaded in parallel.
    3. Ships with r.js, a build tool that minifies and optimizes JavaScript code.
    4. Integrates with grunt.js, front-end build tool.
  7. Migrate code base from Backbone.js to Angular.js.
    1. Backbone is more of a toolset than framework.
    2. Must piecemeal application framework together with Backbone.
    3. Angular is built by google & updated often.
    4. Vibrant community with a lot of documentation and video tutorials.
    5. Google is actively addressing developer pain points.

    6. Provides clear separation of code (i.e., Controllers, Services, Resources, Directives & Filters).

    7. Implement angular router to manage page views.
  8. Implement Testing framework.
    1. Leverage Grunt.js, PhantomJS, Jasmine.js libraries.
    2. Consider using Yeoman.js.

Project Setup

  1. iOS Development Environment
  2. Android Development Environment
  3. Web Development Environment
  4. BlackBerry Development Environment
  5. Windows Development Environment

Project Architecture

Proposed Roadmap

The S (small), M (medium) and L (large) letters at the end of each item signify the amount of effort to complete the task. The below tasks have been color coded based upon there current progress.

  • Not Started
  • Completed
  • In Progress
  • Issue Reported

March 2013

  • Temporarily disable PhoneGap Session Tracking. (S) 
  • Upgrade to latest PhoneGap version. (S)
  • Update community documentation with upgrade information. (S)
  • Clean up application CSS layer. (S)
  • Resolve login issues with Login implementation.(M)
    • The mock and local implementations are all functional.
    • There is an issue with the CAS implementation.
  • Provide error handling and client side validation for Login. (S)

April 2013

  • Upgrade to latest jQuery version. (S)
  • Upgrade to latest Underscore version. (S)
  • Upgrade to latest Backbone version. (S)
  • Remove fluid from the technology stack. (S)
  • Implement the require.js & r.js library and build tools. (M)
  • Remove jQuery mobile view management and replace with Backbone view management. (M)
  • Remove jQuery mobile theme (css) and replace with twitter bootstrap for responsive design (i.e., Tablet & Smartphone display). (M)
  • Implement lightweight CSS layer with Less framework (i.e., Tablet & Smartphone display). (M)
  • Add additional support, where needed, to mobilize existing portlets and modules. (M to L)

June 2013 and Beyond (After the conference)

  • Improve existing screens and screen work flow (i.e., wireframes).
  • Re-implement the PhoneGap Session Tracking.
  • Port application from Backbone to Angular.
  • Implement application localization.
  • Implement automated JavaScript unit tests.
  • Implement a CI environment for the uMobile project.
  • Portal and portlet icons for display on Retina displays.
  • Implement Shibboleth authentication.
  • Implement inter-module linking.
  • Implement native map and directory functionality.
  • Implement back button for external modules.
  • Implement offline functionality approach.