1. Cross Platform Mobile Apps with the Ionic Framework SoCal
Code Camp - 15 November 2014 Troy Miles
2. Troy Miles Over 30 years of programming experience Blog:
http://therockncoder.blogspot.com/ Twitter: @therockncoder Email:
[email protected] GitHub: https://github.com/Rockncoder
3. Questions What is the Ionic Framework? Are people actually
using it? What should I know? What is the easiest way to get
started? Whats building an app like?
4. What is the Ionic Framework?
5. The Ionic Framework? Combines Apache Cordova with Google's
AngularJS along with lots custom JavaScript, HTML, and CSS3 to
create purpose built mobile apps which perform like native ones and
look beautiful
6. Supported Devices iOS 6+ Android 4+ Windows Phone 8+
(coming) FireFox OS (coming)
7. Drifty Co. Founded in 2012 by Ben Sperry (CEO) and Max Lynch
(CTO) Based in Madison, WI Creators of Codiqa, JetStrap, and Ionic
Raised $1 million from Arthur Ventures earlier this year
8. Cordova PhoneGap started at 2008 iPhoneDevCamp by Nitobi
2011 Nitobi acquired by Adobe Donated to Apache Foundation in 2011
Known as Apache Cordova But pronounced PhoneGap
9. Cordova Uses web technologies to build mobile apps The apps
have access to device hardware from JavaScript The web les are
hosted in the app Apps are portable to other systems with little to
no changes Apps are packaged using platform SDKs Cordova does not
include a UI framework
10. AngularJS Created by Miko Hevery and Adam Abrons in 2009
JavaScript MVC 106 kb production version (minimized, not gzipped)
Declarative programming for UI Imperative programming for business
logic
11. AngularJS Key Features Two Way Data-binding Model View
Controller Dependency Injection Deep Linking HTML Templates
Directives Testability
14. AngularJS vs other JS MVC Backbone.js Ember.js Knockout
AngularJS
15. Text Google Trends of JS MVC BackboneJS, EmberJS, and
KnockoutJS
16. Text How popular is AngularJS?
17. Are people actually using it?
18. Mallzee Replaced their hand built PhoneGap app with Ionic
in May Excellent UI
19. Songhop The fastest way to nd new music 5 star rated iPhone
only
20. Keychain Like Uber for trucks iOS and Android version
Scrapped prior version built with PhoneGap
21. Sworkit Created by Ryan Hanna alone Featured in the Health
and Fitness section of the App Store Downloaded over 3 million
times in the App Store, Google Play and Amazon Store
22. What should I know?
23. Modern Web Skills HTML 5 / CSS 3 / JavaScript Comfortable
with command line tools AngularJS Sass (optional)
24. The US Market Android has 61.9% iOS has 32.5% That leaves
less than 6% for everyone else
25. Prerequisites Java SDK 6 or 7 Android SDK + Eclipse/Android
Studio Node / NPM Cordova Gulp Ionic
26. Why do I need Node? Node apps are built in JavaScript
JavaScript runs on all platforms Node comes bundled with NPM, Node
Package Manager It makes installing, running, and updating tools
easy Hence Node is a popular way to ship tools
27. Is there an easier way?
28. The Ionic Box Install VirtualBox, its free and available
for most platforms Install Vagrant, its free too Install the Ionic
Box
31. Workow ionic serve Google Chrome mobile emulator iOS
Simulator / Android Emulator / Genymotion iOS / Android device
32. Ionicons http://ionicons.com/ Can search from website Can
easily change size free & open source
33. ngCordova Cordova has a lot of available plugins Plugins
give access to the machine functions ngCordova "Angularizes"
plugins for ready use You are always free to write your own wrapper
code
34. What about tablets? Ionic supports responsive design Side
menu supports split view Components like Cards also work well in
both formats
35. Demo Time
36. Summary Ionic makes mobile development easier but not easy
Allows use of web skills Installation is still a challenge Not yet
1.0 release, but close