PhoneGap + AngularJS – Experiences from some serious experimenting...

View Github Repository Open presentation in a new window

mstaessen

See all presentation from mstaessen

PhoneGap + AngularJS – Experiences from some serious experimenting...

1 0

kss-20130703

Presentation for a Knowledge Sharing Session (KSS) about the combined use of PhoneGap and AngularJS

On Github mstaessen / kss-20130703

PhoneGap + AngularJS

Experiences from some serious experimenting...

http://mstaessen.github.io/kss-20130703

Michiel Staessen (@mstaessen)

Who am I?

Michiel Staessen

  • computer science graduate from KU Leuven
  • mobile and web enthusiast

Thesis...

  • ... about cross-platform mobile app development
  • ... in cooperation with Capgemini

Who knows PhoneGap?

Who has already used PhoneGap?

Who knows Apache Cordova?

Don't worry, they are just the same!

PhoneGap is a distribution of Cordova...

...just like Ubuntu is a distribution of the Linux OS

Cordova's Philosophy

Source: http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/

All platforms are different.

Yet, all platforms have a browser...

The web can solve cross-platform

However, the web is not a first class development platform

Cordova tries to polyfill these gaps

...until it can cease to exist

Cordova Architecture

Native Shell

WebView

Application

HTML5

CSS

JS

Plugin

Plugin

Plugin

Plugin

Cordova's Pros and Cons

  • Web development skill reuse
  • Platform support
  • Performance
  • Browser support
  • Look & Feel

Solving Look & Feel issue (opinion)

Do not mock native, it results in heavy scripting

The web deserves its own interface. [source]

My advise: use (and modify) great existing CSS libraries

Who knows AngularJS?

Who has already used AngularJS?

AngularJS enriches HTML declarations

AngularJS allows you to be more productive

AngularJS polyfills missing HTML functionality

AngularJS fits the Cordova philosophy

AngularJS in a nutshell

  • Developed at Google because of productivity frustration with Google Feedback project productivty
  • Reduced the project from 17k LOC and 18 man months...
  • ...to 1.5k LOC and 2 man weeks

How?

  • HTML syntax extensions(both attributes and top-level elements)
  • Templating
  • Bi-directional data-binding
  • Dependency-injection
  • "Putting everything back where it belongs"(content = HTML, style = CSS, behaviour = JavaScript)

Simple Demo

http://jsfiddle.net/E2WSv/1/

Elaborate Demo

https://github.com/mstaessen/photo-diary

Thank you!

Questions?

Resources