Mobile Development with PhoneGap

MOBILE DEVELOPMENT WITH PHONEGAPJOSHUA JOHNSONWEB DEVELOPER, GODADDY

LinkedIn1st&5

Use #phxmobi as the twitter hashtag

Download Phoenix Mobile Festival App from AppStore orGoogle Play

ABOUT MEMobile Web Developer at GoDaddyReleased iOS and Android Fantasy Football Apps withPhoneGapPassionate about new technology

THE PROBLEMYou have an idea for an application but how do you get it to the

public on all platforms quickly?

Hiring for completely different skill setsTime to deliver a new feature or redesignDifferent look/feel across platforms

PHONEGAP TO THE RESCUEMobile development framework that allows you to createcross platform mobile applicationsHTML/CSS/JSCreated in 2009 by NitobiPurchased by Adobe in 2011Cordova: free open source core of PhoneGap donated toApacheSingle code base, unified look/feel, only need web developersPerfect 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 platformsJavaScript plugins that access native device featuresconfig.xml to store details about the app (platform specific)Packaged as apps using platform SDKs and distributedthrough native methods

or (no SDKs necessary but not free)PhoneGap Build Telerik

WHY WEB OVER NATIVE?Technologies are converging on web languagesServer code can now be written in JS (Node)Easier to hire and build teams around one single technologyset

ANGULARJSJavaScript framework that allows you to build single page webapplicationsLargest community support among JavaScript frameworks(Google)The perfect match: index.html

Other alternatives (Ember, Knockout, Backbone, even jQuery)Open source modules

PLUGINSOpen-source JavaScript plugins exposing native featuresExamples: camera, geolocation, acceleromter, splashscreen,storageBuild your own plugins

: wraps Cordova plugins in AngularJS modulesngCordova

BRIDGE THE UI GAPUnderstand your tools and use good judgementHardware-accelerated CSS transitions (avoid jQuery)Find a good UI Framework to mitigate the issuesExecute on a solid design with solid HTML/CSS/JS skillsconfig.xml: Control app behaviour (Fullscreen, Orientation,DisallowOverscroll, etc)

TIPS/TRICKSFastClick: remove 300ms delayDisable pinch and zoom with meta tag-webkit-overflow-scrolling: touch; Give it the smooth scrollingfeelMake all your images 3x as big for new retina devicesBe mindful of application context (minimize HTTP calls)Test on lots of real devicesConstant user feedbackBe careful with ng-repeat ( , )Chrome + Batarang to debug

infinite scroll bindonce

Angular snap

AUTOMATIONGRUNT: JAVASCRIPT TASK RUNNER

Watch file changes, auto reload browser, run unit testsJavaScript linting to keep code cleanAutomatically build, minify, copy application files

BOWER: WEB PACKAGE MANAGER

Manage and version control all front end packagesSingle command to add packagebower.json

YEOMAN: SCAFFOLD YOUR CODE

Scaffold new pages/featuresPrescribe all the best practices and code structure

, AngularJS Combined with PhoneGap

UI FRAMEWORKSFully responsive, multiple devices, UI components at the readyBootstrap, (great examples ofdirectives): targeted for web apps but works

native mobile app components, built for AngularJS andPhoneGap specifically

Works with any JS framework, similar to Ionic withless support

jQuery Mobile: no, just no

AngularJS Bootstrap UI

Ionic:

Onsen UI:

Kendo UIFont Awesome

CONSPoor performance with graphic intensive applications, sorrygamesNo pre-built UI components, transitions, standard controlsLess community support than native development

PHONE

TABLET

RESOURCESPhoneGapAngularJSGruntBowerYeomanPhoneGap BuildngCordovaIonicAngular ModulesTelerik

GODADDYJust starting development on domain search app withPhoneGapAlways looking for great developers to join our [email protected]

QUESTIONS?Use #phxmobi as the twitter hashtag

Download Phoenix Mobile Festival App from AppStore orGoogle Play