PDA

View Full Version : Ext.draw - Ext.create usage dropped - why?



LesJ
26 Dec 2011, 9:07 AM
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
26 Dec 2011, 1:30 PM
We have been removing Ext.create internally as using Ext.create is slower than using new.

dongryphon
26 Dec 2011, 1:31 PM
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
27 Dec 2011, 1:30 AM
Ah. Well, I was under the impression that using Ext.create was best practice according to the documentation and tutorials.

Nickname
27 Dec 2011, 8:37 AM
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
27 Dec 2011, 11:03 AM
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
16 Jan 2012, 8:55 AM
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
16 Jan 2012, 9:11 AM
Ext.create was used quite a lot of places so this is still being taken out. But thank you for pointing this out.