7 Replies Latest reply on Apr 23, 2017 2:00 AM by Yehuda Katz

    Why I should use PhoneGap insdead of manual code compilation in xCode, Android Studio?

    Yehuda Katz

      Hello,

       

      I am new to hybrid app development. As far as I understood, PhoneGap is based on Cordova. Then why should I use PhoneGap instead of manual code compilation in xCode and Android Studio? Both Cordova and PhoneGap offers apps for testing code on real device. PhoneGap supports all Cordova's plugins. I am sure PhoneGap should have advantages but I cannot find any information about them!

       

      Thanks in advance

       

      Yehuda Katz

        • 1. Re: Why I should use PhoneGap insdead of manual code compilation in xCode, Android Studio?
          hollyschinsky Adobe Employee

          Hi Yehuda,

           

           

          PhoneGap is Adobe's distribution of the open source Apache Cordova project.

           

          PhoneGap is Cordova at the core but has some additional tools and services to help make building cross platform apps even easier. For instance, the PhoneGap Build service allows you to build/sign apps for multiple platforms through a cloud service rather than having to configure an environment manually for each platform (Android Studio/SDK's, Xcode etc).

           

          There's also the PhoneGap Developer app, which you install from an app store to your device and allows you to preview/test your apps quickly without having to package them in advance. It's basically a sandbox type environment with a set of pre-installed Cordova plugins to allow you to try features quickly without having to worry about installing them first.

           

          Another tool specific to PhoneGap is the PhoneGap Desktop application (http://docs.phonegap.com/references/desktop-app/) (an electron app) that is an alternative to using the PhoneGap CLI http://docs.phonegap.com/references/phonegap-cli/ and provides a GUI for creating projects that can be previewed with the PhoneGap Developer app on a device quickly. It has a list of templates you can choose from when creating a project and is targeted at beginners getting started with PhoneGap.

           

           

          You may also want to check out this detailed explanation from John Wargo, an Apache Cordova contributor and author to help clear up the confusion further.

           

           

          Cheers!

          Holly

          • 2. Re: Why I should use PhoneGap insdead of manual code compilation in xCode, Android Studio?
            Yehuda Katz Level 1

            Hello Holly,

             

            First of all thanks for detailed reply. Let me share my experience with PhoneGap;

             

            1) PhoneGap Developer app - seems to be useless because it ignores config.xml file. I cannot even lock device orientation, create splash screen. The fact that app loads all plugins gives you false impression that you have set project config properly. Plus loading speed is different than actual app will have. If you would mention 4 finger tap - I debug my app in device's browser faster, the full screen mode can be easily achieved by single line in your html and adding bookmark to home screen.

             

            2) PhoneGap Build - because of everything said above, I am forced to compile app with xCode and Android Studio to see if project is set config properly. So I already have xCode and Android Studio ready and compilation is just single command line. In additon this method will allow me to debug app in emulator before testing on real device.

             

            3) PhoneGap Desktop - I cannot find an easy way to add plugins from user interface or different platforms. I still hope that there should be some way... otherwise this app can be replaced with... lets say xamp. There is no cordova command line either (when you install github UI client, it also gives you command line git client).

             

            Holly, I have just developed one app using PhoneGap but I have feeling that I did everything wrong because I have zero control over project. There are some animation issues which could be PhoneGap or webview's limitatoin, I am not sure. If PhoneGap can offer me any other advantage, then I will try cordova and after could decide myself.

             

            Thanks again for your time Holly

            • 3. Re: Why I should use PhoneGap insdead of manual code compilation in xCode, Android Studio?
              Yehuda Katz Level 1

              p.s. I forgot to take in an account that PhoneGap Developer app is useful for app which uses hardware.

               

              p.p.s. The detailed explanation from John Wargo was the best I could get to my question!

              • 4. Re: Why I should use PhoneGap insdead of manual code compilation in xCode, Android Studio?
                kerrishotts Adobe Community Professional

                Some of my thoughts:

                 

                1. Yes, PGDeveloper ignores your config.xml and comes with lots of plugins, but that doesn't make it useless. To me, it shines most when used for rapid iteration, prototyping, and stuff like that. And, if you want to extend the plugins it uses, you can build your own version of the PGDev app and make it all that more useful to your workflow.
                2. PhoneGap Build is distinct from the PGDev app. PhoneGap Build will parse your config.xml, so as long as you provide it with the necessary signing keys, you can install the apps it builds on iOS. Debug versions of Android apps don't require any keys to install (but be careful: Cordova and PhoneGap will skip SSL certificate checking when contacting external hosts when in debug mode. Release mode will enforce SSL checks.). One other note, though: PhoneGap Build does NOT support plugins with hooks, so that can occasionally limit your options. (Most plugins don't use hooks, though.)
                3. PhoneGap Desktop is a GUI for the CLI, essentially. I think there are plans to extend its functionality, but if you're comfortable with the CLI, you probably don't need to worry about PhoneGap Desktop. As of right now, I don't think there is any way to add plugins from the GUI; you'd have to add them to config.xml or use a CLI.

                 

                When you're building locally using either the Cordova or PhoneGap CLIs, you have full control over what happens, because you can get at the native bits that wrap around your web code. On the other hand, you have to maintain a full development environment and all the headaches that come with it. If you don't mind doing that, there's nothing wrong with using either the Cordova or PhoneGap CLIs. If you don't want to fuss with that, you might want to consider using the PhoneGap Build environment.

                 

                As for animation issues, there's not enough information to be of much help, but you'll almost certainly face the same issues on both Cordova and PhoneGap, since PhoneGap is a distribution, meaning you'll end up with the same underlying webview either way. It's incredibly easy to end up with animations that aren't smooth, but this isn't the fault of either Cordova or PhoneGap as much as it is a failure to implement those animations in a way that the underlying web view can animate effectively. You need to make sure the elements being animated are accelerated by the GPU, that you aren't animating certain properties like left, top, etc. (instead, use transforms), and you need to avoid blocking the main thread for more than 16ms, or you won't hit 60fps. Typically, you'll want to keep any JS to a minimum while an animation is in progress for that very reason. And, of course, the device and OS version you're testing on have a big impact as well.

                • 5. Re: Why I should use PhoneGap insdead of manual code compilation in xCode, Android Studio?
                  Yehuda Katz Level 1

                  Hello kerrishotts,

                   

                  1) Actually it's very simple to change development app behave differently according to config file. Loading plugins, splash screen, orientation and etc are so simple to modify in real time that I have no clue why Adobe ignored it, unless app is intend to be dummy friendly which I will never understand. Software development was NEVER for dummies =)

                   

                  2) Actually that's the reason why I decided to use PhoneGap as it was offering compilation in cloud (theoretically). However, to be able to compile something, I need to have properly configured project which I cannot do without "maintain a full development environment and all the headaches that come with it".

                   

                  3) Actually, PhoneGap Desktop should not have anything else... yesterday, I thought why it should have ability to add plugins or platforms? It's designed to provide all functionality needed by development app. So unless development app will have more customization, PhoneGap Desktop does not require anything else.

                   

                  Regarding animation - I had no issue when I tried to access app via Safari browser. I read some articles and probably I will replace jQuery animation with CSS3 transform. Basically, I need to move some object from one place to another by mouse click. The another thing I notices was "blinking" of container where moving block was located.

                   

                  Is there any debug tool which I can use to debug which JS code takes too much time to execute?

                   

                  Thanks in advance

                  • 6. Re: Why I should use PhoneGap insdead of manual code compilation in xCode, Android Studio?
                    kerrishotts Adobe Community Professional
                    1. The PhoneGap Developer App is itself a PhoneGap app. This means it has its own config.xml file that it is using. Parsing another config.xml for certain preferences might be (relatively) easy, but adding plugins and such isn't, since plugins come with native code, and you can't arbitrarily add native code to an app after installing (not in a way that ensures a place in the App Store anyway). In this case, it's not that Adobe wouldn't love to have the developer app be extensible on-the-fly, it's that there is no store-safe way to do so.
                      1. For your purposes, you might just want to build locally or in-the-cloud. You don't have to use the PG Developer app if it doesn't suit your particular workflow.
                    2. You shouldn't need to install the native SDKs in order to build for PhoneGap Build. "config.xml" gives you control over preferences, plugins, etc., so it should meet your needs for building in the cloud. The only thing missing from PGB is the ability to use hooks, so if you rely on those, then yes, PGB isn't going to work for you.
                      1. That said, now that you've got a complete local environment, no harm in using it. It's more flexible in some ways, although it's also often headache-inducing. And when something goes wrong, you have more troubleshooting flexibility as well, since you control the build environment.

                     

                    As for animation:

                     

                    You mention "Safari"; but that doesn't tell me if you're using Mobile Safari on the phone or if you're using Safari on the desktop. Furthermore, Mobile Safari uses a different webview from what Cordova/PhoneGap apps get by default (WKWebView vs UIWebView). WKWebView is much, much faster in all things than UIWebView. You can add it to your PhoneGap builds, but be aware that it's not a drop-in replacement (some things work differently from UIWebView). The PG Dev app only uses UIWebView anyway, so if you use WKWebView, don't rely on the PG Dev app for performance testing. See GitHub - apache/cordova-plugin-wkwebview-engine: Mirror of Apache Cordova wkwebview engine plugin

                     

                    CSS3 transforms are the best way to smoothly animate DOM elements. You can use them with CSS3 animations and transitions, or you can use JavaScript to animate those properties. If you use the latter, do not use "setTimeout" or "setInterval". Use "requestAnimationFrame" instead -- the latter is the only way to get to 60fps. The former methods are so highly variable that animations with them will stutter awkwardly.

                     

                    "Blinking" can be caused by a lot of things; without knowing more, it's hard to offer suggestions. My guess is that the target element is getting rebuilt or replaced.

                     

                    You can use (desktop) Safari to debug your locally-built or cloud-built PhoneGap apps. See for more: Debugging | PhoneGap Docs (Note: PG Dev app can only use Weinre; signed iOS apps can't be remotely debugged.) The timeline recorder in the web inspector will profile frames and indicate long frames.

                     

                    Hope that helps. As you work through your animation issues and such, it might be best to split those off into new threads, since they aren't directly related to the original question in this thread.

                    • 7. Re: Why I should use PhoneGap insdead of manual code compilation in xCode, Android Studio?
                      Yehuda Katz Level 1

                      1) Enabling and disabling native code should not be that difficult. It will give benefit in future by saving time of developers IMHO.

                       

                      2) I was not clear in describing the problem. How much time it will take to debug problem in config file by sending it every time for cloud compilation, downloading app and trying it on real device? =) That's why I said that I need xCode/Android Studio to make sure that config is properly set and if I had environment set, it makes cloud compilation useless.

                       

                      Regarding animation - thanks a lot for your tips. I will give a try what you suggested and create a new topic shortly!