Transcript from Open Session On PhoneGap

Ray and I have just concluded another Adobe TechLive Open Session on PhoneGap.  These sessions are an opportunity for anyone to stop in and ask us questions.  Thanks to everyone who attended and submitted their questions.  We will be hosting more of these sessions in the future.

You can also download a transcript of this as a standard text file.

Answered Questions (39)

————————–

1. Steven Erat: I see that the Cordova project creation script lands some Jasmine Unit Testing code under {project}/www/spec/lib/jasmine1.2.0.  This implies Jasmine UT is baked in, yet I can’t find a definitive doc about getting started with UT for PhoneGap apps, with the exception of Adobe’s Fil Maj whose blog links some presentations he’s given about it. What would you recommend for unit testing PG apps? I’ve also found a blog on Ripple UT for PhoneGap.

* Raymo: As far as I know, the UTs that ship with Cordova are assuming you have your own test runner. I’m not necessarily sure we expect ‘regular’ folks (grin) to actually use them. To answer your second question about UTs and PG in genera, I think Jasmine would work great, and perhaps even Selenium. It isn’t something I’ve used yet myself (with PG), but I’d imagine it would work the same as a desktop web app. (Or near close enough.)

2. Shawn Flanagan: As a new PhoneGap user, I have found it rather difficult to get started. When I looked for tutorials, There are an abundance of them, but all for outdated versions that no longer have the same setup process (at least on OSX with Xcode). Are there any plans to release a standardized place to get the newest guides? The differences between installing 2.0 & 2.4 were quite large.

* Andrew Trice: There was definitely a change from 2.0 (and earlier) to the latest versions.  The getting started guides at http://docs.phonegap.com/en/2.4.0/guide_getting-started_index.md.html are all up to date.  However, we are still working on new guides for sites like Adobe Developer Connection.  We are also creating more sample projects to help developers get started building their first PhoneGap application (beyond the basic project setup).

3. liuliu: I think it’s a stupid question: I was able to change the content of the example file and install it on my mobile device. But I don’t know how to change the name of the app. Any ideas?

* Andrew Trice: If you are using PhoneGap Build, it is inside of config.xml.  If you are using Eclipse for Android, it is inside the AndroidMainfest.xml file.  If it is in Xcode, it is in your application’s .plist file (the name depends upon the name of your project).

4. Dustin: I’m new to Phonegap (and JS) — finding it difficult to determine the best fit for JS frameworks such as jQM, Angular, etc, for providing MVW, widgets, etc?  Suggestions on frameworks, things to think about?

* Raymo: Certainly if you have experience with a framework *outside* of PG, you may consider using it with PG as well. Not everything is going to be well suited for Mobile though. Personally, I recommend folks use the framework that works well for them. Like, I’m not a fan of Angular. Not because it isn’t a great framework, but because it doesn’t mesh well with my style. Let me know if that doesn’t make sense.

5. Andrés Garderes: I’ve been trying PhoneGap and it is great, but I see JS code a bit unscalable. how do you manage JS code scalability? Which would be a nice set of frameworks & tools to use alongside PhoneGap? (not asking about the best, something fairly nice)

* Andrew Trice: There are definitely ways to scale JS-based projects.  Frameworks like Angular.js, Backbone.js,  Knockout.js, and Sencha enable you to build complex MVC-style applications, which have lots of files, and lots of views.  Require.js also can be helpful for managing dependencies and memory scope of large scale applications.  We try not to tell everyone “you should use this”, because there are so many options.  However the libraries mentioned above would be a good starting point.

6. Shawn Flanagan: Are there any plans to remove the file size limit on uploading a ZIP to PhoneGap Build? 9.5mb seems a little small.

* Raymo: I am not aware of any plans, but I’d recommend asking on the Get Satisfaction board for it: http://community.phonegap.com/nitobi/products/nitobi_phonegap_build

7. Qian: Do you have some best practise for Calling the same method repeatly? For example, I’d like to show a progress bar on the web view to indicate the syncing progress

* Andrew Trice: I would use JavaScript’s setTimeout or setInterval methods to repeatedly invoke a status function until the synch process is complete.  If you are pushing data to a server in multiple requests, you can also update the progress bar whenever each request completes – this way you don’t need a loop.

8. Ken: I’m struggling to get the phoneGap soft keyboard plugin working in Android 4 – it works fine in Android 2.3.  I can find lots of example code, but like Shawn I find that it targets different versions of phonegap.  Can you recommend a good place (upto date) to get the soft keyboard plugin code from?

* Raymo: The best thing I can suggest Ken is to ping the plugin author directly via GitHub. Previously the PhoneGap github account hosted all plugins, but now we instead point to invidual authors’ accounts instead. Makes it easier (imo) to get support, etc.

9. Searchtool: I would like to use require.js (with cordova 2.4), have you some recommendations and/or links to advices? I don’t know really how to start

* Andrew Trice: There are getting started guides at http://requirejs.org/.  The basic requirejs configurations will work within PhoneGap applications, since all PhoneGap applications are running within a system web view.  In particular, check out http://requirejs.org/docs/start.html

* Andrew Trice: Also, check out: http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html

10. Steven Erat: Per Ray’s comment “I’m not necessarily sure we expect ‘regular’ folks to actually use [unit tests for PG]”…. Why not?  Do you mean that you don’t think developers would unit test their apps at all, or that they just wouldn’t be leveraging the jasmine templates that are in the projects?

* Raymo: I was speaking *just* about the UTs shipping in the PG project, not about tests you may want for your own applications.

* Andrew Trice: Also check this out: http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html

* Andrew Trice: whoops, wrong question… and i can’t delete it

11. MeetingAssistantApp.com: In your opinion, which Phonegap app is best and should be used as an example for developers?

* Andrew Trice: There are lots of great PhoneGap apps out there.  We are working on some samples to show people how to get started, and demonstrate best practices.   There are many of examples at: http://phonegap.com/app/  There are also many, many more apps that we unfortunately aren’t able to talk about b/c of NDA agreementss (some of you may use them every day, and don’t know its PhoneGap).  The key is to focus on a great user experience, and a development methodology that works for you and your development team.

12. Luke 2: Could you you please name main differences between webview and Safari/Android browsers? What should we be aware of when coding and testing in browser mostly?

* Raymo: From what I know: On iOS, the webviewer has JS performance turned downed a bit. Not sure about Android. To your second question: I do a *heck* of a lot of my PG work in the browser just because it is much quicker. I also use the Ripple emulator. You *must* do testing on devices obviously, but I can do a lot on the desktop – especially initially.

13. Raghu: I am a newbie. I see that there are some phonegap plugins for Facebook and  Twitter but why there is no plugins supported for Google plus? I wanted to integrate Google plus in my app but had a hard time finding a plugin for Google Plus. Do you have one for G+?

* Raymo: Last time I checked the G+ API was a read only API, not a ‘real’ API yet.

14. Urigo: Where can i find performance best practices with CSS and html that are specific to phonegap? also, how can i test performance in a phonegap application on the device?

* Raymo: Google. 🙂  I’ve seen some good blog posts, I just can’t recall them right now. One of the easiest tips though is to remember to use touch events vs click. I’ll try to gather some good links later today.

15. Raghu: @Raymo… So do you think it will be a ‘real’ API in the near future? Do you guys have any idea?

* Raymo: You would have to ask Google. 🙂 As much as I like them, they are very quiet about their plans.

16. vobu: I can’t get my head around why registering document.eventListener (eg for “offline”) is only possible outside onDeviceReady. Wouldn’t it be convenient to have the eventListeners inside onDeviceReady to make sure all phonegap libs are available?

* Raymo: I believe you are incorrect about that. I’m pretty sure I registered them in onDeviceReady. I’ve got a sample app that shows this. Ping me via email if you want a copy.

17. uttam: How to create app in phoneGap

* Raymo: Please see the Getting Started Guides: http://docs.phonegap.com/en/2.4.0/guide_getting-started_index.md.html#Getting%20Started%20Guides

18. Phillip Senn: Do you think I could scan a barcode using PhoneGap and the user’s camera?  I’d like it to populate an input field and click ‘submit’.

* Andrew Trice: Yes, you can do this.  There is an open source plugin for barcoding scanning available on github at: https://github.com/phonegap/phonegap-plugins   This is also supported by PhoneGap Build. You can read more detail about PhoneGap Build support here: https://build.phonegap.com/blog/barcodescanner-plugin

19. Searchtool: Is there a way to reduce the size of the (final) generate app ? (Xcode) – The default project has already a “significant” size (weight)

* Andrew Trice: Most of this size is actually in the splash screens for every resoltuion (including retina graphics).  You can reduce the quality of the splash screen images, and it will significnatly reduce the ipa file size.  Without the splash screens, the compiled ipa is only around 1 meg.

20. fredycc: Is it possible to obfuscate the code of my application, which method suggest?

* Raymo: I know you can find JS code obfuscators, but frankly, I would not rely on it for ‘protection’. IMO, your protection is your overall business logic, your IP, etc. If you can lose your business because someone can read your JS code, then you may have other problems. 😉 Don’t forget too that you can easily use AJAX from your PG apps. If you have some logic too sensitive for the client-side, move it to the server side instead. Obviously people can, and do, make a lot of money on the web.

21. Raghu: I have been using Jquery Mobile along with PhoneGap but I feel JM is quite slow when it is compared to Native apps. Does PhoneGap suggest a mobile framework that works well with it? How about Sencha Touch or any other? Any thoughts on this?

* Raymo: So I don’t think, “officially”, the PG team recommends any particular UI framework. That being saifd, they aren’t a fan of jQM: http://sintaxi.com/you-half-assed-it. I’m a fan of JQM and it has worked well for me in the past. One issue that seems to bug people the most is page transitions, and I simply recommend turning them off if if you find them not performant. (That can be done in about 2 lines of code in a JQM init file.)

22. Steven Erat: Are there any standards/frameworks for performance testing/benchmarking for PG apps? (Sorry, I haven’t yet done my homework on that)

* Andrew Trice: I am not aware of any frameworks for testing PhoneGap apps that are specific to PhoneGap.  Basically, the same tools for performance testing web apps will apply, since they are running inside of a web view.   For iOS, you can perform on-device profiling using Safari Developer Tools.

23. uttam: what are the applications that are already created in phonegap?

* Andrew Trice: You can seen many PhoneGap applications at: http://phonegap.com/app/

24. liuliu: I’m trying to build a simple adventure “find hidden objects” game with phonegap, do you know any good framework or plugin for games?

* Andrew Trice: Any HTML game framework will work.  You can use something as simple/basic as jQuery or Zepto, or more complex like impact.js.  There is a great listing of HTML5 game engines at: https://github.com/bebraw/jswiki/wiki/Game-engine-feature-matrix

25. Searchtool: someone talked about Unit Testing Code, could you remind us what is the principle/aim?

* Raymo: My answer is not PG specific, but in general. Steven Erat is an expert on this and could answer better. IMO, the basic idea behind UTs is to allow you to ensure that future changes don’t break old code. So imagine you add feature X to your project. How are you sure you didn’t break some old feature Y? A suite of tests can check all your features to ensure that you haven’t accidentally broken something in a new change. Again, this is a “Big Idea” type question and I probably didn’t do the best job answering it, but hopefully you get the basic idea.

26. Phil: When is PhoneGap Build going to support BlackBerry 10?

* Raymo: This is what I see from the Get Satisfaction site: http://community.phonegap.com/nitobi/topics/support_for_blackberry_10

27. Marlon Harrison: I’ve just started using PhoneGap and I’ve been disappointed with the perfromance via the JQuery Mobile framework. Are there tips to improve the performance?

* Raymo: I’ve found the biggest issue for folks is page transitions under Android. When it is an issue, you can simply turn them off. See the JQ docs for initialization options. It really is easy to do.

28. kamal: phonegap ios developer license????

* Andrew Trice: All iOS apps must use the iOS developer program and licensing/provisioning.  This is a requirement from Apple, not Adobe or the Cordova project.  You can read more about the licensing and provisioning here: https://developer.apple.com/devcenter/ios/index.action  If you are using PhoneGap Build, you can read more about the licensing/provisioning in PhoneGap Build here: https://build.phonegap.com/docs/ios-builds

29. Marlon Harrison: Are there great iPad-based PG examples that you can call out? I’ve looked through the showcase site and haven’t found any that really have anything remotely close to a native feel  responsive-wise

* Andrew Trice: Check out these apps:

Kooky  https://itunes.apple.com/us/app/kooky/id547565880?mt=8

Zombie Jombie: https://itunes.apple.com/us/app/zombie-jombie/id477401349?mt=8

Nokia Here Maps: https://itunes.apple.com/gb/app/here-maps/id577430143?mt=8

Wikipedia: https://itunes.apple.com/us/app/wikipedia-mobile/id324715238?mt=8

There are some other really great ones, but unfortunately we can’t talk about all of them  🙁

* Andrew Trice: Here are a few apps that I wrote specifically to show that you can create nice app-like experiences in phonegap apps-granted I don’t have massive downloads. or reviews

Lil’ Doodle (iOS):

https://itunes.apple.com/us/app/lil-doodle/id496228112?mt=8

I wrote this one just to show you can create very non-HTML-feeling experiences in PhoneGap apps.

Instant Halloween (iOS 5 stars, Android 5 stars)

https://itunes.apple.com/us/app/instant-halloween/id569882773?mt=8

https://play.google.com/store/apps/details?id=com.tricedesigns.InstantHalloween

Simple halloween themed sound effects app.

US Census Browser:

https://itunes.apple.com/us/app/census-browser/id483201717

https://play.google.com/store/apps/details?id=com.tricedesigns.CensusBrowser

Visualization of US Census data.

Fresh Food Finder:

https://itunes.apple.com/us/app/fresh-food-finder/id524261275?mt=8

https://play.google.com/store/apps/details?id=com.tricedesigns.FreshFood

Simple way to browse for farmers markets (data is US only, from the USDA).

30. Phil: Raymo, that blog post was actually by made, but there was no official response to my question from PhoneGap Build itself. That’s why I am asking again here, hoping to get an official response.

* Raymo: Yeah, I’m sorry I can’t give more info than that right now.

31. Raghu: Does PhoneGap allow us to access media files on a phone? For example, I want to access an mp3 file and would like to set it as an alarm.

* Raymo: Check the Media API docs. That would handle media. As for alarms, you don’t have access to change the phone’s default alarm. That may be possible via native code and a plugin, but there is no “simple” support. Obviously your app, if running, could fire off a MP3. Here is a plugin example for ios: https://github.com/DrewDahlman/Phonegap-LocalNotification

32. Searchtool: Sometimes I received (in Xcode) I received some “memory warning” –  Have you some recommendations or links – I tryed to use the Safari tools to understand what appends but it is not clear

* Andrew Trice: Memory is managed by the system web view, we don’t have control over how Safari manages memory.  However, you can use Safari’s Developer Tools for on-device memory profiling to see what is taking up memory inside of your PhoneGap app’s web view.  See details here: http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/OptimizingYourWebsite/OptimizingYourWebsite.html#//apple_ref/doc/uid/TP40007874-CH9-SW2  You can connect directly to the PhoneGap app running on a remote device for this profiling.  See details here: http://www.raymondcamden.com/index.cfm/2013/1/21/Did-you-know–Safari-Remote-Debugging-and-PhoneGap

33. Marlon Harrison: These seem great thanks very much for sharing Andrew. The showcase site is pretty difficult to traverse if you’re only looking for tablet apps

* Raymo: I’m going to ping our marketing person to see about possibly adding search/categories to that showcase. I think it makes sense.

34. Jeff: Do you have recommendations on using maps within phonegap?  I’ve used Openlayers on Android and the performance is very poor.

* Raymo: Depending on your needs, consider Google’s Static Map API. As it sounds, it is static only, but if you don’t need move/zoom/etc and just need a simple display, I think it works great. No JS involved, just a URL. The ‘full’ maps works pretty good too on mobile in my experience. Of course, both aren’t free if you hit your service limit.

* Andrew Trice: I’ve had great success using Leaflet.  It performs very well inside of PhoneGap apps.  http://leafletjs.com/   I’ve used this in numerous apps, on iOS, Android, BlackBerry, and Windows Phone (haven’t tested the others).

35. liu: JQueryMobile vs Zepto vs XUI? in terms of performance. Or do you have other recommendations?

* Raymo: I assume you mean jQuery vs Zepto vs XUI, since JQM is a UI library. For me, I like Zepto. I found XUI to be just… weird. Very personal thing. Overall jQuery isn’t horrible per se, it just has a lot of old weight on it that is useless on mobile. Give Zepto a shot though – very light weight and very jQuery-compatible.

36. Searchtool: Camera Rolls (Iphone) Do you know if there a way to reverse the flow of photos (newest at the beggining) or to to the bottom (auto) of the camera rolls when we call the camera API ?

* Andrew Trice: Unfortunately, we do not control this feature inside PhoneGap.  We leverage the native camera roll, and it is completely managed by the operating system.

37. Steven Romalewski: Great QnA, thanks for organizing this. My question is about Phonegap Build. If I’ve customized PG plugins for my particular needs, will my app work with Phonegap Build?

* Raymo: No, PG Build only supports a subset of plugins (http://build.phonegap.com/docs/plugins).

38. eric schrage: Do you have any recommendations for implementing responsive (hey, it actually moves!) spinners or progress bars for long running js? I think it is a common problem for js, not sure if there is a good option via PhoneGap API.

* Raymo: Not in particular. For spinners there are a thousand of those old animated GIFs which work fine. A bit of DOM to show/hide it is al you need. For progress bars you can use a bit of CSS. I can’t think of any off the top of my head though.

39. Candice: I am tasked with building ios and android apps and since I’m new to app development I’m looking at cross-platform options to maximize my time and only maintain 1 codebase. I came across this blog yesterday for setting up project templates and I’m just wondering if this is the way to go for a noob or is there a better way to start?: http://devgirl.org/2012/10/04/cross-platform-phonegap-aka-cordova-project-templates-in-a-jiffy/

* Raymo: Candice, what Holly was using in that blog post is now (as of 2.4.0 and last week) part of the official package. So yes, I’d use it. To me it makes things MUCH easier.

Enjoy!