What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework. With Ionic you build mobile apps using the web technology you already know. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps. Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which uses responsive design to change its look based on the device's screen dimensions. In this session, we will build an app together to show many of Ionic's major features including CollectionRepeat, UI Widgets, Modals, and Slide Boxes. We will also discuss development workflow, debugging and which tools we use.

1. Cross Platform Mobile Apps
with the Ionic Framework
Mobile+Web DevCon
3 February 2015 - San Francisco CA

2. Troy Miles
Over 35 years of programming experience
Blog: http://therockncoder.blogspot.com/
Twitter: @therockncoder
Email: rockncoder@gmail.com
GitHub: https://github.com/Rockncoder

3. Agenda
AngularJS
Cordova
The Ionic Framework
Build a simple app
Resources
Summary

4. –the rockncoder
“If you want bring a WiFi systems to its knees, bring
a bunch of techies and all of their toys together in
one spot.”

5. Conference Limitations
Internet access at most conferences is limited
The app uses internal data stored in JSON files
Google Maps is also turned off
We will work in the browser only
https://github.com/Rockncoder/ionic-coffee

6. AngularJS
Created by Miško Hevery and
Adam Abrons in 2009
JavaScript MVC
106 kb production version
(minimized, not gzipped)
Declarative programming for
UI
Imperative programming for
business logic

7. AngularJS Key Features
Model View Controller (MVC)
Data Binding
HTML Templates
Dependency Injection
Deep Linking
Directives

8. Model View Controller
Uses MVC
The goal is clear separation of concerns
The model is only concerned with data
The view presents the data to the user
The controller applies the business logic

9. Data Binding
In Angular, data binding is built into the framework
Replaces text content of HTML element with the value
of the expression
{{ expression }}
<ANY ng-bind=“expression”>…</ANY>
<ANY class=“ng-bind: expression;”>…</ANY>

10. HTML Templates
No client side templating engine
Angular uses HTML as its templating engine
No extra markup, no extra libraries
Designers & developers rejoice

11. Dependency Injection
A software design pattern deals with how components
resolve their dependencies
Pervasive throughout Angular
Allows for easier testing
Allows for easier swapping of components

12. Deep Linking
Deep Linking enables a website to restore state from a
URL
URL and bookmarks are key part of the web
Early Single Page Apps lacked deep linking, they broke
SEO and user expectation

13. Directives
“The coolest feature of AngularJS” - Misko Hervey
Attach behavior to DOM elements
Cleaner way to do DOM manipulations
Can nearly turn HTML into a DSL

14. Cordova
2009: 1st developed at an
iPhoneDevCamp event
2009: Developers form a
company, Nitobi
2011: Adobe acquires Nitobi
2011: Adobe open sources
PhoneGap project to Apache
2012: Apache gives the
project the name Cordova

15. Cordova platforms
Adobe PhoneGap
IBM Worklight
Telerik Platform
The Ionic Framework
and still others

16. Cordova CLI
Global commands
help - display help text or help for a specific
command
create - creates a project
Project commands

17. Project Commands
info
platform
plugin
prepare
compile
run
serve
build
emulate

18. Why not just Cordova?
No native look or feel - only HTML
No programming framework - only JS
Cordova is generalized not optimized

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

20. The Ionic Framework
Ionic is both a CSS framework and a Javascript UI
library
Many components need JavaScript
But often components can be used without coding
Use a View Controller pattern like Cocoa Touch

21. Supported Devices
iOS 6+
Android 4+

22. Why is Ionic fast?
No jQuery
Minimal DOM manipulation
Hardware accelerated transitions

23. Mallzee
Replaced their hand
built PhoneGap app with
Ionic in May
Excellent UI

24. Songhop
The fastest way to find
new music
5 star rated
iPhone only

25. Keychain
Like Uber for trucks
iOS and Android version
Scrapped prior version
built with PhoneGap

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

27. Ionic starter templates
blank
tabs
sidemenu

29. The side menu
Used by lots of apps since it uses minimal screen real
estate
The “hamburger”, menu toggle can be position on the
left or right of the screen
This is the base UI our app will use

30. Hello Ionic World
1. ionic start coffee sidemenu
2. cd coffee
3. ionic serve

32. Project directory
hooks - a place to customize the cordova build
platforms - project directories for native code
plugins - your apps cordova plugins
scss - customizable SASS files
www - your application

34. Plugins
As of version 3.0 Cordova is implemented mainly as a
collection of plugins surrounding a small core
Plugins are implemented in native code and/or
JavaScript
Without plugins your application can’t communicate
with the device’s hardware
Over 600 plugins currently available

35. Installing/Removing Plugins
Find plugins at: http://plugins.cordova.io/
ionic plugin add org.apache.cordova.device
ionic plugin remove org.apache.cordova.device
Ionic includes 3 essential plugins: console, device, &
keyboard
Plugins not available until after $ionicPlatform.ready

36. Plugin Anatomy
Documentation: doc/index.md
Native code in src directory
JavaScript in www directory

37. Using a Plugin
Remember: You must wait for the ready event
Read the plugin’s documentation
Implement the functionality according to docs
Best practice: Sniff for the property before use

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

39. config.xml
the configuration file for your app
contains the app names, for computers and humans
version number
settings
resources

40. A few commands
start - creates a new project
help - detailed help information
resources - create native device splash/icons
emulate - runs project on emulator after build
platform - adds support for a native platform
serve - runs project on default web browser

41. Debugging First Look
We will use the debugger in Chrome
For Android devices, Chrome is your best friend
menu -> More tools -> Inspect Devices
For iOS devices, Safari is your best friend
Preferences -> Advanced -> Show develop

42. Controllers
most of your code will be in controllers, services, or
directives
controllers act as the glue between the model and the
view
controllers can use a context call $scope is use to pass
data to and from the view

43. Controller sample
(function () {
'use strict';
angular.module('HelloApp')
.controller('SearchController', ['$scope', '$cordovaGeolocation',
function ($scope, $cordovaGeolocation) {
console.log("SearchController launching");
$scope.showingListings = false;
$scope.showingMap = true;
$scope.showingSearch = false;
var activeDisplay = "showingMap";
$scope.setDisplay = function (nextState) {
$scope.showingListings = false;
$scope.showingMap = false;
$scope.showingSearch = false;
$scope[nextState] = true;
if (nextState !== "showingSearch") {
activeDisplay = nextState;
}
};
}]);
}());

44. View
ion-view is the root of a page
it contains headers, footers, and content tags
headers and footers are optional

45. Headers
Ionic supports two kinds of header bars: ion-header-
bar & ion-nav-bar
Outwardly they look identical, but their markup is
different, as is the function
ion-header-bar is only markup
ion-nav-bar ties into ui-router and updates itself based
on the router state

46. ui-router
the native router for AngularJS is ngRoute
Ionic instead uses the open source ui-router
ui-router is more flexible and capable than ngRoute

47. Content
ion-content is used to hold the pages content
it can scroll its content to reveal more that a screen’s
worth at a time
pull to refresh and infinite scroll objects go here

48. Services
Substitutable objects that are wired together using DI
Used to organize and share code across app
Only instantiated when an app component depends on
it
Singletons
Built-in services always start with “$”

49. Time to write code…

50. Housekeeping
At some point in the app lifecycle, you may wish to
update Ionic or one of the plugins
Update Ionic: sudo npm update -g ionic
Update a plugin: remove it and add it back
BE CAREFUL - Newer versions may break your app

51. Ionicons
http://ionicons.com/
Can search from
website
Can easily change size
free & open source

52. Resources
https://angularjs.org/
http://cordova.apache.org/
http://ionicframework.com/
http://plugins.cordova.io/
http://ngcordova.com/
http://learn.ionicframework.com/
http://www.ng-newsletter.com/posts/angular-ui-router.html

53. Code and Slides
https://github.com/Rockncoder/coffee-ni
https://github.com/Rockncoder/ionic-coffee
http://www.slideshare.net/rockncoder/cross-44135208

54. Summary
Cordova is a platform which allows for the building of
mobile apps using web technologies
Ionic builds on top of that by providing a good looking
performance driven UI and better developer tools
Ionic uses AngularJS as its MVC framework

55. Please rate this talk!
http://spkr8.com/t/43731