hybrid vs. native app - ionic framework with angularjs

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

Upload: zvika-epstein

Post on 22-Jan-2018

420 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Hybrid vs. Native app - Ionic Framework with AngularJS

The beautiful, open source framework for developing hybrid

mobile apps with HTML5

@Zvika Epstein

Page 2: Hybrid vs. Native app - Ionic Framework with AngularJS

Overview

1. Native vs Hybrid Apps

2. Intro Ionic

3. UI Components

4. Ionic CLI

Page 3: Hybrid vs. Native app - Ionic Framework with AngularJS

“I want a native app!”

Page 4: Hybrid vs. Native app - Ionic Framework with AngularJS

The Pros of a Native

● Performance - Full use of functionality and Hardware

- GPS, Contacts etc.

● Run on the device’s operating system.

● Fast graphics

Page 5: Hybrid vs. Native app - Ionic Framework with AngularJS

The Downsides of a Native

● Proficiency in each platform required

● Entirely separate code bases

● Timely & expensive development

Page 6: Hybrid vs. Native app - Ionic Framework with AngularJS

More Platforms. More Problems.

Why are we still coding for multiple platforms?

Page 7: Hybrid vs. Native app - Ionic Framework with AngularJS

“Is there an alternative?”

Page 8: Hybrid vs. Native app - Ionic Framework with AngularJS

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)

Page 9: Hybrid vs. Native app - Ionic Framework with AngularJS

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

Page 10: Hybrid vs. Native app - Ionic Framework with AngularJS

Apache Cordova is a platform for building native mobile

applications using HTML, CSS and Javascript

Page 11: Hybrid vs. Native app - Ionic Framework with AngularJS

ngCordova Plugins● Battery Status

● Calendar

● Camera

● Clipboard

● Contacts

● More plugins

Page 12: Hybrid vs. Native app - Ionic Framework with AngularJS

So, how do we bridge the gap

between web and native?

Page 13: Hybrid vs. Native app - Ionic Framework with AngularJS

“Hello.”

Page 14: Hybrid vs. Native app - Ionic Framework with AngularJS

● 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?

Page 15: Hybrid vs. Native app - Ionic Framework with AngularJS

Web Technologies You

Already Know and Love

Page 16: Hybrid vs. Native app - Ionic Framework with AngularJS

Standing on the Shoulders of

AngularJS

● UI Components are AngularJS Directives

● Ready to work with your app

Page 17: Hybrid vs. Native app - Ionic Framework with AngularJS

Native Focused

Modeled off of native SDKs

Built to work with Cordova

Page 18: Hybrid vs. Native app - Ionic Framework with AngularJS

Performance Obsessed

Hardware accelerated animations

Minimal DOM Manipulation

Page 19: Hybrid vs. Native app - Ionic Framework with AngularJS
Page 20: Hybrid vs. Native app - Ionic Framework with AngularJS

“Ionic is Bootstrap for Native”

● Responsive - Ionic solves multiple device

resolution issues.

● Icons

● UI Components

Page 21: Hybrid vs. Native app - Ionic Framework with AngularJS

Icons

Over 700 MIT licensed font-icons included ionicons.com

Page 22: Hybrid vs. Native app - Ionic Framework with AngularJS

UI Component Overview

Page 23: Hybrid vs. Native app - Ionic Framework with AngularJS

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>

Page 24: Hybrid vs. Native app - Ionic Framework with AngularJS

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>

Page 25: Hybrid vs. Native app - Ionic Framework with AngularJS

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>

Page 26: Hybrid vs. Native app - Ionic Framework with AngularJS

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>

Page 27: Hybrid vs. Native app - Ionic Framework with AngularJS

Pull to Refresh

<ion-content on-refresh="refreshData()"><ion-refresher></ion-refresher><!-- content -->

</ion-content>

Page 28: Hybrid vs. Native app - Ionic Framework with AngularJS

Ionic CLI

$ npm install -g ionic cordova

$ ionic start myapp sidemenu

$ cd myapp

$ ionic serve

Page 29: Hybrid vs. Native app - Ionic Framework with AngularJS

Thank You!