You can develop native mobile applications using HTML/CSS/JS with the help of PhoneGap. I will show you how to achieve the best possibe native experience using web technologies and optimize your workflow with automation.

1. MOBILE DEVELOPMENT WITH PHONEGAP
JOSHUA JOHNSON
WEB DEVELOPER, GODADDY
LinkedIn
1st&5
Use #phxmobi as the twitter hashtag
Download Phoenix Mobile Festival App from AppStore or
Google Play

2. ABOUT ME
Mobile Web Developer at GoDaddy
Released iOS and Android Fantasy Football Apps with
PhoneGap
Passionate about new technology

3. THE PROBLEM
You have an idea for an application but how do you get it to the
public on all platforms quickly?
Hiring for completely different skill sets
Time to deliver a new feature or redesign
Different look/feel across platforms

4. PHONEGAP TO THE RESCUE
Mobile development framework that allows you to create
cross platform mobile applications
HTML/CSS/JS
Created in 2009 by Nitobi
Purchased by Adobe in 2011
Cordova: free open source core of PhoneGap donated to
Apache
Single code base, unified look/feel, only need web developers
Perfect for emerging SPA JavaScript web frameworks
(AngularJS)
Growing community, new UI frameworks

5. HOW DOES IT WORK?
sudo npm install -g cordova
cordova create hello com.example.hello HelloWorld && cd hello
cordova platform add ios
cordova build ios
Wraps your application into a WebView for all platforms
JavaScript plugins that access native device features
config.xml to store details about the app (platform specific)
Packaged as apps using platform SDKs and distributed
through native methods
or (no SDKs necessary PhoneGap Build Telerik but not free)

6. WHY WEB OVER NATIVE?
Technologies are converging on web languages
Server code can now be written in JS (Node)
Easier to hire and build teams around one single technology
set

7. ANGULARJS
JavaScript framework that allows you to build single page web
applications
Largest community support among JavaScript frameworks
(Google)
The perfect match: index.html
Open source modules
Other alternatives (Ember, Knockout, Backbone, even jQuery)

8. PLUGINS
Open-source JavaScript plugins exposing native features
Examples: camera, geolocation, acceleromter, splashscreen,
storage
Build your own plugins
: wraps Cordova plugins in ngCordova AngularJS modules

9. BRIDGE THE UI GAP
Understand your tools and use good judgement
Hardware-accelerated CSS transitions (avoid jQuery)
Find a good UI Framework to mitigate the issues
Execute on a solid design with solid HTML/CSS/JS skills
config.xml: Control app behaviour (Fullscreen, Orientation,
DisallowOverscroll, etc)

10. TIPS/TRICKS
FastClick: remove 300ms delay
Disable pinch and zoom with meta tag
-webkit-overflow-scrolling: touch; Give it the smooth scrolling
feel
Make all your images 3x as big for new retina devices
Be mindful of application context (minimize HTTP calls)
Test on lots of real devices
Constant user feedback
Be careful with ng-repeat ( infinite scroll , bindonce
)
Chrome + Batarang to debug
Angular snap

11. AUTOMATION
GRUNT: JAVASCRIPT TASK RUNNER
Watch file changes, auto reload browser, run unit tests
JavaScript linting to keep code clean
Automatically build, minify, copy application files
BOWER: WEB PACKAGE MANAGER
Manage and version control all front end packages
Single command to add package
bower.json
YEOMAN: SCAFFOLD YOUR CODE
Scaffold new pages/features
Prescribe all the best practices and code structure
AngularJS, Combined with PhoneGap

12. UI FRAMEWORKS
Fully responsive, multiple devices, UI components at the ready
Bootstrap, AngularJS Bootstrap UI
(great examples of
directives): targeted for web apps but works
native mobile app components, built for AngularJS and
Ionic:
PhoneGap specifically
Works with any JS framework, similar to Ionic with
Onsen UI:
less support
Kendo UI
Font Awesome
jQuery Mobile: no, just no

13. CONS
Poor performance with graphic intensive applications, sorry
games
No pre-built UI components, transitions, standard controls
Less community support than native development

14. PHONE

15. TABLET

16. RESOURCES
PhoneGap
AngularJS
Grunt
Bower
Yeoman
PhoneGap Build
ngCordova
Ionic
Angular Modules
Telerik

17. GODADDY
Just starting development on domain search app with
PhoneGap
Always looking for great developers to join our team
jojohnson@godaddy.com

18. QUESTIONS?
Use #phxmobi as the twitter hashtag
Download Phoenix Mobile Festival App from AppStore or
Google Play