Ext JS 4.1: Layouts, Performance, and API updates

EXT JS 4.1
What’s New

Don Grifﬁn

Wednesday, November 2, 2011

Forum

dongryphon


Twitter

@dongryphon


email

don@sencha.com


Focus Areas


Performance

Grid

API Enhancements


Performance


Many Aspects


load
layout
DOM

Many Aspects
DOM
initialization
rendering

DOM


DOM
load
layout
DOM
security
database

Many Aspects
DOM ajax
initialization
rendering

validation DOM


Measurement Required


Measurement Required
Chrome: Profiler, Speed Tracer
Firefox: dynaTrace, Firebug
IE: dynaTrace, IE8+ Profiler
Safari: Developer Tools Profiler


Themes Example - 4.0.7 (IE8)



4.0.7


Load 300
6%

4.0.7


Load 300
6%
7% Initialize
320

4.0.7


Load 300
6%
7% Initialize
320

36%

Rendering
1680
4.0.7


Layout Load 300
2400 51%
6%
7% Initialize
320
4700

36%

Rendering
1680
4.0.7


Analysis


Cost is spread across

the Page Life Cycle


Cost is spread across

the Page Life Cycle

Load Initialize Render Layout


Load


Class System


DOM Ready


Load

Initialize


onReady


initComponent


prepareItems


Themes - Ext JS 3.4


Themes - Ext JS 3.4

148 components
in
50 containers


Themes - Ext JS 4.x


Themes - Ext JS 4.x

148 271 components
in
50 97 containers


More ﬂexibility


Components
& Containers
have a cost


Observables
listeners
ﬁreEvents


Load Initialize

Rendering


Components HTML


panel

comp

container


el
panel render panel

comp comp

container container


Rendering in 4.0


panel
render

comp onRender

container


el
panel
render

comp onRender

createElement

container


el
panel
render

comp onRender

createElement

renderTpl
container


el
panel
render

comp onRender

createElement

renderTpl
container
renderSelectors


el
panel
render

comp onRender

createElement

renderTpl
container
renderSelectors

afterRender


Rendering in 4.1


panel
render

comp beforeRender

renderTpl

container


el
panel
render

comp beforeRender

renderTpl

innerHTML
container


el
panel
render

comp beforeRender

renderTpl

innerHTML
container
onRender


el
panel
render

comp beforeRender

renderTpl

innerHTML
container
onRender

renderSelectors

afterRender


Load Initialize Render

Layout


A Place For Everything

and

Everything In Its Place


Layout Example


Ext.widget({
xtype: ‘panel’,
layout: ‘fit’,
title: ‘Text’,
items: [{
xtype: ‘component’,
html: ‘foo’,
width: 100,
height: 100
}]
});


Ext.widget({ Ext.widget({
xtype: ‘panel’, xtype: ‘panel’,
layout: ‘fit’, layout: ‘fit’,
title: ‘Text’, dockedItems: [{
items: [{ xtype: ‘header’,
xtype: ‘component’, text: ‘Text’,
html: ‘foo’, dock: ‘top’
width: 100, }],
height: 100 items: [{
}] xtype: ‘component’,
}); html: ‘foo’,
width: 100,
height: 100
}]
});


Text

foo


Text

ha
foo

wa


wb = wa

Text

ha
foo

wa


wb = wa

Text hb

ha
foo

wa


wb = wa

Text hb

hc
= ha+hb ha
foo
+fc

wa
wc = wa + fc


First Rule of Speed


C$$
Calculations
Are
Expensive


... therefore ...


Browsers Cache Results *


Browsers Cache Results *

* - DOM Writes Invalidate The Cache !

Write + Read = Reﬂow


Second Rule of Speed


Apps Have More
Than
One Panel!


el
panel

comp

container


component (3.x)

el
panel

comp

container


container (4.0)
component (3.x)

el
panel

comp

container


container (4.0)
global (4.1) component (3.x)

el
layout
panel
context

comp

container


Minimizing Reﬂows
var maxHt = 0,
n = elements.length,
i;

for (i=0; i < n; ++i) {
elements[i].setWidth(w);
maxHt = Math.max(maxHt,
elements[i].getHeight());
}

for (i=0; i < n; ++i) {
elements[i].setHeight(maxHt);
}

Minimizing Reﬂows
var maxHt = 0,
n = elements.length,
i;

for (i=0; i < n; ++i) {
elements[i].setWidth(w);
}

for (i=0; i < n; ++i) {
}

n+1 reﬂows

Minimizing Reﬂows
var maxHt = 0, var maxHt = 0,
n = elements.length, n = elements.length,
i; i;

for (i=0; i < n; ++i) { for (i=0; i < n; ++i) {
elements[i].setWidth(w); elements[i].setWidth(w);
maxHt = Math.max(maxHt, }
} for (i=0; i < n; ++i) {
for (i=0; i < n; ++i) { elements[i].getHeight());
elements[i].setHeight(maxHt); }
}
for (i=0; i < n; ++i) {
}

n+1 reﬂows

Minimizing Reflows
var maxHt = 0, var maxHt = 0,
n = elements.length, n = elements.length,
i; i;

for (i=0; i < n; ++i) { for (i=0; i < n; ++i) {
elements[i].setWidth(w); elements[i].setWidth(w);
maxHt = Math.max(maxHt, }
} for (i=0; i < n; ++i) {
for (i=0; i < n; ++i) { elements[i].getHeight());
elements[i].setHeight(maxHt); }
}
for (i=0; i < n; ++i) {
}

n+1 reflows 2 reflows

More Opportunities


Leverage Layout Dependency Data


Cache Layout Results


Themes Example - 4.1 (IE8)



4.0.7 4.1


300
Load 200
8%

4.0.7 4.1


300
Load 200
8%

10%
Initialization
320
240

4.0.7 4.1


300
Load 200
8%

10%
Initialization
320
43%
240

Rendering
4.0.7
1680
4.1
1035

Layout 300
2400 39% Load 200
945 8%

10%
4700 Initialization
320
43%
240
2420

Rendering
4.0.7
1680
4.1
1035

Signiﬁcantly faster than 4.0 !


But not faster than 3.4...


But not faster than 3.4...

Yet


Further Investigation


Further Investigation

Convert Layouts into CSS... where possible

Optimize Class Creation

Optimize DOM Event Binding


Grid


Native
Scrolling!


momentum

friction

Native
Scrolling!

acceleration


What Could
Be Better?!?


Native
Scrolling
with
Buffering!


Is There More?


Native
Inﬁnite
Scrolling!


But Wait...


Optimized
Column
Reordering


Store metadata


API Enhancements


Border Layout


Multiple regions


North

W
Multiple regions E
e a
s s
t t

South


North

W W
Multiple regions E E
e
s
e
s of a
s
a
s
t t t t
the same type

South


Control

Space Priority


W
Control E
e a
s s
t t

Space Priority


North

W
Control E E
e W a a
s e s s
t s t t
t
Space Priority

South


Regions can be

added and removed

dynamically


XTemplate


Foundational to

Ext JS


XTemplate

compiles faster...
runs faster...
is debuggable...


XTemplate

compiles faster...
runs faster...
is debuggable...
and more powerful!


Compiles To A Function


<tpl>
<ul>
<tpl for=”x”>
<li>{fname}
<tpl if=”lname”>
{lname}
<tpl else>
(None)
</tpl>
</li>
</tpl>
</ul>
</tpl>

<tpl> function tplFn (out, values..) {
<ul> out.push(’<ul>’);
<tpl for=”x”> for (var n in values.x) {
<li>{fname} var v2 = values.x[n];
<tpl if=”lname”> out.push(’<li>’);
{lname} out.push(v2.fname);
<tpl else> if (v2.lname) {
(None) out.push(v2.lname);
</tpl> } else {
</li> out.push(‘(None)’);
</tpl> }
</ul> }
</tpl> out.push(‘</li>’);
}
out.push(‘</ul>’);
}

Control Structures


Code Injection


<tpl>
{% var i=0; %}
<tpl for=”x”>
{name}
{% if (++i==9) break; %}
</tpl>
</tpl>

<tpl> function tplFn (out, values..) {
{% var i=0; %} var i=0;
<tpl for=”x”> for (var n in values.x) {
{name} out.push(v2.name);
{% if (++i==9) break; %} if (++i == 9) break;
</tpl> }
</tpl> }

applyOut


var tpl = new Ext.XTemplate(...);

// This:

var s = tpl.apply(data);

// is equivalent to:

var a = [];
tpl.applyOut(a, data);
s = a.join(‘’);


Overrides
Ext.define(‘My.patches.GridOverride’, {

override: ‘Ext.grid.Panel’,

initComponent: function () {
this.callParent();
}
});

-------------------

Ext.define(‘My.app.App’, {
requires: [ ‘My.patches.*’ ],
...
});


Overrides
Named and used
like a normal class
this.callParent();
}
});

-------------------

Ext.define(‘My.app.App’, {
...
});


Overrides
Named and used
like a normal class
this.callParent();
}
});
Only added to the
-------------------
build if the target
Ext.define(‘My.app.App’, { class is required
...
});


Ext.create/widget
4.0
Ext.create(‘Ext.grid.Panel’, {

... config ...

});

// or

Ext.widget(‘grid’, {

... config ...

});


Ext.create/widget
4.0 4.1
Ext.create(‘Ext.grid.Panel’, { Ext.create({
xclass: ‘Ext.grid.Panel’,
... config ...
... config ...
}); });

// or // or

Ext.widget(‘grid’, { Ext.widget({
xtype: ‘grid’.,
... config ...
... config ...
}); });


Methods in conﬁgs - 4.0

items: [ {
xtype: ‘foo’,

method: function (a) {
return Ext.foo.Bar.prototype.method.call(this, a*2);
a*2;
}
}]


Methods in conﬁgs - 4.0

items: [ {
xtype: ‘foo’,

return Ext.foo.Bar.prototype.method.call(this, a*2);
a*2;
}
}]

Messy if you need to call original method!


xhooks

items: [ {
xtype: ‘foo’,

xhooks: {
return this.callParent([a * 2]);
}
}
}]


Q&A

Don Grifﬁn
don@sencha.com
@dongryphon
dongryphon (forum)


Ext JS 4.1: Layouts, Performance, and API updates

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Ext JS 4.1: Layouts, Performance, and API updates

Semelhante a Ext JS 4.1: Layouts, Performance, and API updates (20)

Mais de Sencha

Mais de Sencha (20)

Último

Último (20)

Ext JS 4.1: Layouts, Performance, and API updates