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
Elaborate Demo
https://github.com/mstaessen/photo-diary
