I remember reading about WinJS with skepticism, as my mistrust regarding Microsoft and web standards is hard to shake. After all, initial support for ECMAScript (JavaScript) in Internet Explorer was called JScript.

I ignored the first two WinJS versions, but the latest incarnation demands attention as it enters the crowded market of JavaScript libraries for building robust web interfaces. Here’s a closer look at this impressive JavaScript library, beginning with a stroll down memory lane.

A very different beginning for WinJS

The initial stated goal of WinJS was for developing Windows Store applications, as it was released around the same time as Windows 8. The thinking was more programmers could be drawn to Windows application development if web standards (HTML, CSS, and JavaScript) were used. This was called building a Metro-style application. However, it did not seem to work, as most developers continued to use XAML when targeting the Windows Store.

The second version of WinJS supported Windows 8.1 along with Xbox, but Microsoft eventually realized a platform-centric library is not a good idea. WinJS was re-launched with the latest version (3.0) as a platform- and browser-agnostic library for building web applications that runs on most desktop and mobile browsers. You may still see older versions of WinJS if you look at applications on Xbox (sitting at 1.0), a Windows Phone (just shipped 2.1), or a Windows-based computer.

A Microsoft open technology

Another major change from WinJS’s inception is it is now open source, or open technologies as Microsoft calls it. (It should have been open source from the start, but that is a moot point.) The issues list and pull requests on the GitHub project show an active community.

There seems to be two approaches to building applications with a technology like WinJS. First, Single Page Applications (SPA) are popular with frameworks like Bootstrap making them more popular, and WinJS can easily be used. The other approach is building an application that runs on almost any platform whether it’s a desktop or a mobile user. WinJS provides everything needed to build full-featured, cross-platform user interfaces and can be combined with a platform like Cordova to target mobile users.

The following list covers some of the main features of WinJS.

  • Data binding: This is a basic feature of WinJS, as you can bind a control to a data source with a few lines of JavaScript. The data-win-bind attribute is used in the actual HTML elements.
  • Promises support: Asynchronous functionality provided via promises standard.
  • Fragment loading: This allows you to load HTML defined in another page or file.
  • Easy navigation: There are a number of controls for easily navigating a web application, including drag-and-drop, touch control, and paging.
  • User interface controls: At its core, WinJS is a JavaScript library for building user interfaces with controls like ListView, FlipView, AppBar (the menu from the bottom), NavBar and so forth.
  • Framework integration: You are not restricted to using only WinJS, as it was designed to work alongside other frameworks (such as AngularJS) to build applications.

Get WinJS up and running

The WinJS website provides a nice feel for what it offers before you download and install anything. The Try WinJS page allows you to play with the many user controls available with the ListView displayed by default. It provides a brief description of the control along with a tabbed section of the page to see it in action (output tab) along with its source code (JavaScript, HTML, CSS) (Figure A). In all of the examples, you will see that the features are implemented with only core web standards, so there’s no need to learn a new language (assuming you know HTML, CSS and JavaScript). Also, all of the examples are editable, so you can change the source code to see how it affects the output.

Figure A

Test driving WinJS features like ListView before installing.

Once you decide you must have WinJS for your current project, there are a number of ways to get it. You can install the package (via NuGet, npm, or bower) or simply download the zip file. Also, you can download the source and build it yourself. I chose to install via npm on my machine (Figure B).

Figure B

WinJS installed on Windows 7 machine.

If you are building a web application without Node or another platform, you download the zip file and place the contents in the proper directory (for your application). The result has three directories: css, fonts, and js. Figure C shows the CSS directory where you can choose to use the light (ui-light.css) or dark (ui-dark.css) styling by referencing these files in your HTML source. The following snippet uses the dark style:

The same is true for the JavaScript files, as you include the files necessary for your application:

Figure C

The CSS directory contents in the WinJS package.

The evolution of WinJS continues

WinJS has changed dramatically since its introduction, and it continues to evolve. One goal is to offer a more modular approach to make it easier to use only portions of the library (like individual controls) as opposed to being forced to have everything via one source file; this would reduce file sizes, which can help performance or download times. In addition, the current offering provides styling via one style that delivers a light or dark theme, so this will be extended to allow custom styling via changes to CSS or include your own CSS styling in a separate file.

I find it interesting that WinJS was not built with TypeScript (Microsoft’s JavaScript superset), though I wonder if it will be used more in future versions. As with everything web-related, WinJS continues to evolve, so keep an eye on its progress via the GitHub project.