Last time we tried to explain why and when WinJS can be a good fit for your HTML application. As an application framework, WinJS is very lean. It’s a great strength, but if you have worked a little with it, you may have found that you write a lot of boilerplate code.
After many applications using WinJS, we decided to share the various helpers that we use as a contrib project, available on Github. If you want to get a glimpse of what WinJS Contrib can do for you, you could have a look at the source, or install the showcase app from the Windows Store. The showcase app illustrate many of the features and allow you to watch the code and the API documentation. The source code for the showcase app is also available on Github.
In this series we will look at the different pieces of WinJS Contrib. But for now, we will provide a general overview.
WinJS Contrib is not delivered as a big library. Instead, we choose to provide several small pieces with dedicated purpose. You will find helpers for communicating with webworkers or iframes, a tiny search engine, helpers to ease the implementation of WinRT features (background transfert, multiscreen, contact API, …), and a bunch of UI controls.
Each of those pieces have been developped and used in one or many applications. Some of those applications can be found in the Windows Store like XBMC Commander, or I’m hungry, and several others apps for our customers.
The heart of WinJS Contrib is in the « core » library. It contains all the helpers for improving syntax and productivity. It’s required by many of the other parts. In addition to the helpers, the core library is also replacing the page control from WinJS. We tried many ways to improve WinJS syntax but unfortunately, WinJS is not built with extensibility in mind, and we find it to be the least invasive way.
The custom page control does not remove anything from core page but it adds a lot. Our page control extend the lifecycle provided in WinJS pages, and provide extension points to unlock many features (enhance the page object, productivity and memory management, using ES6 classes, providing a way to use webcomponent syntax, …).
One package we use in all our projects is the « bindings ». It contains a mecanism for having arguments with your bindings, and a whole lot of basic bindings. For example, bindings for show/hide, enable/disable, binding for images, or for adding ellipsis on text.
Another usefull package is the « animations ». WinJS animations are visually appealing, but one thing that makes them useless in many cases is the fact that you cannot set the duration of the animation, or the item delay. WinJS Contrib animations are all configurable.
To illustrate the various features over this series, we decided to provide a specific Github repository with a small application. You will find a version built only with WinJS, and other versions leveraging features of WinJS Contrib.
In the following episodes, we will go into more details on the various improvements that you will be able to leverage with WinJS & WinJS Contrib, using this application for code demonstrations.