Download Article

Introduction

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.

Background

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.

Fields:

Name

Last Name

Gender

Age

Section

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.

Summary

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.