Ext.draw - Ext.create usage dropped - why?

[LesJ]

I see that in many classes in the Ext.draw package the Ext.create pattern was replaced by new Ext.draw...().

Why? Is using Ext.create() too slow?

Here's an example from the Ext.draw.Surface class:

4.0.7

    initItems: function() {
        var items = this.items;
        this.items = Ext.create('Ext.draw.CompositeSprite');
        this.groups = Ext.create('Ext.draw.CompositeSprite');
        if (items) {
            this.add(items);
        }
    }

4.1 Beta

    initItems: function() {
        var items = this.items;
        this.items = new Ext.draw.CompositeSprite();
        this.groups = new Ext.draw.CompositeSprite();
        if (items) {
            this.add(items);
        }
    }

[mitchellsimoens]

We have been removing Ext.create internally as using Ext.create is slower than using new.

[dongryphon]

You are correct: 'Ext.create' is slower than 'new'. Its chief benefit is for situations where the class name is a dynamic value and 'new' is not an option. As long as the 'requires' declarations are correct, the overhead of 'Ext.create' is simply not needed.

[Sébastien.Volle]

Ah. Well, I was under the impression that using Ext.create was best practice according to the documentation and tutorials.

[Nickname]

Hi,

is there any number how much slower Ext.create() is?
Looked at the ClassManager file and it normally should just lookup the class definition in an object and then with the "Instantiator" wrapper instantiate the new instance.

Edit:
Ok, I just ran my own tests and it seems like micro optimizations (unless you really instantiate more than 100000 classes)

Ext.define('MyClass', {
    constructor: function() {
        this.callParent();
    }
});

var s = new Date().getTime(),
    i = 0,
    len = 500000,
    ml;

for(; i < len; i++) {
    ml = Ext.create('MyClass');
    ml = null;
}

console.log('Run with Ext.create() took ' + (new Date().getTime() - s)+ 'ms');


s = new Date().getTime();
i = 0;

for(; i < len; i++) {
    ml = new MyClass();
    ml = null;
}

console.log('Run with native "new" took ' + (new Date().getTime() - s)+ 'ms'); 

Chrome 14:

Run with Ext.create() took 1625ms

Run with native "new" took 1268ms

FireFox9:

Run with Ext.create() took 5796ms

Run with native "new" took 3968ms

on a i5 620, 6RAM, ubuntu 10.10

Edit2:
Numbers above are with 4.1 beta1

Numbers with 4.0.7:

Chrome14:

Run with Ext.create() took 1376ms
Run with native "new" took 1009ms

FireFox9:

Run with Ext.create() took 5800ms
Run with native "new" took 3965ms

same system

[dongryphon]

is there any number how much slower Ext.create() is?
Edit:
Ok, I just ran my own tests and it seems like micro optimizations (unless you really instantiate more than 100000 classes)

Good info, thanks!

I notice you didn't test IE6, 7 and 8 though ... on those browsers, this is not such a micro optimization.

While we don't instantiate 10k items this way, we do instantiate hundreds or maybe 1k or so, depending on complexity of the UI. Easy trimmings and also makes debugging much simpler since one can easily step in to the constructor using 'new'.

[LesJ]

The switch from Ext.create to new is inconsistently applied. For example, the VML engine still uses Ext.create. I have an application where 400 to 600 sprites are created. Since I need to support IE7, I'd see some performance improvement if new was used.

Ext.define('Ext.draw.engine.Vml', {
    ...
    createItem: function (config) {
        return Ext.create('Ext.draw.Sprite', config);
    },
    ...

[mitchellsimoens]

Ext.create was used quite a lot of places so this is still being taken out. But thank you for pointing this out.