Introduction to Ionic

Santa Barbara AngularJSMeetup

January 15, 2015

Santa Barbara AngularJS, Sol Tran

Thank you to our sponsor for hosting

http://bit.ly/sbangular1

Follow us on

Twitter

SB AngularJS:

@SbAngular

Organizer:

Sol Tran, @soltran

Lead Software Engineer at

@ShipHawk

Introductions!

TABLE of CONTENTS

• What is Ionic?

• Benefits of Ionic

• Ionic tools

What is Ionic?

• Combines Apache Cordova with AngularJS along

with custom javascript, html, and css3

• Supported Devices include:

• iOS 6+

• Android 4+

• Windows Phone 8+

• FireFox OS

Why Ionic?

• Platform Independent

• HTML5, CSS3 & JS

• Rapid iteration and development

• Direct access to native APIs with Cordova

What is Cordova?

• Apache Cordova is a platform for building

native mobile apps using HTML, CSS,

and Javascript

• Timeline:

2009: PhoneGap started at Nitobi

2011: PhoneGap purchased by Adobe

2012: PhoneGap donated to Apache

And renamed as Cordova

Native Plugins Available

• ngCordova has over 63 native Cordova plugins

which can be added to Angular Cordova apps

• These include:

• Touch ID

• Oauth

• Camera

• Push Notifications

• Geolocation

• Progress indicator

• Flashlight

• Splash Screen

• Plus javascript libraries such as Ion Swipe Cards

How does it come together?

Your App

Ionic

AngularJs

WebView (Cordova)

Native SDK

Performance?

• Hardware accelerated animations• Minimal DOM Manipulation• Remove 300ms tap delay

Mobile Devices have improved!2010 iPhone 4, 1 GHz processor, 512 MB; iPhone 5S, 1.3 GHz dual-core, 1 GB Ram

Web Standards have improved!Caniuse.com looking mighty green

Plus performance is thought through

Ionicons!

So is Ionic Production Ready?

• http://showcase.ionicframework.com/

• KeyChain Logistics (Uber for trucks)

• Sworkit (Downloaded over 3 million times)

• Songhop

• 12,899+ stars

• 1.0 beta14 is out, with 1.0 coming out soon

• Ionic CLI averages 1,000 downloads/day

• Angular Material is being built by the Ionic

Team in conjunction with the Angular Team

Ionic Creator

• https://creator.ionic.io/

• Great for prototyping, setting up

Ionic View

https://itunes.apple.com/us/app/ionic-view/id849930087?mt=8

Tool that makes it fast and easy to test your ionic apps on the phone

When you app is ready, just type in your command line $ ionic upload

Demo Time

What you’ll need:

• Node / NPM

• Cordova

• Ionic

1. $ npm install –g cordova ionic

2. https://creator.ionic.io/ to start

prototyping your app

Resources

• Ng-cordova http://ngcordova.com/

• http://learn.ionicframework.com/resources

/

Next AngularJS Meetup

http://bit.ly/sbangular1

Follow us

SB AngularJS: @SbAngular

Organizer:

Sol Tran, @soltran

Lead Software Engineer at @ShipHawk