pp108 : Framework

Framework

The following sections describe the reason for choosing Phone Gap, HTML5, JQuery, jQuery Mobile, and Knockout.js as the layers for mobile development:

Apache Cordova (PhoneGap)

Phone Gap, now known as Apache Cordova is an open-source mobile development framework to build hybrid applications for mobile devices. It enables programmers to build Mobile Apps using HTML5, CSS, and JavaScript along with the other  frameworks such as jQuery Mobile and Sencha.

Features:
  • Creates a bridge between the browser and the native device APIs. For more information on API Reference, refer to Apache Cordova Documentation
  • Provides access to the native features of a mobile phone such as Camera, File, and Notification from an HTML page
  • Runs on multiple devices with the same code base  

The following platforms and their versions are supported by PhoneGap:

Platform

Version

iOS

3.2 or later

Android

1.5 or later

BlackBerry

4.6 or later

webOS

1.4.5 or later

Symbian

1 or later

Windows Phone

7.5 or later

Samsung Bada

1 or later

Cordys.mobile plug-in is designed to be used for operations such as capturing a picture, beeping, and vibrating. This plug-in works only when the page is accessed using the native app, running on Phone Gap.

HTML5

Features:
  • Works on all the smart phones and hence, a single code base
  • Easy to develop and maintain
  • Supports more capabilities such as Offline DB, Push Notifications, and Access to Native Features
  • Availability of developer eco-system and support in the developer community
  • Availability of libraries and toolkit 

jQuery

      jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML.

Features:
  • Easy to extend with plug-ins
  • Acts as a base for other libraries such as jQuery-UI and jQuery Mobile
  • Familiar to a lot of Web developers
  • Less maintenance costs
  • Simplifies DOM element selection, DOM traversing and manipulation, Event handling, CSS manipulation, Effects and animations, Ajax interactions, and other utility methods
  • Compatible with all the widely used browsers
  • Used by over 40% of the top million most visited websites

For more information about jQuery, refer to the official jQuery website.

jQuery Mobile

New tools and frameworks are emerging with HTML5 and mobile Web development to provide more consistent and comprehensive HTML5 support across mobile browsers. A few of the popular HTML5 mobile Web frameworks are jQuery Mobile and Sencha Touch.

Features:
  • Built on jQuery code
  • Compatible with all the major mobile platforms including iOS, Android, Blackberry, WebOS, Symbian, Windows Phone 7, and more); tablets; e-reader; and all the major desktop browsers
  • Lightweight and limited dependencies to optimize the speed
  • HTML5 markup-driven configuration
  • Touch and mouse event support
  • Unified UI widgets with powerful theming framework
  • Ajax-powered navigation with animated page transitions
  • Underlying code base automatically scales to any screen
  • UI widgets that are platform independent

Sencha Touch

Features:
  • Easy to set up
  • Built-in transition effects
  • Supports iOS, Android, and Blackberry
  • Resolution independent
  • Touch event support
  • Ajax and JSONP support

 jQuery Mobile and Sencha Touch - A comparison

  • jQuery Mobile is widely used by the developer community compared to Sencha Touch.
  • jQuery Mobile supports more number of mobile platforms compared to Sencha Touch.
  • The documentation of Sencha Touch is not comprehensive, but jQuery Mobile documentation is good.
  • jQuery mobile is lightweight compared to Sencha touch.
  • Sencha Touch supports MVC (Model-View-Controller) style application design, whereas jQuery mobile is simply a load of markup and a load of jQuery script converting your HTML elements into touch-friendly interface components.
  • jQuery Mobile framework is easy to integrate with other technologies.
  • jQuery Mobile is free, where as Sencha Touch is available free of charge for commercial and open source application development. However, embedding Sencha Touch in a Web application builder or Software Development Kit (SDK) requires a paid commercial OEM license agreement.

jQuery Mobile has many other advantages over Sencha Touch and therefore, jQuery Mobile is used in the Process Platform HTML5 SDK. The users can also use Sencha Touch instead of jQuery Mobile, if required.

KnockoutJS

KnockoutJS is a cross-browser JavaScript library designed to simplify dynamic JavaScript UIs by applying the Model View View Model (MVVM) pattern. For more information, refer to the KnockoutJS official Website.

Features:
  • Declarative bindings in HTML, which reduces scripting
  • Automatic UI refresh on model changes
  • Dependency tracking
  • HTML templating
  • Small and lightweight
  • Works with jQuery smoothly
  • Highly customizable and pluggable 

Other similar libraries include Ember.js and backbone.js, which follow MVC and Model-View-Presenter (MVP) respectively. Benefits of KnockoutJS over these libraries are as follows:

  • Automatic observables and dependent observables. For example, compute fullName as firstName + lastName. 
  • Nested templates
  • Easy to set up 

Attachments: