Voice Of A Developer: Adding WinJS To Your Web App - Part 36

Introduction

Before moving further, let us look at the previous articles of the series

JavaScript

JavaScript is a language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript, and what mistakes a developer generally makes and what differences they should be aware of. WinJS is a Windows library for JavaScript. WinJS provides the controls. You need to make your app professional, equipped with the modern UI controls and include JS, CSS, and HTML all in one place. It is an open-source library by Microsoft and the source code is available at GitHub.

What’s the use of WinJS?

WinJS contains the standard implementation of Win 8 controls which aren’t covered by HTML5. It makes it possible to add Windows UI controls in HTML such as:

I found these controls pretty cool as it enhances your webApp UI experience. Microsoft developed this for a universal experience across Win 8 and HTML apps, where you can add WinJS.

Which frameworks are supported by WinJS?

WinJS provides support to the three popular JavaScript frameworks via adapters. These are:

What is an adapter?

An adapter is a slim layer, which facilitates the usage of WinJS controls with the above three frameworks. Hence, there are different adapters available.

Create your first WinJS application

I will leverage the AngularJS adapter to build my first WinJS Application. I use the Yeoman Angular generator to scaffold my Application. Yeoman is a fantastic tool to kickstart new projects. For more information, visit here.

Setup basic AngularJS webapp

• Go to command prompt, type YO and it will show you the list of installed generators.

You must install the Angular generator before you can use it. If you can’t find the installed Angular generator, then scroll below to see the option:

You will see the list of matching generators.

Select the top, “Angular,” to install it.

Add WinJS in your application

There are multiple ways to include WinJS in your Application.

Goto directory app\bower_components and see the folder structure, shown below: