Le Post Infeeny

Les articles des consultants et experts Infeeny

Why WinJS can be a good front-end framework…

We are still early in 2015 and the JavaScript front-end ecosystem is still hot.

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.

WinJS

WinJS is a JavaScript front-end framework that was publicly announced in september 2011, at the first Microsoft //Build conference. At that time, it was designed to make native Windows applications using HTML and javascript. Since then, it has been open-sources (go have a look at it on Github) and the latest version are designed to work well on all recent mobile devices. WinJS has basics for the different peaces needed by an application framework (templates, binding, messaging, …) and a rich set of UI widgets.

WinJS has been designed for making fast, native looking applications, and it’s great for that. Whether it is on Android, iOS, or Windows, you can take the most of what your device can do with web technologies. You can use it for web (it is still HTML/CSS/Javascript) but it’s really not designed for it.

What is great with it is that the framework rely on componentization of your UI. You are building your UI by composing controls. Controls can be simple JavaScript classes, or they can rely on « Fragments ». A fragment is loaded from an HTML file, and all dependencies defined in the HTML are loaded along with the fragment. You could modularize your UI and logic, and load it incrementally in a very natural way.

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 !

2 réponses à “Why WinJS can be a good front-end framework…

  1. Pingback: Introducing WinJS Contrib | Le Post de MCNEXT

  2. Pingback: WinJS Contrib Basics | Le Post de MCNEXT

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :