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:
- Optional HTML UI layout tool or framework.
- 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
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*.
The Brackets editor runs on Microsoft Windows*, Apple macOS* and most distributions of the Linux* OS.
The Atom editor runs on Microsoft Windows, Apple macOS and most distributions of the Linux OS.
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.
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
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
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
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.
- 10 Frameworks for Mobile Hybrid Apps
- 7 Lessons from 3 Years of HTML5 Mobile Application Development
- What’s the Difference between Native, Hybrid and Web Mobile App Development?
For additional background and questions, see the following forum links:
- Why is the XDK no longer focused on mobile?
- Can the XDK be open-sourced?
- Will Intel offer a paid mobile build service?
- This change to the XDK happened so suddenly!
- Why is the XDK changing?
- Future direction of the XDK
- How to use PhoneGap Build to build your XDK app
- Errors creating and importing build certificates and keystores
- XDK cloud build APK size vs Cordova CLI and PhoneGap Build APK size