Learn how to build your own native iOS & android apps with no knowledge of objective C, Swift, or Java. We introduce you to the Ionic framework which harnesses the power of Angular and Cordova to build native apps. Hosted by @SBAngular and @soltran.

1. Introduction to Ionic
Santa Barbara AngularJS
Meetup
January 15, 2015
Santa Barbara AngularJS, Sol Tran

2. Thank you to our sponsor for hosting

3. http://bit.ly/sbangular1
Follow us on
Twitter
SB AngularJS:
@SbAngular
Organizer:
Sol Tran, @soltran
Lead Software Engineer at
@ShipHawk

4. Introductions!

5. TABLE of CONTENTS
• What is Ionic?
• Benefits of Ionic
• Ionic tools

6. 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

7. Why Ionic?
• Platform Independent
• HTML5, CSS3 & JS
• Rapid iteration and development
• Direct access to native APIs with Cordova

8. 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

9. 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

10. How does it come together?
Your App
Ionic
AngularJs
WebView (Cordova)
Native SDK

11. 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

12. Ionicons!

13. 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

14. Ionic Creator
• https://creator.ionic.io/
• Great for prototyping, setting up

15. 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

16. 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

17. Resources
• Ng-cordova http://ngcordova.com/
• http://learn.ionicframework.com/resources
/

18. Next AngularJS Meetup

19. http://bit.ly/sbangular1
Follow us
SB AngularJS: @SbAngular
Organizer:
Sol Tran, @soltran
Lead Software Engineer at @ShipHawk