Introduction
Intel XDK is a cross platform mobile application development environment which lets you create mobile and tablet apps using HTML5 and JavaScript. With a single code base, You can create mobile apps for Android, iOS, Windows Phone 8, Windows 8 Store, Tizen, Amazon and Nook.
Intel XDK aims to make the same source code compatible on all the mobile operating systems. It attempts to keep the process simple by including all possible target platforms in one package and collecting several tools that may be familiar and useful to you.
Intel XDK aims to provide a development environment for both native and mobile web developers to create cross platform mobile apps.
In this tip, I will provide an overview of Intel XDK architecture and various tools that are integrated into it.
Should You Create a Web App or Mobile App?
Before we get into Intel XDK, it's necessary to know whether you should build a mobile app or a web app.
A mobile app is usually installed on the device and operating system and/or frameworks provided various kinds of APIs and resource management. They are usually written in Objective-C and more recently Swift (for iOS) or Java (for Android).
A Web app runs inside a browser and, to the extent it might rely on browser-based APIs, compatibility across the various Web browsers (Chrome, Safari, Firefox, etc.) depends on what APIs are being called and which ones are supported by each of the browsers. Web apps are usually written in HTML, CSS, and JavaScript.
Intel XDK apps are mobile apps written in HTML, CSS and JavaScript. These kinds of mobile apps which are written in web languages are called hybrid apps.
Half a decade ago, it was easy to decide between developing a Web apps or mobile apps. Whereas mobile apps had direct access all of the local system’s hardware APIs (e.g.: camera, microphone, accelerometer, etc.), Web apps were very limited in terms of local APIs accessibility. Also, unlike today’s responsive Web apps that dynamically adjust to the host device’s screen dimensions, early Web apps bore no such responsiveness and were often difficult to view or navigate.
But now, with the development of HTML5 and CSS3 and with the advent of faster wireless connectivity, browsers are able to provide almost all kinds of APIs that were previously only available to native mobile applications..
So, now it has become very difficult for developers to choose between mobile and Web apps.
But here are just few advantages of creating a Web app over a mobile app:
- Mobile apps depend on external server APIs due to which the data flowing out of mobile apps are very discoverable. No API is truly private. But when it comes to web apps, we can do all the work on server side therefore less transfer of data and less potential discoverable data. So regarding security web apps have an upper hand.
- Web apps are not? required to be installed and are available for all without the need for app stores, multiple builds and distribution. Users only need to visit a Web address.
Here are just few advantages of creating a mobile app over a Web app:
- Web apps still don’t have access to all the device features. For example: controlling flashlight, measuring hardware performance, detecting app state changes, etc. As the hardware gets better, taking on new features, it takes a while before the APIs for accessing those features through the browser via JavaScript are available to all browsers.
- When it comes to building graphics rich applications like Games or Animations, Web apps tend to be slower than mobile apps because Web apps are interpreted whereas mobile apps are compiled. Although Web apps have access to local storage, local storage access for mobile tends to be more robust. Mobile apps therefore rely less on the network for instructions and data.
So it all depends on your needs when choosing between Web and mobile. Some apps like GMail, Facebook, Google Maps, etc. are available as both. But apps like Whatsapp are only available as a mobile app because it needs access to your contact list and the cellular network for which standard browser-based APIs are not available (for the Web equivalent).
What Problem Does Intel XDK Solve?
Intel XDK aims to solve many major problems of individual developers and enterprises. Here are just a few:
- No extra development skills required. Considering developers of all types are familiar with HTML, CSS and JavaScript, developing apps using Intel XDK does not require the developer to learn a new set of languages or acquire special skills.
- Cost of development is decreased by far. Enterprises and freelance employees only need to hire developers with just one skill set and build apps for all mobile platforms at the same cost of building for one platform.
- Speed of development is increased by far. Intel XDK integrates testing, debugging and build tools into one integrated solution that makes developers more productive compared to the time wasted when switching between various tools.
Why You Should Learn Intel XDK?
So, what are the benefits of learning Intel’s XDK? If you are a Web app developer and want to create mobile apps without having to learn a new language, then Intel XDK is worth exploring. It’s superior to other application development environments due to its cross platform nature and lets you build apps with basic development languages like HTML, CSS and JavaScript. With Intel XDK, you don’t need to learn mobile OS specific programming languages like Java, Objective-C, Swift, C#, etc. in order to create mobile apps.
There are other development environments like Phonegap, Sencha, Appcelerator, etc. which let you do the same. But Intel XDK stands out of the crowd due to its integration of an editor, debugger, emulator and binary builder into one tool. You can create apps using the HTML and JavaScript you already know.
How Does Intel XDK Work?
Intel XDK uses a native framework called Cordova to run HTML5 and JavaScript inside a native app. The app source code is wrapped inside a native app and the native app embeds and runs the source code inside a webview (a native browser object). As developers might imagine, there’s a fair amount of system overhead involved when containerizing a Web app in a native app. In other words, wrapping the source code inside a Webview adds some extra weight to the entire package. Therefore Intel XDK is not as suitable to compute-intensive applications such as graphics rich Games whose performance would be slowed down by weighty code. WebGL is not the option for creating games using Intel XDK because of its lack of support in mobile browsers. If you want to create cross platform games, then Unity 3D is a good choice as it allows you to script games using JavaScript, C# or Python.
Cordova Framework allows you to create plugins which acts as a bridge between JavaScript and the native platform; this allows you to execute native code using JavaScript. Intel XDK provides access to device features like Accelerometer, GPS, Sensors etc via Intel XDK APIs which are cordova plugins in nutshell.
Cordova has a plugin repository website where you can find almost every kind of plugin. Some popular plugins in the Cordova repository are camera, file system, splash screen, etc.
Intel XDK APIs
Intel XDK provides some built in Cordova plugins called as Intel XDK APIs. Intel XDK provides APIs to access and operate on accelerometer, camera, canvas, contacts, device, file, geolocation, notification, sound and various other functionality native to mobile OS.
Intel XDK Project Types
An Intel XDK project is a combination of various Intel XDK integrated tools such as UI designer, code editor, debugger, emulator and binary generator. Every Intel XDK app on the process of development is represented by a project type.
This is screen which appears as soon as Intel XDK development software is runned. It asks for creating a project.
While creating a new Intel XDK app project, you will be asked to choose a project type. There are three types: Blank Project, APP Starter and APP Designer.
- Blank project lets you to create an app from a starter HTML file. It provides a Bracket text editor to edit code. This is suitable if you want to write CSS and HTML for your UI.
- APP Starter lets you quickly prototype an HTML5 app based on the App Framework mobile optimized UI library. APP Framework is a CSS design framework for HTML5 mobile applications. It provides a drag-and-drop interface. Drag-and-Drop is easier as you don’t have to master CSS for designing apps. The code it produces is completely bug free and the quality of code it produces is better than what you can write for blank project. APP Starter is a good starting point if you are new to HTML5. It also lets you edit code using text editor. You cannot create responsive design layout of your wish, it’s up to the APP framework to decide how the layout changes when viewport size changes. So it’s not wrong to say that APP starter is the best way to prototype your app if you are a new designer.
- APP Designer lets you quickly create an app in common UI frameworks (APP Framework, Bootstrap, jQuery Mobile, Topcoat etc) using this drag-and-drop tool that supports responsive design layout. You can continue developing by toggling to the code editor view and back to the designer view. APP designer is a good starting point if you are familiar with HTML5 and media queries. Using the APP designer is best way to prototype your app if you are an experienced designer.
Intel XDK Build Types
Intel XDK build is the procedure of generating a app binary from app source code. There are two types of build for Intel XDK apps: Cordova and Legacy.
- Cordova Hybrid build use Cordova 3.X framework. appMobi and various other web services plugins are not available for use in these apps. appMobi is a company which provides APIs for push notifications and in-app purchase for Intel XDK apps. Similarly, there are many other companies who provide various other APIs for Intel XDK apps. These apps support Cordova third party plugins.
- Legacy build uses an older version of the Cordova framework. But it includes appMobi and other web services plugins for use. These apps don’t support Cordova third party plugins.
Here is how the Intel XDK build screen looks:
For developers point of view, stick to Cordova hybrid build as it supports third party plugins using which you can add almost any functionality to the app.
Testing Intel XDK APPs
Like every other development environment, Intel XDK provides an emulator to test apps. But emulator is not powerful enough to let you test all the Intel XDK APIs. Here is how Intel XDK emulator looks:
To test your app on device, you can either build the app or else you can use the Intel APP Preview. Intel APP Preview is a mobile app which connects to the app preview cloud and loads app source code. Intel APP preview is not an emulator rather it is a native app. Intel APP Preview is integrated in Intel XDK development environment.
Intel APP preview loads the app source code dynamically into webview and runs it. You don’t have to build the app to test it. You need to upload the code into app preview via Intel’s app preview cloud service. Cloud service is integrated in Intel XDK development software.
There are two types of Intel APP Preview: APP Preview and APP Preview Legacy. App preview uses Cordova 3.X framework. APP Preview Legacy on the other hand, uses and older version but supports testing of appMobi services. Intel APP Preview doesn’t support testing of external plugins.
If you are planning to build and publish app as hybrid app, then use APP preview for testing. If you are planning to build and publish app as legacy app, then use APP preview legacy for testing. Choice of APP preview is independent on Project type.
To test third party plugins, the only option you have is to build Cordova hybrid app binary and run it in real device.
Debugging Intel XDK APPs
You can live debug Intel XDK app while it’s running in emulator or inside app preview. Intel XDK provides a debugging environment similar to the one you find on web browsers. This is what makes it great.
Final Thoughts
In this article, I introduced you to various components of Intel XDK app development. Overall, we can see that Intel aims to make Intel XDK the best HTML5 mobile development platform with its integration with various testing and designing tools. You can find great Intel XDK learning resources at Intel XDK’s Official Documentation and QNimate’s Intel XDK Library.
In this post, you’ve seen some of the features of Intel XDK and how you are going to benefit from it. Please share your experiences with Intel XDK by commenting below.
