Some Advantages of XAML Versus WinJS in UI Development for Windows

I’ve worked on application prototypes for Microsoft using both XAML (C#/C++) and WinJS (HTML/CSS/JavaScript). While XAML has a tremendous advantage regarding MVVM (Model View / View Model), custom properties, explicit tags and XAML Storyboards, WinJS has the advantage of div abstraction, CSS and JavaScript’s seemingly limitless capabilities, not to mention jQuery support.

Let’s scratch the surface a bit into why both have benefits in an agile development processXAML’s gesture capabilities allow for quicker overloading of touch-based controls, especially if those controls are nested within other controls that have manipulations similar to their children. These types of behavior are somewhat difficult to manage in WinJS and can take hours to debug. I’ve found WinJS animation capabilities are quicker than those of XAML if the intent is to quickly apply event-based tweens, easing and transitions. Using XAML I often find myself searching for, cutting and pasting storyboards whether they are in XAML or in code-behind, but WinJS is convenient in this way – no need for storyboards here! I also find HTML divs easy to work with, as a div may be anything and everything.

While these benefits are good, there are also pitfalls. The more advanced the MVVM framework is in XAML, the less efficient it becomes – bugs arise everywhere and if a design change wasn’t considered from the beginning, then it becomes sluggish. Common controls are a bit convoluted in WinJS, something as ubiquitous as a list view becomes a bit mysterious and non-symantic because it’s a div too! Performance is also an issue with WinJS.

It’s hard to choose a winner because both are great tools. At the same time once a UX designer leaves the safe haven of the provided SDK code samples for each, things become a challenge. That’s why we’re here though isn’t it?