1.
Hybrid Mobile Application Development
Starting >> Ionic 2 & Angular 2
Hybrid Mobile Application Development
Starting >> Ionic 2 & Angular 2
Nikhil Kumar | Software Consultant
KnÓldus Software LLP
Nikhil Kumar | Software Consultant
KnÓldus Software LLP

2.
AgendaAgenda
● What is hybrid mobile application : The Concept
● What is IONIC Framework
● Ionic 1 vs Ionic 2: A Comparison
● Ionic 2 & Angular 2
● Going Into IONIC world
● Designing in IONIC
● What is Apache Cordova
● Get Into Cordova
● Demo

3.
-Hybrid apps are like anyother app you'll find in your phone.
-Hybrid mobile apps are built with a combination of web technologies like
HTML, CSS, and JavaScript...
From users view: It doesn't matter if wine tastes well.
-The key difference is that hybrid apps are hosted inside a native
application that utilizes a mobile platform’s WebView.
-Today, most hybrid mobile applications leverage Apache Cordova.
-Hybrid apps are like anyother app you'll find in your phone.
-Hybrid mobile apps are built with a combination of web technologies like
HTML, CSS, and JavaScript...
From users view: It doesn't matter if wine tastes well.
-The key difference is that hybrid apps are hosted inside a native
application that utilizes a mobile platform’s WebView.
-Today, most hybrid mobile applications leverage Apache Cordova.
The Concept
What – Why – Where – coming slides...

4.
Motivation for HybridMotivation for Hybrid
Hybrid mobile applications provide a way for developers to re-use their existing skills in web
development.
WHY
Hybrid mobile application development looks appealing to an organization’s. Why hire a
developer for each platform when you can hire one developer and target all of them through
HTML, CSS, and JavaScript? But Reality is???

5.
When should you build a hybrid mobile app?
● Which mobile platforms do you wish to target?
● Do you want to distribute your application via app stores?
● Are you looking to utilize the capabilities of the mobile
device?
● What are the technical abilities of your development
team?
● Does the one-size-fit-all approach of hybrid really live up
to its promise?
When should you build a hybrid mobile app?
● Which mobile platforms do you wish to target?
● Do you want to distribute your application via app stores?
● Are you looking to utilize the capabilities of the mobile
device?
● What are the technical abilities of your development
team?
● Does the one-size-fit-all approach of hybrid really live up
to its promise?

6.
Examples of Hybrid ApplicationsExamples of Hybrid Applications
Insta
untappd
yelp
FitFyles
http://showcase.ionicframework.com/

7.
Drifty: Ben Sperry and Max Lynch- 2012
Ionic: 2013
­ Developers have created 500,000 apps
­ 15,000 stars on GitHub and has risen to become one of the top 40
most popular projects worldwide, notes Lynch.
Drifty: Ben Sperry and Max Lynch- 2012
Ionic: 2013
­ Developers have created 500,000 apps
­ 15,000 stars on GitHub and has risen to become one of the top 40
most popular projects worldwide, notes Lynch.
Ionic : A Large scale overview
Drifty, a company that has been making it possible for web developers to build
and publish native mobile applications that can then be published to the major
app stores, including Apple’s iTunes, Amazon’s Appstore and Google Play, has
now raised an additional $2.6 million led by Lightbank in Chicago.

8.
Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform
hybrid native apps and mobile websites with HTML, JavaScript, and CSS. If you know
how to build or design websites, you will be able to build a real mobile app with Ionic!
Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform
hybrid native apps and mobile websites with HTML, JavaScript, and CSS. If you know
how to build or design websites, you will be able to build a real mobile app with Ionic!
Ionic Framework

9.
Ionic 2 Vs Ionic1Ionic 2 Vs Ionic1
Ionic 2 is currently in beta and is being actively devleoped
At a high level, Ionic 2 is very similar conceptually to Ionic 1. In Ionic 1 you have
controllers that hold your logic, and templates that define your views. Ionic 2 is the same,
except you have classes instead of controllers. There are some differences in the
template syntax, and a lot of differences in the class structure.
So, let’s jump into some specifics. Here’s 5 reasons why I think Ionic 2 is better than Ionic 1.So, let’s jump into some specifics. Here’s 5 reasons why I think Ionic 2 is better than Ionic 1.

10.
1- Organisation and Structure1- Organisation and Structure
home
home.js
home.html
home.scss
about
about.js
about.html
about.scss
Of course, you could organise your Ionic 1 projects like this as well, but
it wasn’t really the default style that was used. It would require prior
knowledge and motivation to achieve a sensible and scalable structure
like this in Ionic 1.
but in Ionic 2 you can’t really do that.
2- Tooling : it's simple but one of my favorate
$ ionic generate page MyPage
which can also be shortened to:
$ ionic g page MyPage
● my-page
my-page.js
my-page.html
my-page.scss

11.
3- Navigation3- Navigation
Navigation in Ionic 2 is very different to Ionic 1. In Ionic 1 navigation was defined using URLs,
for example:
.config(function($stateProvider, $urlRouterProvider) {.config(function($stateProvider, $urlRouterProvider) {
$stateProvider$stateProvider
.state('intro', {.state('intro', {
url: '/',url: '/',
templateUrl: 'templates/intro.html',templateUrl: 'templates/intro.html',
controller: 'IntroCtrl'controller: 'IntroCtrl'
})})
.state('main', {.state('main', {
url: '/main',url: '/main',
templateUrl: 'templates/main.html',templateUrl: 'templates/main.html',
controller: 'MainCtrl'controller: 'MainCtrl'
});});
$urlRouterProvider.otherwise("/");$urlRouterProvider.otherwise("/");
});});
and you would activate these states by linking to them, which is a very “web” approach. In Ionic 2 a more “native” approach is used where
pages are “pushed” and “popped”:
this.nav.push(MyPage);

12.
4. It’s Just Javascript4. It’s Just Javascript
In Angular 1 and Ionic 1 there was a lot of framework specific terminology and syntax to learn, but
with Ionic 2 it’s basically just plain old (or rather new) Javascript. Everything you build is basically
just ES6 (or TypeScript if you prefer) code, which isn’t specific to any framework. It’s just
Javascript.
The benefit of this is that everything you learn when
building Ionic 2 application isn’t just going to help you
build Ionic 2 applications, it’s also going to help you be
a better Javascript developer in general. The skills you
develop with Ionic 2 are going to be.
able to be applied in a bunch of other places as ES6
eventually becomes the new “normal” Javascript.

13.
5. Building5. Building
In Ionic 2 almost all of your coding will be done inside of
the app folder,
which is completely separate to the www folders.

14.
Folder StructureFolder Structure
If you’re not familiar with Ionic 2, it’s the latest incarnation
of Ionic – “the world’s most popular cross-platform mobile
development technology.”

15.
Summary of comparisonSummary of comparison
Without a doubt, I would recommend everybody switch to Ionic 2
- If you’re completely new to Ionic, start with Ionic 2
- If you’re using Ionic 1 for existing projects, stick with Ionic 1 and upgrade it later
- If you’re using Ionic 1 and starting a new project, use Ionic 1 if it is a mission critical
or complex application

16.
Ionic-2 Compotnents
checkout
Ionic-2 Compotnents
checkout
Going Into Ionic world

17.
Ionic 1Ionic 1
- npm install -g ionic
- ionic start myproject
- adding platform
- adding plugings etc
Building for iOSBuilding for iOS
-ionic platform add ios
Building for AndroidBuilding for Android
- ionic platform add android
Ionic 1Ionic 1
- npm install -g ionic
- ionic start myproject
- adding platform
- adding plugings etc
Building for iOSBuilding for iOS
-ionic platform add ios
Building for AndroidBuilding for Android
- ionic platform add android
Quick Start
The default templates name are below:
● tabs (Default)
● sidemenu
● maps
● salesforce
● tests
● complex-list
● blank
Ionic 2Ionic 2
- npm install -g ionic@beta
- ionic start cutePuppyPics –v2 --ts
- cd cutePuppyPics
- ionic serve
Adding platforms is same...
Ionic 2Ionic 2
- npm install -g ionic@beta
- ionic start cutePuppyPics –v2 --ts
- cd cutePuppyPics
- ionic serve
Adding platforms is same...

18.
IONIC CREATORIONIC CREATORIONIC CREATORIONIC CREATOR
Ionic Designing Magic & Cloud
IONIC APPSIONIC APPS

19.
Today, most hybrid mobile applications leverage Apache Cordova.
Ionic builds on top of Cordova
Apache Cordova takes care of packaging your HTML5 app as a native
app that can run in Android, iOS, and other platforms.
But if you simply take an existing website and package it as a mobile app
the result will look nothing like a native app: users will notice very quickly
that the styles and behaviours are pretty different.
Today, most hybrid mobile applications leverage Apache Cordova.
Ionic builds on top of Cordova
Apache Cordova takes care of packaging your HTML5 app as a native
app that can run in Android, iOS, and other platforms.
But if you simply take an existing website and package it as a mobile app
the result will look nothing like a native app: users will notice very quickly
that the styles and behaviours are pretty different.
Apache Cordova

20.
ngCordova comes with over 70 native Cordova plugins that you
can easily add to your Angular Cordova apps. Choose the plugin
you’d like to use from the menu, which will have information on
which plugin you need to install and an example of how to use it in
your Angular code.
Checkout : The game begins...
ngCordova comes with over 70 native Cordova plugins that you
can easily add to your Angular Cordova apps. Choose the plugin
you’d like to use from the menu, which will have information on
which plugin you need to install and an example of how to use it in
your Angular code.
Checkout : The game begins...
Into Cordova

21.
References
● Knoldus Blog [Offcial]
● Telerik Documentation [Official]
● Cordova Documentation [Official]
● Ionic Framework Documentation [Official]

22.
Presenter
nikhil@knoldus.com
Presenter
nikhil@knoldus.com
Organizer
@Knolspeak
http://www.knoldus.com
http://blog.knoldus.com
Organizer
@Knolspeak
http://www.knoldus.com
http://blog.knoldus.com
Thanks