What is so convenient about WinJS.Binding and WinJS.Class.define ?

Question

Hi,

I am new to javascript and to Developing Windows 8 apps as well, so I am very sorry if my question is kind of dumb.

Recently, I've watched session 3-115-//Build 2012 about: creating Windows Store apps using HTML and JavaScript

Basically, they started with an example to build a clock and this is their code:

(function () {
    
    WinJS.Namespace.define("Example", {
        id: function (id) {
            return document.getElementById(id);
        },

        MyClass: WinJS.Class.define(function (element, options) {
            element.style.fontSize = "72pt";
            element.wincontrol = this;
        }),

        model: WinJS.Binding.as({
            time: new Date().toLocaleTimeString()
        }),
    });

    var app = WinJS.Application;

    app.onactivated = function (e) {
        var myDiv = Example.id("myDiv");

        Example.model.bind("time", function (value) {
            myDiv.textContent = value;
        });

        setInterval(function () {
            Example.model.time = new Date().toLocaleTimeString();
        }, 250);

        WinJS.UI.processAll();
    
    };

    app.start();

}());

So I wonder why do they have to make it that complicated? 

I build a clock myself and here is my code:

(function () {
    
    WinJS.Namespace.define("Example", {
        id: function (id) {
            return document.getElementById(id);
        },

    });

    var app = WinJS.Application;

    app.onactivated = function (e) {

        var myDiv = Example.id("myDiv");

        setInterval(function () {
            myDiv.textContent = new Date().toLocaleTimeString();
        }, 250);

        myDiv.className = "bigSize";

    };
        

    app.start();

}());

I just replace their "WinJS.Class.define" thing with a simple css reference and their "Binding" thing with a simple setInterval function. I build the program and it works fine.

Can somebody tell me the advantages of the using of WinJS.Class and WinJS.Binding which seem unnecessarily complicated??

Thank you very much.

Answer 1

Hi there,

I know what you mean about a seemly simple task being overcomplicated by huge amounts of code.  The example you give is perfect as a means to show this. Although this certainly isn’t a definitive answer I do have a few thoughts.

1) The learning process can be enhanced by smaller examples. Learning something new, such as the WinJS concepts you have outlined, with larger more complex programs can dilute what is being demonstrated.

2) For smaller applications like the clock app such complicated code probably ISN’T needed. These types of code separation techniques are often useful for larger projects where the developer wants to try and keep a separation between the various layers of an application. As a result many different types of frameworks have been developed to help with this, such as MVC and MVVM. (MVVM being a variant of MVC that capitalizes on the binding mechanic of XAML and now WinJS.)

There is no right answer or single way to make any program and certainly they can be written in many different ways. Using WinJs to define a class and then using the binding methods offered by that platform are just ways to structure an app. The end goal of such structure is to break an app up into smaller logical parts. The hope is that these smaller parts are then easier to maintain in the long run.

Answer 2

Many of the utilities in WinJS came from the fact that developers inside Microsoft, when we started building apps, ended up writing the same things for themselves over and over again. WinJS.Class.define, WinJS.Namespace.define, WinJS.Application, WinJS.Binding, WinJS.UI.Pages, promises, a promise wrapper around XMLHttpRequest (WinJS.xhr), and a number of other things fall into that category. Other parts fall more into the "platform" category, e.g. the standard WinJS controls, but even there, in the end, nothing in WinJS takes advantage of any privileged APIs or such, and you have all the source code readily available to you.

In the end, you don't need WinJS at all, and can write everything using just HTML, CSS, JS, and the WinRT APIs. But you'll probably find that WinJS saves you a whole lot of time and trouble, because creating your own controls from scratch, your own data binding system from scratch, your own promise class from scratch--all of that is a huge investment that Microsoft has provided as a standard implementation.

.Kraig

Answer 3

Thank you @Kraig and @Adam for your answers, really appreciate them. I understand the importance of WinJS now.