sf cordova meetup

Cordova development with AngularJS… and UI component libraries

Me● Andreas Argelius● From Sweden● Living in Japan● Loves food and beer

Me● Works for Asial Corporation● Developer on Onsen UI

… so I might be slightly biased towards AngularJS and Onsen UI

CordovaHybrid apps using web technologies.

Java Objective-C

SPA (Single Page Application)The whole app in one HTML file

● No page reload● Manipulate DOM with JavaScript● Load content dynamically

More fluid and “native” feel.

SPA Frameworks

AngularJS● Client-side framework● Separates DOM manipulation from logic● Two-way data binding

AngularJS - featuresServicesObjects that can be inserted in various places through dependency injection.

DirectivesDefine reusable custom HTML tags, attributes or classes.

ControllersControl application state.

ServicesSubstitutable objects that can be used throughout your application.

What can we use services for? ● Data storage, e.g. database models● Calling APIs (both local and external)

Services - examplevar module = angular.module('myServices', []);

module.factory('$myService', function() {

return {

doSomething: function() {

// Do stuff!

}

};

});

Dependency injectionInject dependencies into controllers, directives and services

var app = angular.module('myApp', ['myServices']);

app.controller('MyController', function($myService) {

$myService.doSomething();

});

Services - substitutable● Services should be substitutable by a service

with same API.● Use promises even if without async calls in

service.

If you switch from localStorage to some remote storage the service will be substitutable if you used promises for the original version, even if localStorage isn’t asynchronous.

Reasons for using services● Promotes modular design● Data abstraction● Consistency

Don’t repeat yourself!

Services are singleton instances

Only initialized once (lazily)

Services in CordovaPossible usage in Cordova development:

Angularize native APIsWrap API calls in AngularJS services

Example - GeoLocationangular.module('app.services', []).

factory('$geolocation', function($q) {

return {

get: function() {

var deferred = $q.defer();

...

return deferred.promise;

}

};

});

Example - GeoLocationangular.module('app', ['app.services']).

controller('PositionController', function($scope, $geolocation) {

$geolocation.get().then(function(position) {

$scope.currentPosition = position;

},

function(error) {

// Handle error.

})

}); https://gist.github.com/argelius/2ecf0b7c08f31a11eaff

ngCordova● Camera, GeoLocation, Accelerometer, etc.● AngularJS services● Uses $q promises

github.com/driftyco/ng-cordova

Example - GeoLocationangular.module('app', ['ngCordova']).

controller('LocationController', function($cordovaGeolocation) {

$cordovaGeolocation.

getCurrentPosition().

then(function(position) {

// Do stuff.

}, ...);

});

ngTouchTouch events and helpers.

● Attribues: ng-click, ng-swipe-left, ng-swipe-right

● $swipe service, to capture touch events.

ngTouchPart of standard library

<script src=”angular-touch.js”></script><script> angular.module('app', ['ngTouch']);

</script>

ngClick<button ng-click=”doSomething()”> Click me!</button>

Replaces regular ng-click. Mobile browsers introduce a 300ms delay. ngTouch removes delay.

Swipe handlers<div ng-controller=”CarouselCtrl” ng-swipe-left=”next()”ng-swipe-right=”prev()”>...

</div>

$swipe serviceOnly one method: $swipe.bind()

$swipe.bind({

start: function(e) {

// listens for 'mousedown' or 'touchstart'

console.log('You tapped (' + e.x + ',' + e.y + ')');

}

// also 'move', 'end' and 'cancel'.

}

Directives● Attach a behavior or change a DOM element● Create custom tags, attributes or classes● Allows for cleaner markup

Using:

module.directive( 'myDirective', function($dep1, $dep2) {

...

});

Directives - exampleangular.module('app', [])

.directive('myOwnToolbar', function() {

return {

restrict: 'E'

// Lots of options that control

// the behavior of the directive.

};

});

Directives - exampleUse it in your markup:

<my-own-toolbar> My very own application! </my-own-toolbar>

Memory leaksYour directives may leak, be careful!

Be nice to the garbage collector.

Memory leaksIf an object owns a reference to the DOM element, you must remove it when the directive is removed from the DOM.

scope.$on('$destroy', function() {

this._element = null;

}.bind(this));

Also remove event listeners!

Memory leaks

● Mobile devices have less memory than desktop computers

● Hybrid apps may be open for a very long time● Even a small memory leak may be disastrous!

Chrome TimelineDetect memory leaks. Compare state before and after leaking action.

Number of nodes should be same when returning to original state.

Directives in CordovaNice way to use directives in Cordova:

● Emulate native UI components to make users feel at home.

● Utilize native APIs directly from the markup.

Native app components● Page navigation● Tab bar● Toolbar● List view

Cordova apps shouldn’t feel like web applications!

UI components

Lots of other frameworks also available:http://propertycross.com/

Built on top of Angular● Ionic and Onsen use AngularJS to create

custom tags.● Natural to write the app using AngularJS since

it’s already loaded.

Onsen UI ng-modelIntegrates with AngularJS

<ons-switch ng-model=”switchState”></ons-switch>

<p>State is: {{ switchState }}</p>

Onsen UI ng-modelWorks like a checkbox:

Components example● Sample Sushifinder app● Gets position with $geolocation service we

created before● Asks foursquare API for nearby sushi

restaurants

https://github.com/argelius/ionic-sushifinder

Sushifinder - Ionic

Ionic<ion-navbar>

...

</ion-navbar>

Ionic

<ion-list>

<ion-item>

...

</ion-item>

...

</ion-list>

Ionic

<ion-tabs>

<ion-tab

icon=”icon ion-search” ></ion-tab>

...

</ion-tabs>

Onsen UI<ons-toolbar>

...

</ons-toolbar>

Onsen UI

<ons-list>

<ons-list-item modifier= ”chevron”>

...

</ons-list-item>

</ons-list>

Onsen UI

<ons-tabbar>

<ons-tabbar-item page= ”find.html”>

</ons-tabbar-item>

...

</ons-tabbar>

Thank you for listening!