Alternatives to Using the Intel® XDK to Develop Mobile Apps

The Intel® XDK provides a cross-development environment for creating hybrid mobile HTML5 apps based on the Apache* Cordova* mobile app framework (aka Adobe* PhoneGap*). The Cordova mobile app framework defines a standard "HTML5 to native wrapper" structure and a third-party plugin interface that allows developers to extend the JavaScript API for HTML5 mobile apps.

Other than App Designer, all the tools used by Intel to assemble the Intel XDK multi-platform mobile HTML5 app development environment are standard open-source tools. This article outlines some alternative tools for developing Cordova mobile HTML5 apps for Android, iOS and Windows devices.

Intel® XDK Mobile App Development Components

That part of the Intel XDK that supports mobile app development includes the following key functional elements:

  • An editor that is HTML5 (JavaScript*/CSS/HTML) friendly.
  • Optional HTML UI layout tool or framework.
  • A tool to quickly test and debug your mobile app's JavaScript code.
  • A means to remotely debug a built mobile app.
  • A system to package (build) your HTML5 app as a mobile app.
  • Samples to help understand how mobile HTML5 apps work.

Alternatives to the components outlined above are described below.

The Adobe* PhoneGap* suite of free products are an excellent alternative worth consideration for building mobile HTML5 apps. Included in this suite are the PhoneGap Desktop App and the PhoneGap Mobile App, which are roughly equivalent to the Intel XDK Simulate tab and Intel® App Preview. These tools are built on top of PhoneGap CLI, which is a compatible superset of Cordova CLI. They are designed to minimize your need to interact with the Cordova command-line and provide the means to perform a quick preview of your app. These tools also leverage PhoneGap Build, so it is not a requirement that you need an Apple* macOS* development system to build for iOS or a Microsoft* Windows* system to build for Windows mobile. See the PhoneGap getting started page for additional help.

HTML5 Friendly Editors

A variety of JavaScript* friendly editors can be used as alternatives to the Intel XDK. In addition to the free open-source Brackets* editor from Adobe*, the editor built into the Intel XDK, there is also the open-source Atom* editor from GitHub* and the free and open-source Visual Studio* Code editor from Microsoft*.

If you have been using the Intel XDK to develop your mobile app it is not a requirement that you continue to use the Brackets editor. Ultimately, you should pick the editor that works best for you. Any of the free alternatives mentioned above will work, as well as many popular fee-based code editors such as Webstorm* by JetBrains* and Sublime Text* by Sublime HQ*.

Brackets

The editor built into the Intel® XDK is the Brackets open-source editor, which is sponsored by Adobe* and was designed expressly for development of HTML5 (JavaScript, CSS and HTML) applications. In fact, the Brackets editor itself is an HTML5 app! The Brackets editor can be extended via many open-source extensions. Use this "javascript development with brackets" search link to find some useful suggestions.

The Brackets editor runs on Microsoft Windows*, Apple macOS* and most distributions of the Linux* OS.

Atom

GitHub has created an open-source editor called Atom that, like Brackets, is also built on HTML5 technologies. It has many free packages which can be used to extend the editor. Use this "javascript development with atom" search link to find some useful suggestions for supporting the creation of HTML5 apps.

The Atom editor runs on Microsoft Windows, Apple macOS and most distributions of the Linux OS.

Visual Studio* Code

The Visual Studio* Code editor is a general-purpose open-source programming editor from Microsoft that includes many features that are specific to developing JavaScript applications. Despite this editor's name, a Microsoft Visual Studio* license is not required to use the editor, nor does its use depend on having Visual Studio installed on your system. It is a standalone editor. Use this "javascript development with visual studio code" search link to find useful extensions for use with Visual Studio Code.

The Visual Studio Code editor runs on Microsoft Windows, Apple macOS and most distributions of the Linux OS.

UI Layout Tool

There are many UI frameworks and tools available for creating HTML5 UI layouts; too many to enumerate here.

Unfortunately, there is no direct equivalent UI layout tool to that offered by App Designer; because App Designer used a custom grid layout that was unique to the Intel XDK. You can modify the App Designer CSS and HTML in your app directly, by hand, but if you are planning to make extensive changes to your app you are better off re-creating your layout using some other drag-and-drop layout tool or rewriting your UI by hand with the help of an HTML5 UI framework or library.

Most "drag-and-drop" layout tools have a fee associated with their use, a few are free, but none are compatible with App Designer. Any drag-and-drop layout tool that generates standard HTML5 code (HTML/CSS/JavaScript) should work with the Cordova mobile app development tools, which is what the Intel XDK creates.

Because the Intel XDK is a tool for creating standard Cordova CLI (aka PhoneGap) apps, any HTML5 UI framework or library that works in the Cordova CLI environment is a candidate for creating your app's layout by hand.

Quickly Debug and Test Your App

Generally, debugging and testing your app's layout and core JavaScript logic is the most time-consuming task. So a solution to handle this task quickly, without having to build and install your app on a real device, is very desirable.

Alternatives to the Intel XDK Emulate and Simulate Tabs

The Simulate tab is a repackaged version of the free open-source Microsoft* Cordova Simulate tool that is part of the Apache* Cordova* project. You can install it directly onto your development system and use it there, as a standalone Cordova app development tool that then runs inside your desktop browser.

Likewise, the old Emulate tab was a repackaged version of the Ripple Emulator which is an open-source project that was created by a company called Tiny Hippos. You can also use it inside your desktop browser, but we recommend using the Microsoft Cordova Simulate tool, because the Ripple Emulator has not been updated for many years.

Another alternative, that is quite popular with many Cordova developers, is to use the "browser as a platform" build target. Many of the core Cordova plugins and some third-party plugins include a "browser target," meaning that you can build your app for the "browser platform" and those plugins that include a backend simulation for a browser can be tested in your desktop browser.

In all of the above, you can "simulate" the layout and the use of touch with a mobile device by using your desktop browser's built-in tools for debugging and simulating web pages on a mobile device. For example, to use the Chrome Device Mode:

  • open your app's index.html file with your Chrome browser
  • start a Chrome DevTools session on your now "running" app
  • enable the "Device Toolbar" to view your app in a variety of device-specific viewports 

You should think of the these browser-based debug solutions as simple Cordova API simulators that provide a convenient way to help you visualize the approximate layout of your app at various aspect ratios and sizes and to simulate interaction with your app running on a mobile device. These solutions do not simulate real devices and they seldom simulate third-party Cordova plugin APIs. The only way to know with certainty that your app works as intended on a mobile device is to build, install and test it on real devices.

Using Brackets Live Preview

Another good tool for quick debug of your app's UI layout is the Brackets* Live Preview feature, on which the retired Intel XDK Live Layout Editing feature was based (the built-in Intel XDK editor is Brackets). The Brackets Live Preview feature utilizes your desktop browser to display in real-time how your layout changes as you make changes to your HTML and CSS code. If you use the Google* Chrome browser with Brackets Live Preview you can take advantage of the Chrome Device Mode described above to simulate a variety of customizable device viewports.

Alternatives to Intel® App Preview

PhoneGap Build offers a tool called Hydration that is similar to Intel App Preview. In many ways the Hydration solution from Adobe* is superior to that which Intel App Preview offered. The Hydration test container is based directly on your application and the Cordova plugins that make up your app project; unlike the generic Intel App Preview container, which contained a fixed set of plugins and a fixed Cordova version. Hydration uses your application and project plugins as the container, from which you can then quickly test incremental changes to your app's HTML5 code. This is a much more accurate debugging platform than that provided by the Intel App Preview debug container

Debug a Built App on a Real Device

You can debug a built Android app directly on-device, with full JavaScript and CSS debugging, by way of the remote Chrome* DevTools*. For those who have access to a Mac, it is also possible to use remote web inspector with Safari to debug your built iOS app directly on-device. Both of these solutions require that you connect your mobile device to your host development system via a USB cable, and that you enable debugging over USB on the mobile device.

Debugging a built app does not require constant rebuilding of your app in order to test changes or experiment with your code. The best debugging experience will come from taking advantage of the interactive JavaScript console to redefine functions within your app and then run those redefined functions directly from the console or restart your app, in situ, using the window.location.reload() function at the console. An example of using this technique can be seen in this video, starting at about 18:30. The video is demonstrating the use of the weinre debugger, but the JavaScript console debugging technique illustrated there can also be applied to the use of remote CDT and remote Web Inspector when debugging a built app.

NOTE: In order to debug a built app using the techniques mentioned above you must build and install a "debuggable app" onto your mobile device. The default build you get from PhoneGap Build and Cordova CLI is a debuggable app; what you get when you do not build with your keystore on Android or when you provide a debug certificate for building on iOS.

Additional details regarding debugging built apps on-device are available on the PhoneGap Build debugging docs page.

Use Node weinre* to Debug Your Built App

For those situations where you cannot utilize remote debug over USB, the weinre debug console is a useful alternate solution. This solution can also be used with a built app. This solution does not accommodate JavaScript debugging or breakpoints and has only limited CSS debug tools. 

Installing a local weinre server onto your development system involves the following steps:

Windows users may want to also (optionally) install the npm-windows-upgrade package:

PhoneGap Build provides a convenient weinre solution that is worth considering. The PhoneGap Build tools make it easy to add and remove the necessary weinre script tag in your app as well as offering the option to use a weinre server they maintain, rather than your own local weinre server.

Package (Build) Your App

The best option for building your mobile app is PhoneGap Build or Cordova CLI. The Intel XDK build system created standard Apache* Cordova* packages, which are compatible with PhoneGap Build and Cordova CLI. To make it easy to build with these alternatives you can use the "Cordova Build Package" tool located on the Intel XDK Build tab to export a ZIP file which can then be used with PhoneGap Build or Cordova CLI. See Export your Intel® XDK Mobile App to PhoneGap* Build or Cordova* CLI for detailed instructions regarding how to export and build your mobile app with these tools.

Alternatives to the Retired Intel Certificate Management Tool

The Intel XDK certificate management tool no longer supports the creation of new build certificates, it only supports downloading existing build certificates and converting "legacy" certificates into a downloadable format. Follow these PhoneGap Build instructions to create an Android build certificate and this doc which explains how to Convert an Apple developer certificate to a P12 file. Additional information regarding build certificates can be found in the Build using PhoneGap* Build doc page and the Build using Cordova* CLI doc page.

You only need to download your Android keystore if you have published your Android app to the store. If you have never published an app to the store it is simpler to create a new Android keystore. In addition, you do not need to download your iOS certificate from the Intel XDK certificate management tool, it is simpler to create a new set of iOS build certificates.

Alternatives to the Retired Crosswalk WebView Runtime

As of February, 2017, the Crosswalk Project was retired. Crosswalk 23 was the last version of the Crosswalk library produced by the Crosswalk team. You can continue to build for Android with the Crosswalk library using Cordova CLI or PhoneGap Build, but no further updates to the Crosswalk library will occur. For many developers it is no longer necessary to build your Android app with Crosswalk. FYI: the Crosswalk 23 library for Android is based on Chromium version 53.

We recommend that you build for Android 4.4 or greater and discontinue using the Crosswalk library. Android 5 and later devices use a version of the Chrome for Android web runtime that is regularly updated by Google and provides equivalent performance to the Crosswalk library. Android 4.4 devices are also based on the Chrome for Android web runtime, but cannot be upgraded and are configured to use Chromium 30, 33 or 36, depending on the specific version of Android 4.4 on your device. Details regarding the difference between the Chrome webview on Android 4.4 devices and the webview on Android 5 and later devices are available in this Chrome developer FAQ.

To disable the use of Crosswalk in your app uncheck (clear) the "optimize for Crosswalk" option in the Build Settings section of the Android Projects tab in the Intel XDK. After you disable the use of Crosswalk in your project, those changes will be exported by using the Export your Intel® XDK Mobile App to PhoneGap* Build or Cordova* CLI tool.

Alternatively, remove the <plugin name="cordova-plugin-crosswalk-webview"/> line from your project's config.xml file.

If you want to limit your apps to only target Android 4.4 and later devices, set the "Minimum Android API" number to 19. Setting your apps "Minimum Android API" level to 21 will limit your apps to installation on Android 5.0 and later devices. We recommend setting the "Target Android API" level to 21 (which corresponds to Android 5.0).

IMPORTANT: If you set the "Target Android API" level to 23 or higher (Android 6.0 or higher) and publish that app, you will not be able to publish an update to your app that targets a lower API level (22 or less). This is because the mechanism for managing application permissions on Android devices changed significantly with the API 23 release and, for security reasons, the Google Play Store will prevent you from targeting a lower API level in an updated app after you have published that app to explicitly target API level 23 or higher.

Targeting API level 23 or higher also requires that any Cordova plugins you use with your app must utilize the "user permission required APIs" that were introduced with API level 23. Thus, unless you are absolutely certain that all of your plugins are compatible with 23 or above, we highly recommend that you "target" either API level 19 or 21 in your application. Apps that "target" API levels 22 or less are compatible with, and can be installed and run on, Android 6 and later devices.

HTML5 Mobile App Samples

The mobile app samples included with the Intel XDK are published in the Intel managed GoMobile GitHub* account, specifically, https://github.com/gomobile?utf8=✓&q=sample. Of course, searching for "cordova sample apps" will provide many, many more excellent HTML5 mobile app samples.

The Intel XDK mobile app samples are all standard HTML5 Cordova mobile apps, but they are missing the config.xml file that is normally associated with a Cordova mobile app. The easiest way to convert these samples into a standard Cordova app is to create a new project from a sample within the Intel XDK and then use the Cordova Build Package tool to export a usable Cordova project.

Otherwise, to convert those samples by hand, assuming you are using Cordova CLI:

  • create an empty Cordova project using the "cordova create <project-name>" command
  • copy the "www" folder of one of the sample into the empty Cordova project
  • inspect the <sample-name>.xdk file for the plugins required by the sample
  • inspect the <sample-name>.xdk file for any whitelist settings required by the sample

You will then have to edit the config.xml file that was created, when you created the empty Cordova project, by adding the necessary plugins and any other settings (such as the sample's whitelist settings).

In most cases, just adding the required plugins to the config.xml file will be sufficient. Once you have the plugin information you can then use the "cordova platform add <platform-name>" command to add a target build platform (such as Android) to your project, which will also cause Cordova to add any plugins it finds specified in the config.xml file.

Alternatively, you can simply use the "cordova plugin add <plugin-name>" command to add plugins into your project without editing the config.xml file. Either way, you will need to first install Node.js and Cordova CLI to make all of this work. For help with that process, see the article titled Build Your Intel® XDK Mobile App using Cordova* CLI.

Additional Resources

For additional background and questions, see the following forum links:
For more complete information about compiler optimizations, see our Optimization Notice.