WinJS 3.0 is a platform- and browser-agnostic library for building web applications that runs on most desktop and mobile browsers. Learn how it's evolved since version 1.0.
A very different beginning for WinJS
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.
- 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.
- 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
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).
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:
<link href="css/ui-dark.css" rel="stylesheet">
<script src="js/base.js"></script> <script src="js/ui.js"></script> <script src=”js/WinJS.js></script>
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.