HTML5 Mobile App Development Using Intel XDK

Cross-platform mobile application development is a technique of writing single codebase for apps that will be in the end installed and used in different mobile operating systems. Applications built using this technique are called as cross-platform mobile apps. Cross-platform mobile apps that are written in HTML, CSS and JavaScript are called as hybrid apps.

In this article we will learn how to create hybrid apps using Intel XDK and design hybrid apps using Ionic design components. In this chapter we will specifically cover what is Intel XDK, why you should use Intel XDK, how does Intel XDK work and its limitations.

What Do You Need to Know?

Before you start learning to create hybrid apps using Intel XDK and Ionic you need to know basics of how to create websites that is you should know basics of HTML, CSS, JavaScript and any backend technology. Mostly web developers are the ones who prefer to create hybrid apps, as they don’t have to learn new programming languages and frameworks for creating mobile apps.

Native, Hybrid and Web apps

You will often hear the terms native app, hybrid app and web app. Often developers get confused between these terms therefore it’s important to clearly understand the meaning of each of these terms.

• Native Apps: Native apps live on the device and are opened through icons on the device home screen. They are developed to work specifically on one operating system. They are installed through platform specific stores. They can take advantage of all device features and can work offline.
• Web Apps: Web apps are websites that are designed to look and behave like native apps – for example: they can hide browser’s UI components, scale according to the screen width etc. Users can also add them to the home screen. HTML5 features make it behave more like a native app – for example: HTML5 application cache makes it possible to access a web app without Internet connection. Web apps don’t have access to all native device features such as toggling flashlight, detecting app state changes, push notifications and so on.
• Hybrid Apps: Hybrid apps are the ones that combine the best and worst elements of both native and web apps. They are written in HTML, CSS and JavaScript just like web apps so that they can be used in any platform and are wrapped inside a native app so that it can access all device features, work offline and can be installed through platform specific stores. But just like web apps they have slow performance because they are interpreted inside a native app. They also lack native look and feel just like web apps.

Each of these app types has their own advantages and disadvantages. It may sometimes seem difficult to choose between them but its not that hard to choose.

So when it comes to choosing one of these kinds of apps in the end all depends on the features of the app, graphics, and how you want to distribute the app. Even budget and time are important factors.

You should go with native app development if you are planning to create games or any other kind of app that includes high graphics and animations. Native apps are compiled therefore they are best for these kinds of apps. Although WebGL can be used by hybrid or web apps to create games but still performance wise WebGL will always be behind native code because JavaScript is interpreted and also WebGL is not supported by all mobile browsers. If you want to build cross platform mobile games and you don’t to use hybrid apps than in this case you go for game development engines like Unity 3D which let’s you build games for multiple platforms with single code base and also let’s you write game scripts using major languages such as C#, JavaScript and Python.

You should consider creating a web app if your app doesn’t depend on native a feature that is it only relays on browser APIs. For example: If you have a responsive or adaptive designed website and you want users to be able to use it as a app then you can go with web app. Converting a mobile designed website to a web app can be done with great ease. You simply need to add mobile browser specific meta tags and optionally add HTML5 application cache functionality.

Similarly you should consider creating a hybrid app if you want to create an app using browser technologies that also uses native features. Hybrid apps can be developed with lower budget and less time compared to native apps. Some developers develop hybrid apps instead of web apps when they want the users to be able to download it via application stores.

WebView in Nutshell

A webview is a native UI element used to load and display a HTML file. HTML files inside a hybrid app is executed in a webview. The capabilities of a webview vary depending on the operating system. Operating systems can have different types of webviews, each with different set of features and/or underlying engine. For example: iOS 8 supports two different webviews that are WKWebView and UIWebView.

What is Apache Cordova?

Apache Cordova is an open source mobile development framework. It is used to create hybrid mobile apps. Apache cordova comprises of CLI (command line interface) tools for desktop operating systems and native library called as cordova library for mobile apps.

Webview doesn’t provide any interface for JavaScript and native code to communicate with each other. So cordova library creates a bridge between JavaScript executing in webview and native code so that they communicate with each other therefore making it possible for JavaScript to access all different native features.

Cordova library uses many different hacks and techniques to create this bridge. The implementation of the bridge varies across between different operating systems and cordova versions.

Hybrid apps that use cordova library are called as cordova apps.

Cordova CLI tools are used to emulate and build hybrid apps.

Cordova Plugins

A cordova plugin is a package of JavaScript, native code and manifest files when installed in a cordova app it allows JavaScript running in the webview to access some specific native functionality.

Each method exposed by the plugin’s JavaScript interface is mapped to a method in the plugin’s native code via the cordova bridge, which also let’s you pass parameters back and forth between the JavaScript and native functions.

JavaScript files of a plugin remain same across all operating systems but the native code files differ depending on operating systems.

In this book we won’t learn how to create cordova plugins but we will see how to find, install and use some important cordova plugins. Creating cordova plugins requires you have to native app development knowledge. Cordova plugins for almost every native feature is available on web therefore it won’t be necessary to learn to develop own cordova plugins.

Cordova team has created a set of cordova plugins called as official cordova plugins. The APIs exposed by these plugins are called as core cordova device APIs.

Here is an image that demonstrates the complete architecture of how cordova apps work:

Getting Started with Intel XDK

Intel XDK (Intel cross platform development kit) is a free software that provides comprehensive facilities to software developers for creating cordova apps.

You don’t have to use cordova CLI to add plugins, emulate and build cordova apps which was cumbersome task instead you can use Intel XDK’s GUI tools to do all these with great ease.

It also provides many other facilities such as code editing, in-built emulator, debugging and cloud building of cordova apps, which are not available by cordova CLI.

If you use cordova CLI then to emulate, test on real device or build cordova apps you have to install platform specific IDEs such as Android Studio, XCode, Visual Studio etc but Intel XDK doesn’t require you to install all these.

Therefore you can also call Intel XDK as an IDE (integrated development kit) for creating cordova apps.

Intel XDK also provides advanced facilities such as app designer, game asset manager, Live Layout Editing and App Preview.

Intel XDK software is available for all major desktop operating systems that is OS X, Windows and Linux.

Intel XDK team has created a set of cordova plugins called as Intel XDK plugins. These plugins are only available for apps build using Intel XDK. The APIs exposed by Intel XDK plugins are called as Intel XDK APIs.

Supported Build Platforms

Intel XDK can build cordova apps for iOS, Android and Windows platforms. Although some versions of cordova library is also available for other operating systems like Amazon Fire OS, Blackberry 10 and Firefox OS but at the time of writing this book Intel XDK only supports build for iOS, Android and Windows platforms.

In this book we will only see how to build for iOS and Android operating systems, as they are the most popular ones.

Intel XDK builds app binary on their cloud servers instead of building it locally.

Intel XDK Emulator

Intel XDK comes with a built in emulator that is more like a browser with some extra APIs that mirror official cordova and Intel XDK plugins. This built in emulator is not as real and powerful as official emulators that ship with XCode and Android Studio. The runtime engine that is used in the emulator is essentially a chromium desktop browser that has far more better performance and supports more HTML5 features than the webview found in real devices.

When it comes to design the Intel XDK emulator doesn’t provide the level of simulation necessary to confirm that the design will look and behave the same way in real device also. So when it comes to designing it’s mostly useful for basic design testing.

When it comes to functionality also the Intel XDK emulator doesn’t provide the level of simulation and features necessary to confirm that the functionality will behave the same way in real device also. It also doesn’t support third party cordova plugins. So when it comes to functionality also it’s mostly useful for basic functionality testing.

Here is an image which shows the built in Intel XDK emulator:

If you are using the built in emulator to test the app then Intel XDK provides a built-in Google Chrome DevTools (CDT) to debug your app. While testing using emulator, Intel XDK also provides tools to debug functionality related to official cordova plugins and Intel XDK plguins.

Intel App Preview

Due to the fact that you cannot relay on Intel XDK emulator to confirm you design and as building an app binary to test the design is a time taking task therefore Intel came up with a mobile app called as App Preview, which can run your app on real device so that you can be sure how your app is going to look and behave w.r.t design.

Even App Preview doesn’t support third party cordova plugins. Therefore when it comes to functionality also it’s mostly useful for basic functionality testing. But it can provide accurate results for testing functionality that depends only on official cordova plugins and Intel XDK plugins therefore in case your app only depends on official cordova plugins and Intel XDK plugins then App Preview is the best choice for testing your app.

App preview loads an Intel XDK project from cloud and runs it. This method doesn’t require you even connect your phone to desktop and also you don’t have to build app binary. You just need to update project files on the cloud using Intel XDK.

Here is an image which shows how Intel APP Preview looks:

Here is an image which shows how Intel XDK’s APP Preview configuration tool looks. From there you can push the app source code to Intel cloud servers.

If you are using App Preview to test your app then you have use built-in weinre debugger to debug.

Debugger

Intel XDK has another tool integrated for testing and debugging called as USB debugger. It let’s us test the app on real device, it supports third party plugins and also it integrates GDT debugger. It’s the most advanced way of testing and bugging.

It’s a lengthy process to initiate USB debugger as it requires you to connect your phone to the computer using USB cable. The USB debugger is more advanced as it provides many advanced debugging features such as breakpoints and profiling. USB debugger doesn’t require Internet and if any changes are made to source code in Intel XDK while USB debugger is running then its updated via USB cable. Remember that to initiate the USB debugger you many need Internet depending on whether the prerequisites are installed or not. The best thing about USB debugger is that it supports third party cordova plugins as it builds a custom version of app preview that has the third party plugins installed.

Here is an image that shows the USB debugger used to debug app running in App Preview:

Profiler

Intel XDK provides a profiling tool that is more advanced then the profiler integrated into GDT. The profiler can be used only with Android operating system. To use this profiler you need to connect your Android phone via USB cable.

Here is an image that shows the Intel XDK’s advanced profiler:

Game Asset Manager

Many developers use Intel XDK to develop mobile games i.e., using HTML5 APIs such as WebGL and Canvas to create games due to the fact that Intel XDK provides special features to game developers that includes a game asset manager, samples and templates.

The game development special features are only available for some selected HTML5 game development libraries.

The game asset manager provides a central place to view game assets and details about them. The game asset manager also generates code snippets for assets that you can use to develop games faster. Code snippets are specific to game library and version.

App Designer

Intel XDK provides a tool called as app designer that is a WYSIWYG tool for designing app. App designer let’s you design your app using one of the app design libraries it supports. Libraries supported by app designer are: App Framework, Ratchet, Ionic, Framework 7, Twitter Bootstrap 3, jQuery Mobile and Topcoat.

Live Layout Editing

If you are using App Preview to test your design then every time you make change to source code you need to push the updated files to cloud server and then pull them from App Preview to view the updated design.

Instead of using this procedure developers used USB debugger, which was faster as it updated the code and reloaded the app using USB.

Even while using USB debugger you have to press couple of buttons to reveal the new design therefore Intel XDK came up with another feature for testing and editing app design specifically on App Preview called as Live Layout Editing.

Live Layout Editing runs the app on App Preview and while you are editing the app source code using the built in editor the changes appear in real-time as you make edits. The Live Layout Editing feature works on top of WiFi network i.e., both mobile device and computer must be connected on the same WiFi network.

Web Services

Intel XDK provides a GUI tool to make it easy to explore, test and integrate a collection third-party web services in you app. You can also manually add more web services in this tool.

The tool can generate code for using the web services and also you can use it to populate the response of web services in the HTML elements of app designer.

Demerits

Every development environment has some demerits. Let’s see the demerits of Intel XDK:

• It may seem like you don’t need a Mac to create iOS apps as Intel XDK builds app binary on their cloud servers but to integrate features like push notification, use USB debugger and to publish a app to app store you will need a Mac.
• Intel XDK cloud build makes it possible to build iOS and Windows apps in Windows and Mac respectively but to build the app every time you need to upload the source code to Intel XDK’s servers and then download the app binary which is an time taking task. It doesn’t provide any ways to build app without Internet connection.
• Some cordova plugins require you to manually make some permission and other requirement related tweaks to XCode and/or Android studio projects to make the plugin work. Therefore it’s not possible to use those plugins in cordova app build using Intel XDK as Intel XDK builds apps on their cloud servers.
• If you are creating a cordova app for Windows operating system and you are using App Preview to test the app then you cannot use USB debugger to test and debug the app because it doesn’t support debugging on Windows devices.
• The special game development features provided by Intel XDK are only available for some selected 2D game development libraries. In case you want to create a 3D game then you won’t be able to use these features.

What is appMobi?

appMobi is a framework like cordova to create hybrid apps. It has its own native library to create a bridge between webview and native code. appMobi team has build IDE for creating appMobi apps. They also provided free cloud services and APIs for integrating features like push notifications, in-app purchase etc on appMobi apps.

In 2013, Intel acquired appMobi and named the IDE as Intel XDK. Later on they added support for building cordova apps. Soon Intel XDK will drop support for appMobi apps and will end up being an IDE for building cordova apps only. Therefore in this book we will not cover anything more about appMobi.

Crosswalk

Crosswalk is a mobile and desktop operating system hybrid app development framework just like cordova but it supports some desktop operating systems also. It let’s you build hybrid apps for Android, iOS, Linux and Tizen. It comprises of CLI tools and a native library. The crosswalk native library (or crosswalk web runtime) provides its own webview instead of using the webview provided by the operating system.

The default webview provided by the operating system by default doesn’t guarantee support for advanced HTML5 APIs like WebGL, WebRTC, Vibration API and Presentation API but the webview provided by Crosswalk supports all these APIs therefore making it great for developing applications based on these APIs.

To access the native functionality you can create crosswalk extensions that are similar to cordova plugins in cordova framework.

Many hybrid app developers prefer to use cordova because of availability of huge number of plugins. But cordova use the webview provided by the operating system, which may lack support for the advanced HTML5 APIs.

Crosswalk came up with an idea to combine both cordova and crosswalk that is you can replace the default webview in cordova apps with crosswalk webview or make installation of cordova plugins in crosswalk app possible via a special crosswalk extension. The method depends on the cordova version and operating system for which you are building the hybrid app.

Crosswalk webview in iOS actually extends the WKWebView provided by iOS. WKWebView supports advanced HTML5 APIs. In iOS, you are not allowed to use any other webview that is you have to use the webviews provided by iOS. WKWebView was debuted in iOS 8 therefore crosswalk for iOS is supported from iOS 8 onwards. Developers use crosswalk for iOS only if they want to use crosswalk extensions because it doesn’t provide any other benefits.

Build Crosswalk APPs in Intel XDK

Intel XDK let’s you build hybrid apps that combine both cordova and crosswalk i.e., you get to use the crosswalk webview and also cordova plugins. Intel XDK builds these apps only for Android operating system.

Summary

In this chapter, we learned the different ways to create mobile apps, what are cordova apps and how Intel XDK makes it easy to create cordova apps. We saw an overview of the features provided by Intel XDK. Now you must be pretty much clear with why Intel XDK is the best option available for creating cordova apps.