AppBuilder vs. PhoneGap

Side-by-side comparison for building hybrid mobile apps with Apache Cordova based tools

Mobile Development with Apache Cordova

mobile-development-with-apache-cordova

Apache Cordova is a set of device APIs for all major mobile OS that allows a mobile app developer to access native device functionality from JavaScript. Combined with a UI framework, Cordova allows you to build mobile apps with HTML, CSS, and JavaScript.
Both PhoneGap and AppBuilder feature the integration of Cordova plugins like the accelerometer, camera, compass or the file system to access cross-platform native functionality.

AppBuilder

Telerik AppBuilder incorporates an extensive set of tools to build apps for iOS, Android and Windows Phone using a variety of strategies including a CLI, building in-browser, desktop apps, and plugins for your preferred IDE such as Sublime Text or Visual Studio.

PhoneGap

PhoneGap is a solution for building cross-platform mobile apps using HTML, JavaScript, and CSS. It is a free and open-source distribution of Apache Cordova.

Workflow

How can I start developing a mobile app using PhoneGap vs. AppBuilder?

workflow-appbuilder

AppBuilder

AppBuilder offers an integrated solution to deliver mobile apps from concept to App store. You can develop apps using the CLI, the in-browser Platform, Sublime Text plugins, Visual Studio plugins or the Windows client. You can start your app work in the CLI, push to a GitHub repository, import that repository into the in-browser Platform, and continue work there.

workflow-phonegap

PhoneGap

After installing PhoneGap on your local computer, you can start building a new mobile app using CLI commands. Alternately, you can use the beta desktop client and drop your PhoneGap app into it to manage your app workflow. The app will then run on an IP address on your local machine for debugging.

AppBuilder PhoneGap
CLI
Windows desktop app
Mac desktop app
Browser-based toolset
Sublime Text plugin
Eclipse Plugin
Visual Studio Plugin

Build

When it comes time to create a build of my app, what are my options?

build-appbuilder

AppBuilder

Depending on how you prefer to develop your app, AppBuilder offers several different ways to build your app from code to deployable app. You can use the CLI commands to build a version of your app onto your local machine, or use the in-browser toolset to click 'build' to build a version of your app to install directly to your device. Visual Studio users can build from that environment, as can Windows client users.

build-phonegap

PhoneGap Build

PhoneGap developers might choose to use PhoneGap Build to build a testable and deployable version of their app. Using PhoneGap Build's web site, you upload a project's web assets in .zip format and the service compiles and packages an app. You then then receive the download URLs for all platforms to test the app on a device. Alternately, you can configure the service to point to an open source git repository and perform builds from that endpoint.

AppBuilder PhoneGap
Build from command line
Build from browser-based tools
Build from IDEs
Build using native tools
Build from Windows client

Plugins

I want to use Cordova plugins to enhance my app. What are my options?

plugins-appbuilder

AppBuilder

AppBuilder offers a curated marketplace of Cordova Plugins that can be imported into an app project either in the in-browser client or via the CLI. Core Cordova plugins such as the Camera and InAppBrowser are automatically included in an app project but can be removed and managed by the developer. Other non-curated third party plugins can also be incorporated into AppBuilder projects and built ad hoc.

plugins-phonegap

PhoneGap

PhoneGap developers are able to install plugins in their apps via the CLI, via the config file or from an external JavaScript file. If using PhoneGap Build, core PhoneGap plugins and third party plugins are supported if they are whitelisted by PhoneGap.

AppBuilder PhoneGap
Curated list of plugins available
Integrate plugins from browser
Integrate plugins via CLI
Build using any third-party plugin

Sync

How do you refresh your app to test it on a device using PhoneGap vs. AppBuilder?

sync-appbuilder

AppBuilder LiveSync

When you are working locally with a simulator, changes to your code always appear immediately after you save. To view changes on a device, however, you can leverage AppBuilder's LiveSync service. LiveSync enables you to see your code changes in real-time on connected mobile devices. You can build your app in debug mode via the in-browser client or with the CLI to produce a QR code used to install the app onto your phone. Once you have deployed your app to your device and want to see a change, tap and hold three fingers on the screen and your new version will be downloaded and the app refreshed. LiveSync can also be used with a three-finger tap gesture using the Companion App. You can also manage which files should or should not be synched by including them in the .abignore file.

sync-phonegap

PhoneGap Syncing

When enabled in PhoneGap Build, "hydration" is available to PhoneGap app developers. Using Hydration, updates are pushed directly to the application installed on a device. Once a developer uploads a new build the end user of the application will be notified when restarting the application. To see changes, the app needs to be restarted. Alternately, you can sync changes using the PhoneGap App, where syncing occurs over wireless connections when you pair your computer to the installed app.

AppBuilder PhoneGap
Automatic refreshing of simulator on code change
Manual refreshing on device on code change
Wireless refreshing on device on code change
Control over which code is synced

Test and Debug

How can you test and debug a mobile app using PhoneGap vs. AppBuilder?

test-and-debug-appbuilder

AppBuilder

AppBuilder offers out-of-the-box a large selection of simulation options.

Simulator

AppBuilder includes a full-featured simulator available via the CLI or in-browser with which you can view how your app looks and behaves in many device sizes and types.

Emulator

Alternately, test your app using native emulators associated with Android, Windows Phone, and Xcode.

Test in an app

AppBuilder also offers the Companion App, a way for you to test your app on a device without provisioning, which eases iOS development in particular.

Test in a browser

AppBuilder includes several options for debugging your app in a browser. You can use built-in developer tools to check JavaScript performance by inspecting the code in a browser on your local machine. Similar to PhoneGap, you can debug your app using Chrome or Safari developer tools.

test-and-debug-phonegap

PhoneGap Emulation

There are several ways to test an app's behavior.

Simulation

By typing 'phonegap emulate ios' in the command line you can see how your app looks on an iOS simulator, and similarly for Android emulators. Simulators are provided by native platforms by downloading Android tools or Xcode.

Test on a device

PhoneGap Build offers a way to download builds for testing on a device, but you do need to include provisioning profiles for your iOS testers.

Test using an app and browser

The PhoneGap App allows wireless emulation between your local app and its installation on device. You can enter a url and use Chrome's developer tools to debug. This emulation requires the Chrome browser and the Ripple emulation extension to be installed. Alternately, you can use Chrome's Dev Tools with the Device Emulation extension installed. For on-device debugging you can make use of Safari's Developer Tools to debug remote code for iOS apps. For other devices, you can also use Weinre to get an idea of bugs that occur on a device. Finally, you can always use native development tools such as Xcode's console and Android's 'adb' toolset to debug.

AppBuilder PhoneGap
Test locally on a simulator
Test locally using browser-based developer tools
Test on device using an app wrapper
Build to device and debug using native tools

Deploy

How can you deploy your app to the various App Stores using PhoneGap vs. AppBuilder?

deploy-appbuilder

AppBuilder

AppBuilder includes several helpful tools to ease the process of deploying your app to the various stores. From the CLI or the in-browser tools, you can build your properly-provisioned app and it will be automatically delivered to the app store of your choice by AppBuilder. AppBuilder also includes tools to help you create your splash screens and icons and handy methods to handle app provisioning from within the in-browser environment or the CLI. When you're ready, you can complete the app delivery process (adding screenshots, keywords, video, descriptions, and other assets) in the App store and submit the project for approval by Apple or into production on Android.

deploy-phonegap

PhoneGap

Once your app is complete, you can either build the app via native tools like Xcode and Android Studio or use PhoneGap Build to deliver to you a properly-provisioned file. You will then deliver that file to the various app stores (iOS, Android, or Windows Phone) manually. Then you can complete the delivery of the app into production by adding the app assets into the various app stores.

AppBuilder PhoneGap
Support for iOS, Android, and Windows Phone App Stores
Automated delivery of app assets to the App Stores
App asset creation and management tools