Introduction to Mobile Application
A mobile application, most commonly
referred to as an app, is a type of
application software designed to run
on a mobile device, such as a
smartphone or tablet.
Three different approach for
developing a mobile application.
• Mobile Web Apps
• Hybrid Apps
• Native Apps
Mobile Web Apps
• Accessed through mobile device’s web browser.
• Built with three core technologies:
• HTML4/5 (defines static text and Images)
• CSS2/3 (defines styles and presentation)
• JavaScript (defines Interactions and animations).
• Since web apps are browser based they’re intend to be platform and
device independent.
• Simple and easy to access.
Google Chrome Opera Apple Safari
Mobile Web Apps- Examples
The Mobile Web apps url will look like as
m.domain.com or domain.com/mobile/
Few Examples of Mobile Web Apps :
http://m.timesofindia.com/
https://m.verizonwireless.com
http://m.stanford.edu/
http://www.bbc.co.uk/mobile/i/
Some urls automatically detecting the
devices based on the devices
type it will automatically resize layouts.
Native Apps
• Built for a particular device and its operating
systems.
• Downloaded from a web store and installed
on the device.
• Native apps are written in Java for Android,
Objective-C for Apple iOS.
Native apps examples :
• Native Calendar Apps
• Native SMS Apps
• Native Game Apps
• Native Push Notifications
• Native To do list
Native Apps – Platforms/ Operating Systems
Objective - c Apple (Ex : iPhone, iPad)
Java, C, C++ Google (Ex : Samsung, HTC)
Java RIM (Ex: Black Berry)
C, C++ Microsoft (Ex: Nokia)
C, C++, JS, HTML, CSS HP (Ex : HP Touch pads)
Hybrid Apps
Hybrid apps, like native apps, run on the
device, and are written with web technologies
(HTML5, CSS and JavaScript).
Hybrid apps run inside a native container, and
leverage the device’s browser engine (but not
the browser) to render the HTML and process
the JavaScript locally.
Remarks:
• Can’t handle heavy graphics
• Requires familiarity with a mobile framework
• You cannot access all hardware functions of mobile devices
Comparison
Hybrid Apps – Examples
• RBC Launch iOS app for RBC Direct Investing which is Hybrid app
developed with Hybrid application.
• This application can be download via apps store (iTunes).
https://itunes.apple.com/ca/app/rbc-mobile/id407597290?mt=8
Hybrid Apps – Examples
Hybrid Apps – Examples
Hybrid Apps – Example App (RBC)
Hybrid Mobile Frameworks
List of hybrid mobile frameworks which can be work in multiple
mobile devices
Features Jquery Mobile Jqtouch SenchaTouch Phonegap Rhomobile
Built with HTML5
CSS3
JQUERY
HTML5
CSS3
JQUERY
HTML5
CSS3
ExtJs
HTML
CSS
JS
Ruby
JavaScript
HTML
CSS
Supported Devices Apple
Android
BlackBerry
Palm WebOS etc
Apple
Android
iPod
Apple
Android
(Motorola,
Samsung)
iOS, Android,
webOS, Windows
Mobile, Symbian,
BlackBerry
,Windows Phone,
Windows 8
Android,
BlackBerry, iOS,
Symbian,
Windows Mobile
Performance Medium Medium Fast Fast Fast
Development
effort
Flexible Easy Flexible Flexible Flexible
Approval Process Open Source Open Source Open Source Open Source Open Source
Set up Webkit browsers Webkit browsers Webkit browsers Webkit browsers
(iOS, Android, BB
OS)
Webkit browsers
(Ruby,iOS,
Android, BB OS)
Which one to chose?
Feature Mobile Web Hybrid App Native
Development Cost Lowest Low Expensive
Speed of App Internet Speed Near Native Native Speed
Deployment Process Easy Relatively Easy Difficult
Approval Process NA Easy Difficult
Offline Capability Fails Good Design Works Works
Once upon a time there were very clear distinctions between mobile
web and native applications, but the recent surge in hybrid apps is blurring
the lines and changing the decision matrix.
Some of the more important considerations are explored below.
Became Hybrid Application Developer
Careers
HTML/CSS/JavaScript --------- UI Developer
JavaScript/Jquery --------- Jquery Developer
HTML5/CSS3 --------- Mobile Web Developer
Jquery Mobile/Sencha/Jqtouch --------- Hybrid Mobile Developer
HTML/CSS/JavaScript/OOPS --------- Interactive UI Developer
HTML4/5/CSS2/3/JS/Jquery --------- Web Developer
HTML5 --------- Game Developer
Example Works
Example Works

Hybrid vs Native vs Web Apps

  • 1.
    Introduction to MobileApplication A mobile application, most commonly referred to as an app, is a type of application software designed to run on a mobile device, such as a smartphone or tablet. Three different approach for developing a mobile application. • Mobile Web Apps • Hybrid Apps • Native Apps
  • 2.
    Mobile Web Apps •Accessed through mobile device’s web browser. • Built with three core technologies: • HTML4/5 (defines static text and Images) • CSS2/3 (defines styles and presentation) • JavaScript (defines Interactions and animations). • Since web apps are browser based they’re intend to be platform and device independent. • Simple and easy to access. Google Chrome Opera Apple Safari
  • 3.
    Mobile Web Apps-Examples The Mobile Web apps url will look like as m.domain.com or domain.com/mobile/ Few Examples of Mobile Web Apps : http://m.timesofindia.com/ https://m.verizonwireless.com http://m.stanford.edu/ http://www.bbc.co.uk/mobile/i/ Some urls automatically detecting the devices based on the devices type it will automatically resize layouts.
  • 4.
    Native Apps • Builtfor a particular device and its operating systems. • Downloaded from a web store and installed on the device. • Native apps are written in Java for Android, Objective-C for Apple iOS. Native apps examples : • Native Calendar Apps • Native SMS Apps • Native Game Apps • Native Push Notifications • Native To do list
  • 5.
    Native Apps –Platforms/ Operating Systems Objective - c Apple (Ex : iPhone, iPad) Java, C, C++ Google (Ex : Samsung, HTC) Java RIM (Ex: Black Berry) C, C++ Microsoft (Ex: Nokia) C, C++, JS, HTML, CSS HP (Ex : HP Touch pads)
  • 6.
    Hybrid Apps Hybrid apps,like native apps, run on the device, and are written with web technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native container, and leverage the device’s browser engine (but not the browser) to render the HTML and process the JavaScript locally. Remarks: • Can’t handle heavy graphics • Requires familiarity with a mobile framework • You cannot access all hardware functions of mobile devices
  • 7.
  • 8.
    Hybrid Apps –Examples • RBC Launch iOS app for RBC Direct Investing which is Hybrid app developed with Hybrid application. • This application can be download via apps store (iTunes). https://itunes.apple.com/ca/app/rbc-mobile/id407597290?mt=8
  • 9.
  • 10.
  • 11.
    Hybrid Apps –Example App (RBC)
  • 12.
    Hybrid Mobile Frameworks Listof hybrid mobile frameworks which can be work in multiple mobile devices Features Jquery Mobile Jqtouch SenchaTouch Phonegap Rhomobile Built with HTML5 CSS3 JQUERY HTML5 CSS3 JQUERY HTML5 CSS3 ExtJs HTML CSS JS Ruby JavaScript HTML CSS Supported Devices Apple Android BlackBerry Palm WebOS etc Apple Android iPod Apple Android (Motorola, Samsung) iOS, Android, webOS, Windows Mobile, Symbian, BlackBerry ,Windows Phone, Windows 8 Android, BlackBerry, iOS, Symbian, Windows Mobile Performance Medium Medium Fast Fast Fast Development effort Flexible Easy Flexible Flexible Flexible Approval Process Open Source Open Source Open Source Open Source Open Source Set up Webkit browsers Webkit browsers Webkit browsers Webkit browsers (iOS, Android, BB OS) Webkit browsers (Ruby,iOS, Android, BB OS)
  • 13.
    Which one tochose? Feature Mobile Web Hybrid App Native Development Cost Lowest Low Expensive Speed of App Internet Speed Near Native Native Speed Deployment Process Easy Relatively Easy Difficult Approval Process NA Easy Difficult Offline Capability Fails Good Design Works Works Once upon a time there were very clear distinctions between mobile web and native applications, but the recent surge in hybrid apps is blurring the lines and changing the decision matrix. Some of the more important considerations are explored below.
  • 14.
  • 15.
    Careers HTML/CSS/JavaScript --------- UIDeveloper JavaScript/Jquery --------- Jquery Developer HTML5/CSS3 --------- Mobile Web Developer Jquery Mobile/Sencha/Jqtouch --------- Hybrid Mobile Developer HTML/CSS/JavaScript/OOPS --------- Interactive UI Developer HTML4/5/CSS2/3/JS/Jquery --------- Web Developer HTML5 --------- Game Developer
  • 16.
  • 17.