SlideShare a Scribd company logo

Mobile Development with PhoneGap

•
•
Joshua Johnson
Joshua Johnson

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 of 18
Download to read offline
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
ABOUT ME Mobile Web Developer at GoDaddy Released iOS and Android Fantasy Football Apps with PhoneGap Passionate about new technology
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
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
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)
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
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)
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
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)
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
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
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
CONS Poor performance with graphic intensive applications, sorry games No pre-built UI components, transitions, standard controls Less community support than native development
PHONE
TABLET
RESOURCES PhoneGap AngularJS Grunt Bower Yeoman PhoneGap Build ngCordova Ionic Angular Modules Telerik
GODADDY Just starting development on domain search app with PhoneGap Always looking for great developers to join our team jojohnson@godaddy.com
QUESTIONS? Use #phxmobi as the twitter hashtag Download Phoenix Mobile Festival App from AppStore or Google Play

More Related Content

Mobile Development with PhoneGap

  • 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
  • 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