Developing Cross-Platform Apps Using Intel® XDK and Open-Source JavaScript*

Download Source

Download Article

Download Developing Cross-Platform Apps Using Intel® XDK and Open-Source JavaScript* [PDF 464KB]


We all know the tale of open-source technologies. They are free to use. "Get more with less effort" is what you can expect from open-source libraries. Many top-notch developers contribute to build world class libraries, which not only helps speed up app development but also improves the quality of your product.

In this article, we will see how you can use open-source JavaScript libraries with Intel XDK to build cross-platform applications.


We have many open-source JavaScript libraries on the market today, most of which help make DOM manipulations, build rich UI, etc. They make their best efforts to run on any browser. Essentially, browser discrepancies are handled and encapsulated inside these libraries.

Until recent years, JavaScript was treated as a language for web apps. Of late, its usage has shifted and combined with HTML5 to build not only web applications but also hybrid applications. JavaScript is now a native language for Windows* Store app development.

Intel® XDK is a tool for building cross-platform applications using HTML5 and JavaScript. Using a single tool, you can develop, test, and deploy HTML5 and JavaScript hybrid or web apps. You can deploy your application package to Android*, iOS*, Amazon Appstore, Windows Store, etc.

"Cross-platform" is simply the concept of "write once and deploy anywhere." You can write your app using platform-neutral HTML5 and JavaScript. Intel XDK will help you package this code to run on various platforms like Android, iOS, Windows 8, Tizen*, etc. Not only can code written in HTML and JavaScript be viewed on a browser, it can also be viewed using WebView. Every platform has a control called WebView that your app can use to render HTML pages. Intel XDK uses WebView to render your code on any supported platform. This Intel XDK container has access to the platform’s native capabilities, which later gets exposed to your app through the JavaScript stack.

Windows Store app developers generally face a few issues when using open-source JavaScript, mainly due to Windows security features. For example, Windows Store prohibits dynamic loading of JavaScript resources or runtime manipulation of DOM (although there is a workaround to this problem). However, since apps developed in Intel XDK run in a container, those restrictions do not apply.

With this background, we will build a sample application using AngularJS, one of the most popular open-source JS libraries.

Limitation in Intel XDK

There is one "gotcha" you should know about: Intel XDK’s app designer manipulates the DOM for UI designing. If you choose to use a JS library that conflicts with Intel XDK’s app designer CSS classes, you will not be able to use its powerful app designer option. In such cases, you can use the "Start with blank project" option, which allows you to still use all the Intel XDK features except app designer.

The example app uses AngularJS, which does not conflict with the app designer DOM processing. So, you can use the designer to design the static UI and then make it dynamic using AngularJS.

Sample Student Register Application

The sample app is a simple student register that lists all the students in a school. Users are allowed to add student names to the list. This app doesn’t implement the list manipulation features as it is something that you can easily do using AngularJS.

Steps to Create a Simple Student Register Application

Step 1: Create a new app and select the "Start with App Designer" option. Then enter a name for your project and click create.

Step 2: Select the framework you want for your application. In my example, I selected the App Framework itself.

Next, start designing your app page.

We need the following fields for our application and a list of students.


  1. Name
  2. Last Name
  3. Gender
  4. Age
  5. Section
  6. An Add button

For this design, select the viewport as tablet.

Then add a listview to show the students added. Since we want to populate the listview dynamically, we will retain one list item (to get the format) and delete all other list items.

Now switch to CODE VIEW.

Step 3: You need to download the latest angular.js file from

Create a new JS folder in the www folder, and copy the angular.js file you downloaded from the website. Now add a reference to this file in your index.html file.

With this step, your angular.js is ready to use.

Step 4: Create a controller class. Angular.js uses a controller class to handle user events and data manipulations. Let’s use an inline script tag (you can create your custom JS file and add this code to it).

<script type="text/javascript">
            function StudentManager($scope)
                //An JSON array to hold the student list.
                $scope.students = [];
                //addStudent will add the new student to the list.
                $scope.addStudent = function() {
                $scope.firstName = '';
                $scope.lastName = '';
                $scope.age = 0;
                $scope.gender = '';
                $scope.section = '';

This will create a new controller class for your page.

Step 5: Change the HTML content.

Step 5.1: We will now bootstrap the page with "ng-app". Let’s set this attribute to <body id="afui" ng-app> tag.

Caution: Sometimes when you switch between designer view and code view, the system may remove this attribute. Please be sure to check it and add it back if needed.

Step 5.2: Associate the controller to the HTML control. We will attach this controller to the root level div element.

<div class="uwrap" id="content" ng-controller="StudentManager">

Step 5.3: Now we need to start attaching ng-models to the input fields. For that, we need to locate our first name, last name, age, and section input fields.

<div class="table-thing with-label widget uib_w_2 d-margins" data-uib="app_framework/input" data-ver="1">
     <label class="narrow-control label-inline">First Name</label>
	<input class="wide-control" type="text" ng-model="firstName">

In the same way, let’s add other ng-model for other fields as well. We will call them lastName, age, gender, and section, respectively.

Step 5.4: Find the "Add" button’s anchor tag and associate the addStudent event handler to the ng-click event.

<a class="button widget uib_w_10 d-margins green" data-uib="app_framework/button" ng-click="addStudent()" data-ver="1" >Add</a>

Step 6: Show the list of students in the listview.

Find the single list item that we left behind. Replace that <li> with the following:

<li class="widget uib_w_8" data-uib="app_framework/listitem" data-ver="1" ng-repeat="student in students"><a>Name: {{student.firstName}} {{student.lastName}} <br />Age: {{student.age}}<br /> Gender: {{student.gender}} <br />Section: {{student.section}}</a></li>

That’s it. Now test your code on an emulator and fix any final issues.

Step 7: After fixing all the issues, your code is ready for deployment. Choose your desired target store and build the package by providing necessary metadata information.

The following screen shot shows the working app in Windows Store.

This is how it looks on an iPad*.


Intel XDK is a great tool for developing, testing, and packaging your HTML5 and JavaScript app. Open-source JavaScript libraries make our lives simpler by providing world-class, cross-browser-compatible libraries. Intel XDK tool supports most open-source JavaScript libraries with the "Start with blank project" option. This option allows you to use all the features of Intel XDK except App Designer. You can import your existing code base with this option as well.

App Designer is undoubtedly a great feature of the tool. However, if you want to use it, you need to choose those libraries that do not conflict with the App Designer’s functioning. One example that doesn’t work with the App Designer is KnockoutJS, so you cannot use this library.

About the Author

Raghavendra Ural is an Intel evangelist and speaker on such topics as Windows 8 Sensors, HTML5, Intel XDK, and Intel® Perceptual Computing. Raghavendra’s IT journey started 14 years ago, and since then he has worked on a wide range of Web and enterprise technologies. Currently he is responsible for evangelizing Windows 8, HTML5, and other Intel tools and SDKs. Raghavendra enjoys sharing knowledge with others, understanding technical challenges, and providing solutions. He is currently working as a Developer Evangelist in Intel’s Developer Relationships Division.

Intel and the Intel logo are trademarks of Intel Corporation in the U.S. and/or other countries.

Copyright © 2014 Intel Corporation. All rights reserved.

*Other names and brands may be claimed as the property of others.

Einzelheiten zur Compiler-Optimierung finden Sie in unserem Optimierungshinweis.