Mobile Development with PhoneGap

50 %
50 %
Information about Mobile Development with PhoneGap

Published on September 28, 2014

Author: JoshuaJohnson8



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.

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 View slide

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 View slide

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



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

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

Add a comment

Related presentations

Speaker: Matt Stine Developing for the Cloud Track Marc Andressen has famou...

This presentation explains how to develop a Web API in Java using (JAX-RS or Restl...

1 App,

1 App,

November 10, 2014

How to bring innovation to your organization by streamlining the deployment proces...

Cisco Call-control solutions can handle voice, video and data

Nathan Sharp of Siemens Energy recently spoke at the SAP Project Management in Atl...

Related pages


Create your app with PhoneGap. Reuse existing web development skills to quickly make ... PhoneGap Developer. Use our mobile app to connect your ...
Read more

Products - PhoneGap

Products. We've got something ... PhoneGap makes mobile app development accessible to thousands of web developers. We have great community support, ...
Read more

Apache Cordova - Wikipedia, the free encyclopedia

Apache Cordova (formerly PhoneGap) is a popular mobile application development framework originally created by Nitobi. Adobe Systems purchased Nitobi in ...
Read more

PhoneGap – Wikipedia

PhoneGap ist ein Framework zur Erstellung hybrider Applikationen für mobile Endgeräte. PhoneGap wurde ursprünglich von der Firma Nitobi produziert ...
Read more

PhoneGap Mobile Apps Development - Biztech Consultancy

Get startling and mission-critical mobile applications, leveraging PhoneGap application development services offered by Biztech Consultancy.
Read more

Day 10: PhoneGap -- Mobile Development for the Dummies ...

PhoneGap is a tool for creating cross-platform mobile applications using web technologies such as HTML ,CSS, JavaScript. Here's how.
Read more

PhoneGap Development | PhoneGap Services - Appnovation

Appnovation utilizes PhoneGap development, in conjunction with HTML5, CSS3 and JavaScript, to create mobile apps. Our PhoneGap developers have significant ...
Read more

Phonegap App Spezialist, Phonegap App Entwicklung,

Wir sind ein IT Outsourcing Unternehmen mit Sitz in Indien. Wir sind spezialisiert auf PhoneGap App Entwicklung.
Read more

PhoneGap Documentation | PhoneGap Docs

PhoneGap Documentation. ... We're working on putting together a comprehensive resource that covers all things PhoneGap and mobile app development ...
Read more

Mobile app development and management platform | AEM ...

Adobe Experience Manager Mobile (AEM Mobile) is an application development and management platform that helps you create mobile apps for all devices.
Read more