There are many popular frameworks out there, Angular 1.x, Angular 2 in alpha, React, Ember, Backbone, Aurelia, Polymer, …
This post is the first on a series about WinJS. In this first episode, we will see what is WinJS, and what it is good for.
Web vs Native
All those framework have their own personnality, strengths and weaknesses. But they all have one thing in common : they are built for the web. To my point of view, none of those frameworks are built for making embedded applications like native HTML Windows apps, Cordova apps, Firefox OS apps, …
Designing and optimizing a mobile application for web, or for an embedded applications is different. When building for the mobile web, your worse ennemy is network latency. Every image, stylesheet or script is slowing your site down, and every bytes count. You try to bundle your files as much as possible to avoid those pitfalls.
When you are building for an embedded application, you don’t care about those network latencies. Every file resides on the device, and loading them is as fast as the SSD is on the device. In fact, on most modern hard drives, it can be faster to load several small files than loading a big one. In addition, in those applications, you will favor loading your application incrementally. It helps your app start fast, and saves memory and battery on the device.
Users don’t care…
With an embedded application, users expectations are different. The user does not know, or care, that your application is built using web technologies. He click on your app icon and assumes that it will perform as any other app on his device. The rendering engines are getting faster and faster but it is still not as performant as native.
To achieve a native look and feel, you must have a fine grained control over the DOM, and you sometimes have to orchestrate how and when your views are built and rendered. Common frameworks tends to abstract DOM away and relies on data binding to build UI. It could lead to a lot of frictions when it comes to optimizing your views. Some frameworks, especially Ionic are built with that performance constraint in mind, but unfortunately, they does not work well on all platforms.
As you can see, the mindset when building an application with WinJS is very much like what you have with WebComponents approaches (except for the Shadow DOM aspects). The main difference is about the syntax you use for declaring your controls (instead of defining custom elements, you use attributes).
So, WinJS is wonderful ?
Well… considering what you can do with it, yes. But it is far from perfect. Sometimes, it’s really not developper friendly.
WinJS is very unopiniated about how to do things. It’s great because you stay in control but it means you have to do a lot of things by hand. What is really sad is that, in its almost 4 years, WinJS has not improved at all for that matter. Microsoft has focused their efforts on UI widgets (making them cross platform for example), but you are still writing a lot of unnecessary boilerplate code.
We have made dozens of applications with WinJS, for Windows, as well as Android or iOS. From time to time we gathered a lot of tools and helpers, and a while ago we decided to publish them to the community, as a « WinJS Contrib » project. In the other parts of this series, we will show you the different aspects that you could improve by using WinJS Contrib.
We will see how to reduce boilerplate code, use ES6/Typescript classes, use WinJS with webcomponents syntax in the markup… so stay tuned !