Tag Archives: multidevice

Video: Adobe Edge Inspect

Video: Introduction to PhoneGap

Yesterday I gave an Introduction To Mobile Development With PhoneGap presentation at the DevNexus developer conference in Atlanta. Thanks to everyone who attended, DevNexus is a great event. Unfortunately, not everyone around the world was able to attend… maybe next year. Luckily for you, I recorded the presentation! You can check it out in it’s entirety below.

My slides are available below. Just press the space bar to advance to the next “slide”.

tricedesigns.com/presentations/devnexus2013/intro to phonegap/

If you missed this yesterday, come check out my “Enterprise Apps With PhoneGap” presentation later today.

Feel free to leave a comment with any questions.
Enjoy!

Transcript from Open Session On PhoneGap

Leave a reply

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!

My Workflow for Developing PhoneGap Applications

34 Replies

I am asked all the time “How do I get started developing PhoneGap applications?”. My normal answer is to advise people to check out the PhoneGap Getting Started Guides, which provide a great starting point for every platform. However after further thought, I’m not sure this is always what people are asking. Rather than “how do I get started?”, I think people are often looking for insight into the workflow for developing PhoneGap applications. Everything from tools to developer flow, to getting the app on devices. The Getting Started Guides are essential for setting up the initial project structure, but once you get that setup, you might be wondering “what do I do next?”. In this post, I’ll try to shed some light on the workflow and tools that I use when developing PhoneGap applications.

Know What You’re Going To Build Before You Build It

First and foremost – it is essential to have at least some kind of idea what you are going to build before you build it. If you just start hacking things together without a plan, the final result is seldomly great. Complete (pixel perfect) UI/UX mockups are fantastic, but you don’t have to have a fully polished design and screen flow. Just having wireframes/sketches are a great start. Heck, even a sketch on a napkin is better than starting with nothing.

The UX design/wireframes help you understand what you application should be doing from the user’s perspective, which in turn helps you make decisions on how you tackle a project. This can be purely from a HTML level, helping you figure out how you should position DOM elements and/or content. Or, it can help you gauge your project’s technical complexity – How many “moving parts” do you have, how much of the app is dynamic or asynchronus, or how do different visual elements need to work together? You can leverage this design/mockup to analyze the needs of your application and determine if a particular framework/development methodology is a best fit (Bootstrap, Backbone.js, Knockout.js, Sencha, jQuery Mobile, Angular.js, etc…).

When working with a designer, I use Adobe’s Creative Suite Tools for pretty much everything – wireframes, UI/UX designs, chopping up assets, etc… I’m currently working on a project that was designed by the talented Joni from Adobe XD. Joni designed everything in Creative Suite, and I’m using Photoshop to view screen flows and extract UI assets for the actual implementation.

UI Mockups in Photoshop

Screen Flow in Photoshop

Note: This app will also be free and open source as a sample/learning resource for PhoneGap, including all of the design assets – I’ll follow up with another post on this later, once the app is available in the app stores.

If you aren’t a “graphics person”, or don’t have creative suite, there are a bunch of other tools that you can use for wireframing and/or sketching (but c’mon, Creative Cloud is only $50 a month). Here are several I’ve used with great success, but this is not a comprehensive list at all:

OmniGraffle - A drag & drop wireframing tool for OS X. This is fantastic for wireframing or documenting screen flows. In fact, the screen flow image shown in Photoshop above was originally composed in Omnigraffle, using the mockups created in Photoshop.
Visio - A powerful drag & drop wireframing/design tool for Windows – much like OmniGraffle, but for windows.
PowerPoint or Keynote - These aren’t just for presentations. They can be really useful for putting together screen flow diagrams, or annotating images/content.

Often people like to sketch out ideas & wireframes on their tablets, here are a few tools that I use for that:

Adobe Touch Apps – Adobe Ideas can be great for digitally sketching ideas.
iBrainstorm – A great app for collaboratively taking notes and sketching. I’m partial to this one b/c used to be on the dev team, and I wrote a good chunk of the graphics sketching logic.

There are a bunch of other tablet sketching apps out there, but I haven’t used most of them.

Coding Environment

Coding environments are a tricky subject. There is no single solution that meets the exact wants and needs for everyone. Some people chose lightweight text editors, some people chose large-scale IDEs, some people use designer-centric tools, and many of these choices are dependant upon which operating system you use or your background as a designer or developer. Since PhoneGap applications are really just editing HTML, CSS & JavaScript, you can use whatever editor you want. In fact, I know a several people that use vim as their primary editor.

Large-Scale IDEs

I’m a bigger fan of of using a complete IDE (integrated development environment) than I am of a lightweight editor, simply b/c IDEs tend to have hooks into more features/languages, etc… I know people complain about startup time, but there is no startup time if you leave it open all the time.

There are a few catches when talking about IDEs with PhoneGap. The first is that if you want to deploy anything locally to devices (without using PhoneGap Build), you have to delpoy using the IDE for the particular platform that you are targeting. That means Xcode for iOS, Eclipse for Android, or Visual Studio for Windows Phone, etc… However if you wish, you can use your editor of choice, and just use the IDE to deploy to devices locally. You can even share source code across several IDE installations using symlinks (which I describe here). I very often use this type of a configuration to share code between Xcode, Eclipse, and WebStorm.

My preference for coding PhoneGap applications is to use WebStorm by JetBrains. WebStorm has great code-hinting (even for your own custom JS and 3rd party libraries), great refactoring, hooks into Git, CVS, or SVN repositories, and is a very mature IDE.

WebStorm IDE

I tend to use this as my primary coding tool, then switch to Eclipse or Xcode when I want to locally deploy to a device for testing. When using PhoneGap Build to simplify cross-platform compilation, I just push the code to git, then recompile via PhoneGap Build.

I’m not a fan of Xcode’s HTML/JS editing, and haven’t found an HTML/JS plugin for Eclipse that I really like. To target Windows devices, I use Visual Studio.

Lightweight Editors

I’m a bigger fan of larger IDEs than lightweight editors, but Adobe Edge Code (also known as Brackets) is a great lightweight editor for quick edits. Edge Code/Brackets is an open source HTML/JS editor that supports live editing in the browser and inline editors for CSS styles, without leaving your HTML files. If you tried Edge Code Preview 1, but weren’t sold on it, you should try Edge Code Preview 2. The team has come a long way very quickly. It’s fast, easy to use, and there is a plugin to tie it into PhoneGap Build. I sometimes use this for quick edits.

Adobe Edge Code

Edge Code/Brackets also has a thriving open source project, and encourages you to get involved and help contribute.

There are tons of other lightweight editors out there, and everyone has their favorite. As long as you’re happy with the tool, and it can edit text (HTML, CSS, JS) files, you can use it to build PhoneGap applications.

Designer-Friendly Editors

I’m not necessarily the primary target for Dreamweaver, but it has some nice features. Dreamweaver gives you a great programming environment plus a WYSIWYG editor for HTML experiences. It also features PhoneGap Build integration directly inside the coding environment. If you’re used to Dreamweaver for creating web experiences, you can continue to use it and target mobile apps as well.

Adobe Dreamweaver

Debugging Environments

Yes, that is plural… Debugging Environments. Due to the cross-platform nature and PhoneGap’s leveraging of native web views for each platform, debugging PhoneGap applications can sometimes be tricky. Here are some tips that will make this significantly easier.

The PhoneGap Emulator

The PhoneGap Emulator is my primary development/debugging tool for all PhoneGap apps. It is a browser-based emulator leveraging the Google Chrome browser and the Ripple Emulation Environment. The PhoneGap Emulator runs inside of Google Chrome, and provides emulation of PhoneGap’s core APIs. Since it is built on top of Chrome, it enables you to leverage Chrome’s Developer Tools, which in my opinion are second to none for web/application development. This is a highly-productive developer environment.

PhoneGap Emulator in Google Chrome

Here’s why I like the PhoneGap/Ripple/Google Chrome development environment:

First, this combination enables you to emulate most core PhoneGap APIs without leaving the desktop environment. It enables you to test various APIs including geolocation (with simulated locations), device events (deviceready, back, etc…), sensor events (accelerometer, compass), and even let’s you test with different device aspect ratios – all without having to push anything to an actual device. This saves a lot of time in development iterations. You can read about the supported Ripple emulator features here.

Second, Chrome’s Developer Tools are awesome. Here are just a few things that you can do while developing/debugging your app, live within the emulation environment:

Alter DOM and CSS at runtime via the elements panel.
Analyze all resources consumed by your app, via the resources panel. This includes all scripts, images, html files, cookies, etc… it even includes insight into any local data stored via PhoneGap’s local storage database (WebSQL implementation).
View/query all local databases within your app. You can write your own queries to view/alter data in the WebSQL database. Thanks to Ray for sharing this, it’s not immediately intuitive.
Debugging Local Storage Databases in Chrome with SQL
Analyze network requests/utilization via the network panel.
Debug JavaScript with the Scripts/Sources Panel. You can set breakpoints in JS execution, inspect & alter values in JS objects in-memory, and view details and line numbers for any exceptions that occur.
Monitor function execution time, memory consumption, event listeners, and frame rendering time via the timeline panel.
Chrome Timeline Panel
Profile CPU/Memory usage via the profiles panel.
Use the console to monitor console.log() statements, inspect properties of objects in memory, or execute arbitrary JavaScript whenever you want.

The PhoneGap Emulator enables developers to be extremely productive with development, however I cannot emphasize enough that on-device testing is critical for having a successful app. On-device testing can expose performance problems or browser rendering variances that you may not notice in the emulator environment.

On-Device Remote Debugging

As I mentioned above, on-device testing is critical for successful applications. iOS and BlackBerry have an advantage over other platforms b/c the latest developer tools allow you to remotely debug content live on a device.

Since the release of iOS 6, you can debug content in the iOS simulator using Safari’s Developer Tools. Safari’s developer tools give you many of the same debugging capabilities that I mentioned above for Chrome.

To debug an app running in the iOS simulator, just go to Safari’s “Develop” menu, select “iPhone Simulator”, then select your app’s index.html file.

Connect Remote Debugging

You’ll end up with a full remote debugging experience, just like if you were debugging inside the Safari browser, complete with JS breakpoints, DOM inspection, etc…

Remote Debug iOS Simulator with Safari

The process to remotely connect to a live app running on an external iOS device is very similar. Just follow the instructions here, under the “Remote Debugging” section, and you will be up and running very quickly.

The latest BlackBerry devices also have the same remote debugging capability (since it is all actually based on the webkit engine). You can view detailed instructions how to remotely debug PhoneGap apps on BlackBerry devices here.

Remote Debugging with Weinre

Not every platform supports live remote debugging, especially older versions. Weinre (pronounced winery) is a remote web inspector that allows you to inspect/edit DOM and CSS elements on remote devices. Basically, you include some JavaScript in your app, and it communicates back to a server that will tell you whats happening inside of the app running on the mobile device. It won’t give you full debugging capabilities like JS breakpoints and memory inspection, but it’s better than nothing. You can use Weinre by setting up your own instance, or by leveraging debug.phonegap.com.

Weinre for On-Device Debugging

When All Else Fails

If you’re still debugging your apps, and the solutions mentioned above don’t work, you can always resort to plain-old “alert()” statements to pop up debug messages, or use “console.log()” statements to write to system logs.

On Android, all console.log('...'); messages will appear as printouts in the command-line tool logcat, which is bundled with the Android SDK and integrated into the Android Eclipse plugin.

On BlackBerry, all console.log('...'); are printed to the BlackBerry’s Event Log. The Event Log can be accessed by pressing ALT + LGLG.

On iOS, all console.log('...'); are output to the Xcode Debug Area console.

Building PhoneGap Apps

The PhoneGap getting started guides will point you to the right direction for getting started with a particular platform. If you are just targeting iOS, you can use Xcode for building. If you are just targeting Android, you can use Eclipse, etc… It is all very easy to get up and running.

However, this process gets much more complicated when targeting multiple platforms at once. When I have to do this, PhoneGap Build becomes really, really handy.

Build-Bot-Preview

PhoneGap Build allows you to either upload your code, or point to a Git repository. PhoneGap Build will then pull your code and build for 7 different platforms, without you having to do anything special or setup multiple environments. All that you’ll have to do is install the cloud-compiled binaries on your device. You can do this by copying/pasting a URL to the binaries, or by capturing a QR code that will directly link to the compiled application binary.

One other advantage of PhoneGap build is that it lets designers/developers build mobile applications without having to install any developer tools. If you want to compile a PhoneGap app for iOS, but are on Windows – just use PhoneGap build and you won’t need Xcode or a Mac.

Check out the PhoneGap Build FAQ for more detail about how exactly it works.

PhoneGap UI/Development Frameworks

Probably the most common PhoneGap question that I get asked is “what MVC/development framework should I use?”. If you’ve been waiting for me to answer this, don’t hold your breath. It is impossible to be prescriptive and say that one solution fits all use cases for every developer.

When people ask me this, I like to paraphrase Brian Leroux from the PhoneGap team: “Use HTML, it works really well.”

I think people often overlook the fact that PhoneGap’s UI renderer is a system web view. Anything that is valid HTML/CSS content can be rendered as your application’s user interface. This could be something incredibly simple, like text on the screen, or it could be incredibly creative or complex. The important factor is that you need to focus on a quality user experience. If you’re worried about your UX, and are worried that Apple may reject your app, then read this article where I explain Apple rejections in detail.

HTML/JS developers come from many different backgrounds, with varying degrees of programming expertise. Some frameworks appeal to some people, other frameworks appeal to other people. There also seem to be new UI & architectural frameworks popping up every week. It would be a disservice to all people who use PhoneGap for us to proclaim that we should only use one singe framework.

If you are interested in UI frameworks, take a look at these:

If you are interested in architectural patterns, take a look at these.

There are lots, and lots, and lots more options out in the HTML/JS development world… I’m not even taking into account JavaScript generating tools and languages like CoffeeScript, TypeScript, or others…

Hopefully this helps get you on the right track.

Enjoy!

A Response to “Shell Apps and Silver Bullets”

4 Replies

There is an article floating around the web today, warning against “Shell Apps” and tools like PhoneGap. The logic in this article has a few arguments that are misleading, and I’d like to introduce some counter arguments as they relate to PhoneGap and HTML experiences for comparison.

The “Silver Bullet”

First, the “Silver Bullet” argument… I have never seen it stated anywhere that PhoneGap is a “Silver Bullet” that will solve every problem for every application developer. PhoneGap is a tool for developing applications. It enables developers to build applications in situations where they may not have otherwise, including:

No knowledge of native development
Existing web development skills
Reuse of assets across platforms or leverage existing code/assets
Lower barrier of entry in the mobile app world

PhoneGap isn’t a “magical” solution to end all other solutions. It is a toolset that enables you to build & bundle natively installed applications using web technologies. For more detail on what exactly PhoneGap is, see this post “PhoneGap Explained Visually“. If you’d like to understand the motivations behind PhoneGap/Cordova, then look no further than the PhoneGap blog.

If you were building a house, would you use a butter knife to drive nails? Or, would you use a sledgehammer for finishing touches? If you needed lumber for your house, would you go cut down a tree, cut some beams out of it for use in your house frame? No, You wouldn’t do any of these. You would use the right tool for the job, and you would use raw materials that you already have available or are easily accessible.

Chances are, if you are building an app, you would do the same thing. There are cases where PhoneGap is not the best choice, but that does not mean there aren’t a huge number of cases where PhoneGap is a great choice (if not the best). It does not make sense to have to rebuild everything from the ground up, or have to learn completely new skills just to build apps for a mobile platform.

Increasing Complexity

The article also makes claim that HTML/JS based apps are more complicated than native apps:

At first things are easy. For simple screens, using a webview might be faster than writing a native implementation. As you add functionality to the webview, the complexity increases until you give up and write everything native.

This is far from the truth. There are 2 facts that are completely overlooked in this statement:

You can write a “bad” or overly-complex application in any langauge. Native development is not a silver bullet that prevents you from building “Bad” apps.
Native applications can also be extremely complicated – they are not inherently more simple.

Regardless of the underlying technology, the more features, views, data models, and components that you have within an application will add to the overall complexity of that application. This is precisely why people apply model-view-controller (MVC) development paradigms and software design patterns.

PhoneGap and hybrid/web development techniques are no exception to this rule. You can create really simple apps very quickly without a high degree of computer programming skill, but creating complex applications requires real software development processes. MVC, abstraction, encapsulation, separation of concerns, etc… all apply. You can absolutely build complex applications with web technologies, but you must approach them in a structured manner – just as you would approach an enterprise-quality native application. If you do not approach a complex problem with proven software design principles from the beginning, you risk setting yourself up for failure regardless of the underlying technology.

I have significant experience in developing native applications, interactive development, HTML/JS, as well as developing with cross platform technologies. Based on my own experience, I am far more productive with HTML & JS/PhoneGap than I am with native development, and I can create applications that are just as complex.

That does not mean everyone will be the same as me. A developer who comes from either the Objective-C or Java worlds and does not know HTML will likely be more productive with native development – once they learn the libraries and paradigms for native mobile development. Likewise, developers who are already proficient with interactive development for the web will be more productive using web technologies. One cannot make generalizations about a software tool or productivity when the use cases and developer skills are so widely varied.

The Framework Tax

The article makes the claim that you end up paying a “tax” by using frameworks such as PhoneGap:

You could use an open source shell-app framework like PhoneGap, but that leaves you at the mercy of their schedule. If the native platform introduces a new API, or you run into an edge case that requires extending the shell framework, it could be months before you can implement your own app’s functionality.

Again, this is not entirely accurate. The goal of PhoneGap is not to recreate & mirror every native API on every platform. Rather, to provide a consistent API for building your applications across multiple platforms, using familiar web development skills, and to push the web forward. There are certainly APIs on all platforms that it does not support.

Luckily, PhoneGap is built on top of an extensible architecture, so that if you wanted to take advantage of a new API, you can create your own native plugins (yes, in native code) to expose that functionality for use within your PhoneGap applications. If you do not want to wait on the PhoneGap/Cordova open source initiative, then you can build it yourself without delay. You do not need to fork the framework for this, rather you extend it within your own projects. There’s also a good chance that someone has already written a native plugin and posted it on github that you can reuse.

Browser Fragmentation

Well, you have a point there… to a point. There are definite browser fragmentation issues. Webkit on iOS != Webkit on Android != Webkit on BlackBerry != IE/Trident on Win Phone, etc… However, this is generally related to presentation styles, not core browser functionality. It is important to use tools like caniuse.com when you are evaluating your development strategy and modernizr during implementation phases (for graceful degradation). While there are variations in the browsers, it doesn’t mean that your architectural patterns, your business logic, or your data model are going to be different.

Different browsers on different platforms also have different performance metrics, and you need to build your application experience based on what you are trying to create. Do not try to force a slow browser to be fast; that will never work.

Versioning

The versioning argument in that article sates “hybrid apps allow you to update” is not entirely true:

Shell app let you update content without requiring a full app release by serving your pages off a server. In the process, you lose release atomicity, the assurance that whatever you ship to clients comes in one complete, unchanging bundle.

Yes, you can serve web pages, and if you have native content around the web content, then it could be mismatched. However, it is important to understand that you can’t create apps with HTML technologies that update their own code withinin the local app bundle on the device based off of code downloaded from a server.

If you build an app that bypasses Apple’s App Store and updates itself automatically, it will get rejected. You may be able to pull down data/content or images and cache them locally, but a “full app release” is not possible. The Apple Developer Agreement explicitly says in section 2.7:

“Apps that download code in any way or form will be rejected“

Likewise, “Users may wait weeks or months to update apps” applies to native development as well. If your users don’t update, then they don’t update. In this case the mobile branding may not match the website branding. This happens regardless of technology choice.

The Uncanny Valley

There is merit to the uncanny valley argument (html based apps don’t always feel “right”), but that does not mean it is impossible to build native-feeling applications using HTML and JavaScript. The trick is that you must design these apps to feel like applications, not like web pages. Here are a few apps that are built using HTML-based technology: Apple Store, Facebook, LinkedIn, Wikipedia, Mafia Wars, US Census Browser, Bit Timer, Untappd, and even the “revolutionary” iAd advertising experience from Apple are all built on top of HTML. (This is by no means a definitive list of all HTML-based apps either.)

Some of these apps you might already use on a daily basis. The “uncanny valley” argument really comes down to UX design, and giving your HTML application a first-rate experience. If you do not invest in your user experience, it will not feel right. Some of these apps show up in Apple’s recommendation lists… would Apple recommend bad apps to us in the “walled garden” that they have worked so hard to curate?

Performance

Again, this is a question of using the right tool for the right job. You would likely not build a 3D modelling application using HTML/JS, but you could easily build a word game experience, an enterprise data reporting front-end client, or content-centric experience using HTML & JavaScript. There are things that you need to do to make sure your HTML-based experiences perform well, such as using touch events instead of mouse events (mouse events in web views can have an OS lag up to 3-400 MS, where touch events do not). Or, using CSS3 translate3D transforms to enable GPU-rendering on DOM content. Perception of an application boils down to creating a proper user experience. You can absolutely create a great user experience with HTML & related technologies, but I wouldn’t use it for super-computing tasks.

If your app requires intense data crunching for a computationally intensive task, you can always drop down to a PhoneGap native plugin to perform the heavy lifting for you.

Write Once, Run Everywhere

When was the last time you saw a computer or device that could not render HTML content? I have several devices at my disposal for work: 3 Android devices, 2 iOS devices, 1 Windows Phone, 1 Blackberry, and a Macbook. None of these devices is incapable of rendering web content. HTML is the most widely distributed and pervasive means of presenting digital information in a visual manner, and it has been around for decades.

The Right Tool

As mentioned in the original post, use the right tool for the job. Don’t force a solution that doesn’t fit, but also don’t over-generalize your technology decisions based upon incorrect assumptions. I can build a responsive layout with dynamic content far easier in HTML than I can in native Objective-C, but building a triple-A quality game isn’t even close to achievable in HTML. It all depends on context:

What are you trying to build?
Who are you building it for?
What are the UX requirements?
Who is building it, and what are their skills?
What is your budget?

There is no doubt or question in my mind – You can absolutely build incredible app experiences that truly feel like apps using web based technologies.

ANDREW TRICE

Explorations and Evangelism in Technology