Building Mobile Apps with AngularJS and PhoneGap

About Me

@briantford | github.com/btford | briantford.com

• AngularJS at Google
• Co-author of AngularJS in Action
• <3 Open Source

  Thanks for having me!

This Talk

• 50% Intro to Angular
• 15% PhoneGap
• 34% Case Study
• 1% Unicorns

There's more to Angular and PhoneGap than I can cover in 45 minutes

Please ask questions and let me know your interests!

Story Time

You are writing an app.

You decide to write a web app.

Naturally, it should work on mobile.

You have some choices to make.

WTF is an AngularJS?

JavaScript framework

How many have heard of Angular? Used it?

Why AngularJS?

AngularJS is a great way to write web apps.

• Extensible
• Productive
• Great Community

Why AngularJS?

Features

• Two-way Data-binding
• Opinionated Architecture
• Reusable Components (Directives)

Why AngularJS?

Two way Data-binding

Why AngularJS?

Opinionated Architecture

Why AngularJS?

Reusable Components (Directives)

• Teach HTML new tricks

<date-picker date="11/12/13"></date-picker>

<carousel></carousel>

<google-map location="Amsterdam"></google-map>

Why AngularJS?

Community

• Components (see Bower)
• Guides, Tutorials, Blogs, etc.
  • Egghead.io
  • Yearofmoo
  • One Hungry Mind
  • My Blog
• Mailing List
• github.com/angular/angular.js

Why AngularJS?

Mobile Components

• Navigation | Demo
• FirefoxOS+AngularJS Boilerplate | Demo
• jQuery Mobile Adapter

WTF is a PhoneGap?

• Bundles web app into mobile app
• Gives bundled app access to browser APIs
• Set of build and deploy tools

PhoneGap vs Cordova

"PhoneGap is a distribution of Apache Cordova."

ok.

Why PhoneGap?

You are a web developer.

• You know:
  • HTML
  • CSS
  • JavaScript
• Too lazy busy to learn all native platforms
• You want to "write once, run everywhere"

Why PhoneGap?

Your web browser does not have access to:

• Camera
• Accelerometer
• Push Notifications
• And other cool phone features

:-(

PhoneGap APIs

What do they look like?

function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + '\n' +
          'Acceleration Y: ' + acceleration.y + '\n' +
          'Acceleration Z: ' + acceleration.z + '\n' +
          'Timestamp: '      + acceleration.timestamp + '\n');
};

function onError() {
  alert('onError!');
};

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

Yay JavaScript.

Case Study

"Hitch-a-Ride"

Open source, real-time carpooling/carsharing app.

For:

• Web
• Android

https://github.com/btford/hitch-a-ride

Demo Time

Case Study

"Hitch-a-Ride"

APIs:

• Push notifications (WebSockets + Google Cloud Messaging)
• Geolocation
• InAppBrowser for Authentication

Case Study

"Hitch-a-Ride"

Client:

• Yeoman
• Bootstrap
  • Bootswatch (theme)
• Google+ Sign-in

Server:

• Node.js
• Express
• Socket.IO

Pro-tips

Mobile vs Web Views

An Angular view consumes a scope

• Serve one HTML file for desktop, one for mobile
• Minimize HTTP requests, use less CSS, smaller images, etc

AngularJS Pro-tips

Dependency Injection

• "Don't call me, I'll call you"
• Not your grandpa's DI
  • No XML nonsense

AngularJS Pro-tips

Dependency Injection

Why is this useful?

• Replace Implementations
  • Useful for Optimization
• Decorators
  • Augment existing services (1337 h4x)
• Testing

Pro-tips

Watch your CSS

• Remove unused selectors
• Minimal Fancy Stuff
  • Gradients (use images)
  • Transparency

Pro-tips

Watch your HTML

• Minimal DOM
• Size images correctly

Pro-tips

Debugging

Use your Browser first.

Then use platform tools & these:

• Inspecting WebViews
• http://debug.phonegap.com/

Pro-tips

Targeting Different Platforms

How do you ensure the right scripts/resources go to the right place?

• Symlinks
• Tweak build scripts

Obligatory "No Silver Bullet" Slide

• Native look and feel
• Performance
• Debugging
• Testing (sort of)

Do what makes sense for your app

What's Next?

PhoneGap is a transitional tool.

Wouldn't it be nice to have this in-browser? And on all platforms?

FirefoxOS is a good start!

Questions?

Or ask me online:

• @briantford
• github.com/btford
• briantford.com

Thanks for coming!