Hybrid Mobile Application Development
Starting > Ionic 2 & Angular 2
Nikhil Kumar | Software Consultant
Knldus Software LLP
Agenda
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
-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 platforms WebView.
-Today, most hybrid mobile applications leverage Apache
Cordova.
The Concept
What Why Where coming slides...
(You can think of the WebView as a chromeless browser window
thats 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.
Motivation 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
organizations. 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???
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?
Examples of Hybrid Applications
Insta
untappd
yelp
FitFyles
http://showcase.ionicframework.com/
Drifty: Ben Sperry and Max Lynch- 2012Ionic: 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 Apples iTunes,
Amazons Appstore and Google Play, has now raised an additional $2.6
million led by Lightbank in Chicago.
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
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
Ionic 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, lets jump into some specifics. Heres 5 reasons why I think
Ionic 2 is better than Ionic 1.
1- 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 wasnt 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 cant 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
3- 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) {
$stateProvider .state('intro', { url: '/', templateUrl:
'templates/intro.html', controller: 'IntroCtrl' }) .state('main', {
url: '/main', templateUrl: 'templates/main.html', controller:
'MainCtrl' });
$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);
4. Its Just Javascript
In Angular 1 and Ionic 1 there was a lot of framework specific
terminology and syntax to learn, but with Ionic 2 its basically
just plain old (or rather new) Javascript. Everything you build is
basically just ES6 (or TypeScript if you prefer) code, which isnt
specific to any framework. Its just Javascript.
The benefit of this is that everything you learn when building
Ionic 2 application isnt just going to help you build Ionic 2
applications, its 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.
5. 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.
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 dont
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 youve 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 isnt minified or obfuscated automatically,
I like that by default the built application wont 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.
Folder Structure
If youre not familiar with Ionic 2, its the latest incarnation
of Ionic the worlds most popular cross-platform mobile development
technology.
Summary of comparison
Without a doubt, I would recommend everybody switch to Ionic
2
- If youre completely new to Ionic, start with Ionic 2
- If youre using Ionic 1 for existing projects, stick with Ionic
1 and upgrade it later
- If youre using Ionic 1 and starting a new project, use Ionic 1
if it is a mission critical or complex application
Ionic-2 Compotnents
checkout
Going Into Ionic world
Ionic 1
- npm install -g ionic
- ionic start myproject
- adding platform
- adding plugings etc
Building for iOS
-ionic platform add ios
Building for Android
- ionic platform add android
Quick Start
The default templates name are below:
tabs (Default)
sidemenu
maps
salesforce
tests
complex-list
blank
Ionic 2
- npm install -g ionic@beta
- ionic start cutePuppyPics v2 --ts
- cd cutePuppyPics
- ionic serve
Adding platforms is same...
IONIC CREATOR
Ionic Designing Magic & Cloud
IONIC APPS
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
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.
ngCordova comes with over 70 native Cordova plugins that you can
easily add to your Angular Cordova apps. Choose the plugin youd
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
References
Knoldus Blog [Offcial]
Telerik Documentation [Official]
Cordova Documentation [Official]
Ionic Framework Documentation [Official]
Piyush Mishra
Presenter [email protected]
Organizer@Knolspeak
http://www.knoldus.comhttp://blog.knoldus.com
Thanks
