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: rockncoder@gmail.com 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

12. AngularJS HTML 1 2 3 4 5 AngularJS Datepicker 6 7 8 9 10 11 12 13 14 15 16 17
18 {{myText}} - {{currentDate}}

13. AngularJS JavaScript 1 "use strict"; 2 3 var app = angular.module('myApp', ['myApp.directives']); 4 5 app.controller('MainCtrl', ["$scope", function ($scope) { 6 $scope.myText = 'Not Selected'; 7 $scope.currentDate = ''; 8 $scope.updateMyText = function () { 9 $scope.myText = 'Selected'; 10 }; 11 $scope.start= 5; 12 $scope.stop = 95; 13 $scope.current = 5; 14 }]); 15 16 app.directive('timePicker', [function () { 17 var today = new Date(new Date().toDateString());

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

29. Whats building an app like?

30. Create ionic app ionic start myApp blank tabs sideMenu

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

37. Resources http://ionicframework.com/ http://ionicons.com/ http://cordova.apache.org/ https://angularjs.org/ http://ionicframework.com/blog/ionic-vagrant-android/ https://github.com/Rockncoder/

38. Text http://spkr8.com/t/39731 Please rate this talk!