“Introduction to Ionic 2 with Angular 2”. That covered the differences between Ionic 1 and Ionic 2, As Ionic 2 is best compatible with Angular 2 (typescript) so some of the commands and components also discussed in this session.
Software Project Health Check: Best Practices and Techniques for Your Product...
Ionic 2 with Angular 2
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
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
(You can think of the WebView as a chromeless browser window that’s typically configured to run fullscreen.)
This enables them to access device capabilities such as the accelerometer, camera, contacts, and more. These are capabilities that are often restricted to access from inside mobile browsers.
Today, Ionic powers over 1.5 million mobile apps and websites (and even some desktop apps!), built by small startups up to Fortune 50 companies. Ionic developers come from hundreds of countries around the world
which is completely separate to the www folder which contains the code that is actually served to the browser. When you run an Ionic 2 application, the code in the app folder is automatically transpiled and bundled into a single Javascript file which is copied into the www folder and served. For the most part, you don’t have to touch your index.html file at all.
I prefer this to Ionic 1 where you would have to import all of the Javascript files you’ve created into your index.html file, and this also meant that your final built application would contain bunch of different Javascript files (your source code). Although the Ionic 2 bundled code isn’t minified or obfuscated automatically, I like that by default the built application won’t contain the source code directly (just the single, transpiled Javascript file, which looks pretty funky and hard to reverse engineer). This does however make debugging a little trickier, which is about the only thing I prefer about Ionic 1 so far.
accelerometer, camera, contacts, and more
Apache Cordova originally started as a project named PhoneGap. These days, PhoneGap exists as a distribution of Apache Cordova that includes additional tools.