Thanks to all of you who attended my “Architecting a PhoneGap Application” TechLive session on Tuesday, and thanks also for the great feedback. The recording is available here. A lot of my content was based on my PhoneGap Tutorial available here.
As promised, here are answers to the questions I didn’t have time to answer on Tuesday:
Q: I built an app using PhoneGap, jQuery, and LESS. There is a delay before the app responds to a button click.
A: After you tap a button, mobile browsers wait for about 300ms before they fire the click event. This is to make sure you are actually not performing a double tap. One simple solution is to use the touchend event instead of click. But there are two issues with that approach:
- You have to change your code (replacing click with touchend), and touchend will not work when testing your app in the browser on your development machine.
- Adding logic to the touchend event could interfere with other touch interactions (like scrolling).
These two problems can be overcome by adding contextual logic to your event handlers. But before you reinvent the wheel, take a look at existing libraries that already address this problem. Fastclick.js is a good place to start. This Google Developers document is also a great resource to better understand the problem and the solution.
Q: Will phonegap support upcoming mobile OSs Tizen & Mozilla mobile?
A: Yes. Click the links below for more info:
Q: How does one solve the problem of getting client approval for iOS devices without the issues of gathering their UDID for provisioning profiles?
A: That’s the Apple process and there is really nothing we can do here. PhoneGap Build can make it easier to distribute your app to beta testers during development, but you still need to get the UDID of their devices.
Q: What kind of tips would you recommend for creating a responsive layout? I already know about media queries and I used a fittext.js for scaling the text within a div .
A: Take a look at Adobe Edge Reflow, a new Responsive Web Design tool (currently in preview).
Q: How do you stop the tap-and-hold on a link which makes a flyout menu to open to browser/copy in iOS.
Q: Now that I have a PhoneGap app build for iOS, how can I send it to my client for testing? In Android, I just have to send him the APK file, how about in iOS ?
A: You need to sign up for the Apple Developer Program. Then you have to create an Apple developer certificate, and an application provisioning profile that includes the UDID of your client devices.
Q: How can I get a link to the recording of this session when it’s over?
A: It’s available here.
Q: I was told that the Facebook iPhone app was built using PhoneGap … can anyone confirm that?
A: The current Facebook app on iOS is native
Q: What is a good library for page transitions and page handling in general if not jQuery Mobile?
A: Page transitions are really easy to implement with a few lines of CSS. Take a look at Part 13 in the PhoneGap Tutorial. For architectural frameworks, take a look at Backbone.js, Angular.js, Ember.js, and others.
Q: Will the sample code be in GIT?
A: Yes it is available here.
Q: Which is preferable, draw buttons with gradients or just load a PNG file?
A: This may vary depending on the platform. There doesn’t seem to be much of a difference on iOS, but Android (particularly older devices) sometimes struggles with rendering gradients.
Q: How does the App Store review process work? For native iOS apps there is a code review of any changes.
A: PhoneGap apps are native apps. They have a native shell that happens to render a lot of its content using HTML/JS/CSS. The review process is the same as for other iOS apps. The guidelines are available here. Apps are evaluated based on a range of criteria, including user interface design, functionality, content, and the use of specific technologies. As far as I know and based on my own experience submitting apps, a code review is not part of the process. Also based on my experience, the “use of specific technologies” means that if your app doesn’t make use of any device feature (like GPS, accelerometer, camera, contacts, local storage, device events, etc), Apple may consider that it would be better suited as a traditional web app delivered in the browser. PhoneGap obviously gives you access to all the device features, so you have all you need to build an app that complies with the guidelines.
Q: Christophe, can you please create or point us to a good tutorial, that uses the facebook plugin and do some typical things like connecting with facebook, posting something to the timeline? etc
A: That’s my next blog post :) ETA: next Monday.
Q: What is the proper sequence for loading .js files when using cordova.js and jquery/jquery-mobile?
A: Here is what I’m typically doing:
Q: Do I have to create different folders & config.xml for different devices with www/ or can I use the same code for all devices?
A: The easiest way to build is to use PhoneGap Build. In that case, you have a single directory structure with a single config.xml, and you don’t even have to download the PhoneGap SDK: The right cordova.js for each platform will be injected by PhoneGap build. If you don’t want to build in the cloud using PhoneGap Build, I recommend you take a look a the Command Line Tools Interface to create your project structure.
Q: Can I use PhoneGap build if using Cordova?
A: Yes, since the PhoneGap and Cordova libraries are the same. Just add:
… to your index.html page, and the right version of Cordova for each platform will be injected by PhoneGap build.
Q: If I have cordova.js before I send it into PhoneGap will it replace it in PhoneGap or am I running two .js files on PhoneGap build?
A: In the app you submit to PhoneGap build, you should just have this:
… and phonegap.js should actually not be present in the root folder. PhoneGap build will inject the right cordova.js for each platform.
Let me know if you have other questions.