Hybrid vs. Native app - Ionic Framework with AngularJS

The beautiful, open source framework for developing hybrid
mobile apps with HTML5
@Zvika Epstein

Overview
1. Native vs Hybrid Apps
2. Intro Ionic
3. UI Components
4. Ionic CLI

The Pros of a Native
● Performance - Full use of functionality and Hardware
- GPS, Contacts etc.
● Run on the device’s operating system.
● Fast graphics

The Downsides of a Native
● Proficiency in each platform required
● Entirely separate code bases
● Timely & expensive development

More Platforms. More Problems.
Why are we still coding for multiple platforms?

“Is there an alternative?”

Hybrid Apps!
● HTML5 that acts like native
● Web wrapped in native layer
● Direct access to native APIs
● Phonegap renamed to Cordova
● Familiar web dev environment
● Fast deployment
● Develop a single code base (web platform)

Cons of a Hybrid App
● Performance - extra layer between the source
code and the target mobile platform
● rely on a third party
● UI assets of iOS or Android

Apache Cordova is a platform for building native mobile
applications using HTML, CSS and Javascript

ngCordova Plugins
● Battery Status
● Calendar
● Camera
● Clipboard
● Contacts
● More plugins

So, how do we bridge the gap
between web and native?

● The ionic is an open source framework for developing
hybrid mobile applications using AngularJS, Sass and
Cordova.
● Ionic is the front-end framework.
● Ionic mainly uses Cordova to create, build, run and deploy
the mobile applications.
● Modeled off of native SDKs
● Performance - Hardware accelerated animations
What is Ionic?

Web Technologies You
Already Know and Love

Standing on the Shoulders of
AngularJS
● UI Components are AngularJS Directives
● Ready to work with your app

Native Focused
Modeled off of native SDKs
Built to work with Cordova

Performance Obsessed
Hardware accelerated animations
Minimal DOM Manipulation

“Ionic is Bootstrap for Native”
● Responsive - Ionic solves multiple device
resolution issues.
● Icons
● UI Components

Icons
Over 700 MIT licensed font-icons included ionicons.com

Lists
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
<a class="item" href="#">
Kit Kat
</a>
...
</div>

Tabs
<ion-tabs>
<ion-tab title="Home" icon="ion-home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-information">
<ion-nav-view name="about"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios7-world">
<ion-nav-view name="contact"></ion-nav-view>
</ion-tab>
</ion-tabs>

Complex Lists
● AngularJS Directive
● Buttons exposed by swiping
● Reorder
● Delete
<ion-list>
<ion-item ng-repeat="item in items"
class="item-thumbnail-left">
<img ng-src="{{ item.pic }}">
<h2>{{ item.name }}</h2>
<p>{{ item.quote }}</p>
</ion-item>
</ion-list>

Slide box
<ion-slide-box on-slide-changed="change(index)">
<ion-slide>
Slide 1
</ion-slide>
<ion-slide>
Slide 2
</ion-slide>
<ion-slide>
Slide 3
</ion-slide>
</ion-slide-box>

Pull to Refresh
<ion-content on-refresh="refreshData()">
<ion-refresher></ion-refresher>

</ion-content>

Ionic CLI
$ npm install -g ionic cordova
$ ionic start myapp sidemenu
$ cd myapp
$ ionic serve

Hybrid vs. Native app - Ionic Framework with AngularJS

More Related Content

What's hot

Similar to Hybrid vs. Native app - Ionic Framework with AngularJS

Recently uploaded

Hybrid vs. Native app - Ionic Framework with AngularJS