Hybrid mobile application with Ionic

HYBRID MOBILE
APPLICATION
By
Maulik Bamania

Agenda
• SmartPhone OS Apps market
• SmartPhone Apps development technology
• Native Vs Web Vs Hybrid Apps

SmartPhone OS
• Smartphone OS available in market
• Android
• iOS
• Windows Phone
• Blackberry OS
• Fire OS (from Amazon)
• Firefox OS (from Mozilla)

SmartPhone Apps
•Native Apps
•Web Apps
•Hybrid Apps

SmartPhone Apps: Native Apps
• OS centric
• Developed using platform
specific IDE
• Additional storage space
• High development and
maintenance cost
• Better Performance and
Usability
• Best overall mobile
experience
• Native API access for
Graphics, device feature
and hardware. In sort
access to everything
available on your mobile.
• Good tutorials and training
materials

SmartPhone Apps: Web Apps
• Responsive mobile version of
web site
• Fast UI development with
HTML5 and CSS3
• Business logic can be handle
with JavaScript
• Run on any Mobile OS
"write-once-run-anywhere"
• Installation free
• No additional memory usage
• Low development and
maintenance cost
• E.g. Jquery Mobile, Sencha
Touch, Kendo Mobile
• Run under mobile browser
• Limited or no access to Native
API, device features and
hardware
• Limited UI event capturing
compare to native
• Additional burden of testing with
various platform and device
• No offline support (internet
required)
• Security checkpoint.
Authentication and offline data
encryption

SmartPhone Apps: Hybrid Apps
• Best of Both (Native & Web)
• Developed with HTML5,
CSS, Javascript; binding
them with thin native
container which will provide
access to native platform
• Run on all major mobile OS
• Low development and
maintenance cost
• Native API and Device
Hardware access
• Cordova, PhoneGap
• Not so mature Handling
native API with respect
to all platform
• No standard IDE
• Lag to provide 100%
look & feel like native for
some platform
• Performance drawback
in some cases compare
to Native (mainly with
high processing with
CPU & Graphics)

Smartphone Apps
Native Mobile Web (HTML5) Hybrid
App Features
Graphics Native APIs HTML, Canvas, SVG HTML, Canvas, SVG
Performance Fast Slow Slow
Native look and feel Native Emulated Emulated
Distribution Appstore Web Appstore
Device Access
Camera Yes No Yes
Notifications Yes No Yes
Contacts, calendar Yes No Yes
Offline storage Secure file storage Shared SQL
Secure file system,
shared SQL
Geolocation Yes Yes Yes
Gestures
Swipe Yes Yes Yes
Pinch, spread Yes No Yes
Connectivity Online and offline Mostly online Online and offline
Development skills ObjectiveC, Java HTML5, CSS, Javascript HTML5, CSS, Javascript

Hybrid Mobile Platform
• Hybrid mobile platform will allow to wrap your web
application with native container to make your application
a real mobile Apps.
• Here are few popular platform available:
Android iPhone Widows BlackBerry amazon-fireos
Cordova / PhoneGap X X X X X
Trigger.io X X X
Telerik Platform X X X
Intel XDK (formerly
appMobi)
X X X X X
Framework 7 X

Hybrid Mobile UI Framework
• Mobile UI framework will provide mobile specific UI component ,
font, theme.
• It helps to create hybrid mobile app which look and feel similar to
native apps with better performance.
• Here are few popular mobile UI framework:
Ui framework Platform build OpenSource IDE CSS MVC support
Ionic Cordova, PhoneGap,
Trigger.io
Yes Ionic Creator SASS Yes (AngularJS)
Onsen UI Cordova, PhoneGap Yes Monaco IDE Topcoat CSS Yes (AngularJS)
Sench Touch Cordova, PhoneGap No No SASS Yes
JQuery Mobile Cordova, PhoneGap Yes No Themeroller No
Mobile Angular UI Cordova, PhoneGap Yes No SASS / LESS Yes
Kendo UI Telerik No No SASS / LESS Yes (AngularJS)

Ionic framework
• Mobile UI design and development framework
• Build around Apache Cordova, AngularJS, SASS, CSS3
and HTML5
• Ready with inbuilt UI plugin (and that is customized for
android and iOS platform), theme, typography, seed
projects for faster development
• Can build Ionic app either of Cordova, PhoneGap or
Trigger.io platform
• Support for push notification, A/B testing, code deploys
and automated builds
• Ionic Creator – IDE for ionic development

Ionic framework
• the core is written
with Sass and includes
easily customized variables
and mixins.
• OS specific styles,
behaviors and transitions
(currently available for iOS
and Andorid)
• Ionicons : The premium
icon font for Ionic
Framework.

Ionic framework
• A/B testing under
standard browser with
Ionic Serve
• Development with
livereload
• Reach optimized
angularJS base UI
component

Ionic framework
• Poor documetation, but high number of active users in live
communitiy
• Only for mobile UI, can not be used for desktop
responsive UI
• For resposive, uses CSS Flexible box which only
supported under latest browser
• Not support plugin variables

Development with Ionic
• Underline technologies
• Nodejs
• open source JavaScript engine. Ionic, cordova are NPM module
• Apache Cordova
• Open source Hybrid mobile application development platform
• Android SDK
• Android platform developer kit, required to build android app with ionic
• AngularJS
• Javascript framework, enable MVC and two way data binding capability with web
application
• HTML5
• Web scripting language comes with power to build responsive web application
• CSS3
• Web page style
• Gulp / grunt
• NPM packages helps to build and run web application under NodeJs envirement
• Bower
• Its Maven like javascript lib dependency manager

Ionic setup
• Install nodeJS
• Install cordova NPM package
npm install -g cordova
• Install Ionic NPM package
npm install -g ionic

Hybrid mobile application with Ionic

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Hybrid mobile application with Ionic (20)

Hybrid mobile application with Ionic

Editor's Notes