Application Development Platforms and Frameworks

Page 1

Highlights
Every major mobile OS comes with a rich app framework and powerful
app development platforms
iOS, Android, Blackberry, WebOS, Windows Phone

Many 3rd party libraries, frameworks and platforms offer cross-platform

alternatives to the OS vendor frameworks and platforms
PhoneGap, Appcelerator, Rhodes, Sencha
The best enable applications built with web technologies
that have the look-and-feel of native smartphone applications
with full support for the native phone controls and touch gestures

Emerging HTML5 application platforms point the way to the future

Chrome OS, Alibaba Aliyum, Carbyn
HTML5 enables web apps in the browser container to operate off-line
App cached on the device
Data stored locally on the device

Mobile App Development Tools

There are a wide variety of tools available for creating mobile
applications. These tools fall into three broad categories
Software libraries
Small, self-contained toolkits that offer specific functionality
E.g., UI widgets and 3D graphics

Application frameworks
A set of libraries, software components and architecture guidelines
Enable building a complete mobile application

Application development platforms

Everything needed to build a complete application and package it for distribution

Development tools are provided by OS vendors and by 3 rd parties

OS vendors provide native OS platforms & development environments

3rd parties provide libraries, frameworks and platforms

Native OS Application Platforms & Development Environments

Every major mobile OS comes with a rich application development and
execution environment, including:
Integrated Development Environment (IDE)
Industry standard langauges
Debuggers
Emulators

Rich application framework

Comprehensive set of libraries
Android

iOS

Blackberry

WebOS

Windows Phone

Primary languages

Java

Objective C

Java

C#

Also supported

C, C++

HTML, CSS,
JavaScript
C, C++

Xcode

Eclipse

Eclipse

Visual Studio

IDE

Eclipse

HTML5 is the Future of Mobile App Development

Apple has adopted HTML5, CSS and
JavaScript all open standards. Apples
mobile devices all ship with high performance,
low power implementations of these open
standards. HTML5, the new web standard that
has been adopted by Apple, Google and many
others, lets web developers create advanced
graphics, typography, animations and
transitions without relying on third party
browser plug-ins (like Flash). HTML5 is
completely open and controlled by a standards
committee New open standards created in
the mobile era, such as HTML5, will win on
mobile devices (and PCs too).
Steve Jobs, April 2010

Why HTML5
HTML5 transforms the web browser into a rich application platform
Rich user interfaces
Offline capabilities
Deep and secure hardware access capabilities

Availability
First public working draft of HTML5 published in 2008 by the W3C and
WHATWG web standard consortia
Although the specification work is ongoing, browsers have already
implemented many HTML5 features
Widespread use of the WebKit layout engine on iOS, Android, Blackberry,
WebOS and Bada has accelerated the mobile adoption of HTML5

The HTML5 Family

So called HTML5 apps are built using the suite of modern web
development technologies

The Core HTML5 spec

CSS3 (Cascading Style Sheets Version 3)
Web Workers
Web Storage
Web Sockets
Geolocation
Microdata
SVG (Scalable Vector Graphics)
WebGL*
Device API and File API
And more specifications in progress

* WebGL is not a W3C specification.

HTML5 Offline Capabilities

Local application storage: AppCache
Enables offline access to applications
Fast native app like app load time
Caches entire web app locally
Application to be cached specified in Cache Manifest File

Data storage and access

Web SQL Database
Client-side SQLite database

IndexedDB
Object based data store

File / FileSystem APIs

Reading and manipulating
Creating and writing
Directories and System

Building Mobile Apps with HTML5

Pure web apps
Accessed using a standard browser
Fully encapsulated in the browser

Web apps transformed into native apps

Wrapped in a native wrapper (e.g., PhoneGap)
Compiled to native platform object (e.g., Appcelerator)
There are two broad reasons to do this:
Access to the native app store (e.g., iTunes)
Access to API's not exposed to the browser (e.g., accelerometer, camera)

Web pages invoked by a native app using the OSs built-in browser

3rd party Libraries, Frameworks and Platforms

There are a great many 3rd party libraries, frameworks and platforms
Most are cross-platform, some are OS specific (e.g., only for iOS)
Most support web development technologies
HTML, CSS, JavaScript

Generally fall into one of three groups:

1.

Compile a native app targeting one or more platforms

E.g., Titanium Appcelerator (html/js/css -> iPhone/Android/Blackberry)

2.

Wrap a web app in a native wrapper, exposing native APIs to the web app
E.g., PhoneGap

3.

Enable touch-device optimized, native look and feel web apps

E.g., Sencha

Libraries
Libraries are small, self-contained toolkits that offer specific functionality to
the developer. Normally used in conjunction with other libraries and tools to
make up the full mobile app. Examples include UI widgets and 3D graphics
libraries. The best libraries for mobile application development enable the
creation of touch-device optimized, native look-and-feel applications.

rd
A
sample
of
the
more
popular
3
party cross-platform Open
libraries:
Jo
http://joapp.com
Source

Library

URL

License

Type

JQTouch

http://jqtouch.com

Open Source

Library

JQuery Mobile

http://jquerymobile.com

Open Source

Library

Sencha Touch

http://www.sencha.com/products/touch/

OS/Commercial

Library

xui

http://xuijs.com

Open Source

Library

Library

Frameworks
A framework is a set of libraries, software components and architecture
guidelines that provides the developer with a comprehensive toolkit to build
a complete mobile application, from top to bottom.
A sample of the more popular 3rd party cross-platform frameworks:
Framework

URL

License

Type

AML

http://www.amlcode.com

Open Source

Framework

Grapple

http://www.grapplemobile.com/

Commercial

Framework

MotherApp

http://www.motherapp.com/

Commercial

Framework

QT

http://qt.nokia.com/products/qt-formobile-platforms/

Open Source

Framework

QuickConnectFamily

http://www.quickconnectfamily.org/

Open Source

Framework

Sproutcore Touch
WebApp.net

Framework
http://webapp-net.com/

Open Source

Framework

Platforms
A set of frameworks, tools and services that not only allow the user to build
a complete mobile application but also to configure, package and
distribute it to app stores or the cloud. Platforms normally include some
sort of integrated development environment (IDE) to ease app
construction, comprehensive documentation, support and automation
tools.
A sample of the more popular 3rd party cross-platform platforms:
Plaform

URL

Adobe AIR
Appcelerator Titanium

http://www.appcelerator.com/

License

Type

Commercial

Platform

Open Source

Platform

appMobi

Platform

MobileIron

http://mobileiron.com/

Commercial

Platform

MoSync

http://www.mosync.com/

Open Source

Platform

Phonegap (Apache Callback) http://www.phonegap.com

Open Source

Platform

RhoMobile Rhodes

http://rhomobile.com/products/rhodes/

Open Source

Platform

WidgetPad

http://widgetpad.com

Open Source

Platform

PhoneGap (Apache Callback)

Technical architecture
Apps written in HTML, JavaScript and CSS
Run in a mobile browser embedded on a thin native app wrapper
Access to devices capabilities through a device-independent JavaScript API
which talks to the OS proprietary APIs

Supported platforms
iOS, Android, Blackberry, Windows Mobile 6.5, Symbian, Palm

Strengths

Native wrapper source code is available for customization

Simple drop-in libraries concept makes it easier to develop
Broad range of platforms supported
Apps built purely in HTML, JavaScript and CSS

Weaknesses
Lack of support for native UI components, design patterns and
development tools

Best PhoneGap apps use Sencha Touch to provide native

look-and-feel

PhoneGap (Apache Callback)

Free open source framework
Many contributors, including from IBM, RIM and Microsoft

Originally created by Nitobi

Adobe acquired Nitobi in October 2011
Provides Adobe with a pure web-technology mobile solution as an
alternative to the proprietary Flash/AIR
Adobe committed to continuing to contribute to the code and to host the
PhoneGap online community and the PhoneGap Build service
PhoneGap code was contributed to the Apache Software Foundation (ASF)
under the name Apache Callback

PhoneGap (Apache Callback)

supported features

Source: http://phonegap.com/about/features/

Appcelerator Titanium
Technical architecture
Apps written in JavaScript, compiled into native code
Creates target platform specific packaged
Enables distribution through app stores

Supported platforms
iOS, Android, BlackBerry (announced in 2010 but still in closed beta)

Strengths

Native code output so very quick and fluid on phone

Easy setup and start-up for developers
Excellent documentation and examples
Strong community forums to find out answers.

Weaknesses
Restrictive set of APIs
Currently only supports iOS and Android

Appcelerator Titanium
supported features
Capability

iPhone

Android

Geo-location

Yes

Yes

PIM Contacts

Yes

Partially

Camera

Yes

Yes

Native menu/Tab bar

Yes

Yes

Barcode

No

No

Audio/video capture

Yes

Yes

Bluetooth

No

No

Push/SMS

Partially

Partially

Calendar

No

Yes

Screen rotation

Yes

Yes

Native maps

Yes

Yes

Ringtones

No

No

Storage

Yes

Yes

Source: Tribal, Cross-platform mobile development, March 2011

RhoMobile Rhodes
Technical architecture
Apps written in Ruby and HTML/JS/CSS, compiled to Ruby byte-code
Run in a Ruby interpreter on the device

Rhodes runtime
Contains the interpreter
Provides cross-platform common abstractions for accessing device capabilities

Supported platforms
iOS, Android, Blackberry, Windows Mobile 6.5, Symbian

Strengths
Business logic written in Ruby helps to create structured code
Model-View-Controller design patterns
Supports a broad range of mobile platforms

Weaknesses
Need to know Ruby well

Motorola Solutions acquired RhoMobile in October 2011

What does this mean for future of Rhodes as a mobile app
platform?

RhoMobile Rhodes
supported features
Capability

iPhone

Android

BlackBerry

Symbian

Geo-location

Yes

Yes

Yes

Yes

PIM contacts

Yes

Yes

Yes

Yes

Camera

Yes

Yes

Yes

Yes

Native menu/Tab bar

Yes

Yes

Yes

Yes

Barcode

Yes

Yes

Yes

Yes

Audio/video capture

Yes

Yes

Yes

Yes

Bluetooth

Yes

Yes

Yes

Yes

Push/SMS

Yes

Yes

Yes

Yes

Calendar

Yes

Yes

Yes

Yes

Screen rotation

Yes

Yes

Yes

Yes

Native maps

Yes

Yes

Yes

Yes

Ringtones

Yes

Yes

Yes

N/A

Storage

Yes

Yes

Yes

Yes

Source: Tribal, Cross-platform mobile development, March 2011

Sencha Touch
A HTML5 mobile app library
Enables web apps that look and feel native on Apple iOS and Google
Android touchscreen devices
Supports app development with HTML5, CSS3, and Javascript

HTML5 library of choice for building mobile web apps

Pure web apps that run in the browser
Hybrid apps created with PhoneGap, Appcelerator and Rhodes

Heavily documented, with a strong professional team providing support

jQuery Mobile
Touch-optimized version of the popular jQuery library for smartphones
and tablets
Tools to build dynamic touch interfaces that adapt gracefully to a range of
device form factors
Includes layouts (lists, detail panes, overlays) and a rich set of form controls
and UI widgets (toggles, sliders, tabs)
Support for iOS, Android, Symbian, BlackBerry, Windows Mobile, WebOS,
bada, Maemo, MeeGo

Built on the jQuery and jQuery UI foundation.

Supports progressive enhancement

HTML5 Application Platforms and OSes

Application platforms that run web apps in HTML5 browsers

Google Chrome OS
Alibaba Aliyun OS
Carbyn (www.carbyn.com)
Mozilla Boot 2 Gecko
Webian

Chrome OS
An open source, lightweight operating system
Available on Chromebooks (i.e., netbooks) from Samsung and Acer
Built-in Wi-Fi and 3G

Chrome OS consists of three major components

The Chromium-based browser and the window manager
System-level software and user-land services: the kernel, drivers,
connection manager, and so on
Firmware

HTML5 applications available from Chrome Web Store

Chrome OS Architecture

Alibaba Aliyun OS
Cloud-based OS for tablets and mobile phones
Developed by Alibabas Alicloud division
Develop apps with the latest web technologies
HTML5, CSS3, JavaScript

Cloud based services

e-mail, Internet search, weather updates, maps, navigation
Synchronize and store user data in real time to AliCloud
Contacts, text messages, photos, call logs
Free 100 GB storage data backup and synchronization.

Also supports Android apps

English version announced

Example HTML5 Applications:

Gmail, Google Calendar, and Google Docs
Run in Google Chrome browsers
On PCs, Macs, and Chrome OS devices

Apps cached in browser, sync user data to browsers storage

Load instantly, available off-line

Installed from Google Chrome Web Store

Example HTML5 Applications:

Xero Mobile
Business account web app
iOS app built with PhoneGap and Sencha Touch
Web app wrapped in native PhoneGap wrapper
Packaged as native iOS app

Installed from Apple App Store

Example HTML5 Applications:

Sugar Mobile
Sugar CRM web app
iOS app built with Appcelerator
Web app compiled to native app
Packaged as native iOS app

Installed from Apple App Store

Key Assertions
The HTML5 family of web technologies is the future prefered mobile
application platform
Google Chrome, Alibaba Aliyun and other HTML5 OSes provide proof
points of the ability to provide a rich user experience with HTML5
There are many HTML5 libraries, frameworks and platforms in the
marketplace
Consolidation is underway
Many acquisition opportunities
Many open source opportunities

BACKUP

Mobile App Developer Platform Interest

Very interested in developing for each platform

Mobile App Developer Platform Interest Trends

Very interested in developing for each platform

Browser Support for the HTML5 Family

TABLETS

MOBILE PHONES
HTML5
Score

OS

Devices

iOS 5

Apple iPad

296

Android 3.2

Motorola Xoom, Samsung

Galaxy Tab and others

RIM Tablet OS 1

webOS 3

Opera Mobile 11.10

Firefox Mobile 8

Bonus
Points

HTML5
Score

Bonus
Points

OS

Devices

iOS 5

Apple iPhone and iPod

Touch

296

215

Android 2.3

Google Nexus S and

others

177

BlackBerry PlayBook

257

BlackBerry OS 7

BlackBerry Bold 9900 and

others

260

HP TouchPad

195

webOS 2.1

Palm Pre Plus, Pre 2

155

Windows Phone 7.5

(Mango)

Samsung Omnia W, LG
E906 and others

140

MeeGo/Harmattan

Nokia N9 and N950

272

14

Opera Mobile 11.10

Multiple platforms

269

Firefox Mobile 6

Multiple platforms

254

Firefox Mobile 8

Multiple platforms

314

Multiple platforms

Multiple platforms

269

314

The HTML5 test score is an indication of how well a browser supports the HTML5 standard and related specifications. The HTML5 test does not try to test all of
the HTML5 features, nor does it try to test the functionality of each feature it does detect. The score is calculated by testing for the many new features of
HTML5. Each feature is worth one or more points. Apart from the main HTML5 specification and other specifications created the W3C HTML Working Group,
this test also awards points for supporting related drafts and specifications. Some of these specifications were initially part of HTML5, but are now further
developed by other W3C working groups. WebGL is also part of this test despite not being developed by the W3C. The test awards bonus points for supporting
audio and video codecs and supporting SVG or MathML embedding in a plain HTML document. These test do not count towards the total score because HTML5
does not specify any required audio or video codec. Also SVG and MathML are not required by HTML5, the specification only specifies rules for how such
content should be embedded inside a plain HTML file. All results except for Firefox Mobile 8 are from html5test.com/results.html. Firefox Mobile 8 results are
from MyMobilife tests using html5test.com.