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

“I want a native app!”

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?

“Hello.”

● 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

UI Component Overview

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><!-- content -->

</ion-content>

Ionic CLI

$ npm install -g ionic cordova

$ ionic start myapp sidemenu

$ cd myapp

$ ionic serve

Thank You!