Mootools and Win8 Store app development

Question

Question 1:

Can we use Mixin pattern of Mootools in the development of Windows 8 Metro style app? In other words, can we override/substitute/extend WinJS.Class with Mootool's class?

Question 2:

For example, in Mootools if we have a base class Human:

var Human = new Class({
    initialize: function(name, age) {
        this.name = name;
        this.age = age;
    },
    isAlive: true,
    energy: 1,
    eat: function() {
        this.energy = this.energy + 1; //same as this.energy++
    }
});

(using Mixin) an interface class Warrior:

var Warrior = new Class({
    energy: 100,
    kills: 0,
    attack: function(target) {
        target.isAlive = false;
        this.energy = this.energy - 5;
        this.kills++;
    }
});

and a derived / concrete class Ninja:

var Ninja = new Class({
    Extends: Human,
    Implements: Warrior,
    initialize: function(name, age, side) {
        this.side = side;
        this.parent(name, age);
    }
});

How would we say this in WinJS accent using WinJS.Class.define , WinJS.Class.derive and WinJS.Class.mix ?

Answer 1

If you want to use MooTools in your WinJS app, it should just work for the most part. There may be some warnings at startup, but as long as it doesn't violate the security framework for dynamically generated content, MooTools itself should just work. I wouldn't try to splice MooTools' code into WinJS, just use it as is.

WinJS.Class methods are, just like MooTools, defining JavaScript prototypes under the hood. "Types" you define should work together regardless of if you used MooTools or WinJS.

As far as your second question, I think you can do everything you need with just WinJS, the syntax is just different.

Defining your "human" constructor is straightforward:

var Human = WinJS.Class.define(
    function(name, age) {
        this.name = name;
        this.age = age;
    },
    {
        isAlive: true,
        energy: 1,
        eat: function() {
            this.energy = this.energy + 1;
        }
    }
);

A mixin is defined simply as an object:

var Warrior = {
    energy: 100,
    kills: 0,
    attack: function(target) {
        target.isAlive = false;
        this.energy = this.energy - 5;
        this.kills++;
    }
};

To do a derivation, you can use WinJS.Class.derive. This only gives you the inheritance part:

var Ninja = WinJS.Class.derive(Human,
    function(name, age, side) {
        this.side = side;
        Human.call(this, name, age);
    }
);

Then you do the mixin via WinJS.Class.mix:

WinJS.Class.mix(Ninja, Warrior);

And you should be all set to do:

var clyde = new Ninja("Clyde", "12", "confused");