Ext JS 4.1: Layouts, Performance, and API updates

Wednesday, November 2, 2011

What’s New

Don Griffin

EXT JS 4.1


dongryphon

Forum


@dongryphon

Twitter


[email protected]

email


mailto:[email protected]


Focus Areas


Performance

Grid

API Enhancements


Performance


Many Aspects


Many Aspects

DOMlayout

renderinginitialization

DOM

DOM

load


Many Aspects

DOMlayout

renderinginitialization

ajax

security

validation

database

DOM

DOM

DOMload


Measurement Required


Measurement Required

Chrome: Profiler, Speed TracerFirefox: dynaTrace, FirebugIE: dynaTrace, IE8+ ProfilerSafari: Developer Tools Profiler


Themes Example - 4.0.7 (IE8)



4.0.7



6%

Load 300

4.0.7



6%

7%

Load

Initialize

300

320

4.0.7



6%

7%

36%

Load

Initialize

Rendering

300

320

16804.0.7



6%

7%

36%

51%

Load

Initialize

Rendering

Layout 300

320

1680

2400

4.0.7

4700


Analysis


Cost is spread across

the Page Life Cycle



the Page Life Cycle



the Page Life Cycle

Initialize Render LayoutLoad


Load


<script src=”ext.js”>


Class System


DOM Ready


Initialize

Load


onReady


initComponent


prepareItems


Themes - Ext JS 3.4


148 componentsin

50 containers

Themes - Ext JS 3.4


Themes - Ext JS 4.x


148 271 componentsin

50 97 containers

Themes - Ext JS 4.x


More flexibility


Components& Containershave a cost


Observableslisteners

fireEvents


Rendering

Load Initialize



Components HTML


comp

container

panel


comp

container

panel

comp

container

panelel

render


Rendering in 4.0



comp

container

panelrender

onRender


comp

container

panelel

render

onRender

createElement


comp

container

panelel

render

onRender

createElement

renderTpl


comp

container

panelel

render

onRender

createElement

renderTpl

renderSelectors


comp

container

panelel

render

onRender

createElement

renderTpl

renderSelectors

afterRender


comp

container

panelel

createElement

renderTpl

afterRender

onRender

render

renderSelectors


Rendering in 4.1



comp

container

panel

renderTpl

beforeRender

render


comp

container

panel

renderTpl

beforeRender

render


comp

container

panelel

renderTpl

beforeRender

render

innerHTML


comp

container

panelel

renderTpl

beforeRender

render

innerHTML

onRender


comp

container

panelel

renderTpl

beforeRender

render

innerHTML

onRender

renderSelectors

afterRender


comp

container

panelel

renderTpl

beforeRender

render

innerHTML

onRender

renderSelectors

afterRender


Layout

RenderLoad Initialize


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({ xtype: ‘panel’, layout: ‘fit’, title: ‘Text’, items: [{ xtype: ‘component’, html: ‘foo’, width: 100, height: 100 }]});

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


Text

foo


Text

foo


Text

foo


Text

fooha

wa


Text

fooha

wa


Text

fooha

wa

wb = wa


Text

fooha

hb

wa

wb = wa


Text

fooha

hb

wa

wb = wa


Text

fooha

hb

hc

= ha+hb

+fc

wawc = wa + fc

wb = wa


First Rule of Speed



C$$Calculations

Are Expensive



... therefore ...



Browsers Cache Results*


Browsers Cache Results*

* - DOM Writes Invalidate The Cache !Wednesday, November 2, 2011

Write + Read = Reflow


Second Rule of Speed


Apps Have MoreThan

One Panel!


comp

container

panelel


comp

container

panelel

component (3.x)


comp

container

panelel

component (3.x)container (4.0)


comp

container

panelel

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

layoutcontext


Minimizing Reflowsvar 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);}





n+1 reflows


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

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

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





n+1 reflows


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

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

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





n+1 reflows 2 reflows


More Opportunities


Leverage Layout Dependency Data


Cache Layout Results


Themes Example - 4.1 (IE8)



4.0.7 4.1



8%

Load 300200

4.0.7 4.1



8%

10%

Load

Initialization

300200

320240

4.0.7 4.1



8%

10%

43%

Load

Initialization

Rendering

300200

320240

16801035

4.0.7 4.1



8%

10%

43%

39% Load

Initialization

Rendering

Layout 300200

320240

16801035

2400945

4.0.7 4.1

4700

2420


Significantly faster than 4.0 !


But not faster than 3.4...


But not faster than 3.4...

Yet


Further Investigation


Convert Layouts into CSS... where possible

Optimize Class Creation

Optimize DOM Event Binding

Further Investigation


Grid


NativeScrolling!


NativeScrolling!

momentum

friction

acceleration


What CouldBe Better?!?


NativeScrolling

withBuffering!


Is There More?


NativeInfinite

Scrolling!


But Wait...


OptimizedColumn

Reordering


Store metadata


API Enhancements


Border Layout


Multiple regions


Multiple regions

North

South

West

East


Multiple regions

North

South

West

East

West

East

ofthe same type


Control

Space Priority


Control

Space Priority

West

East


Control

Space Priority

North

South

West

East

West

East


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!

XTemplate


Compiles To A Function


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


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

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


Control Structures


<tpl if="age == 3"> {x}<tpl elseif=”age == 2”> {y}<tpl else> {z}</tpl>


<tpl switch="age"> <tpl case="3" case="4"> {name} is 3 or 4 <tpl case="2"> {name} is two <tpl default> {name} is {age}!</tpl>


Code Injection


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


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

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


applyOut


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

// This:

var s = tpl.apply(data);

// is equivalent to:

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


Class System


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


Overrides




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


Named and used like a normal class

Only added to the build if the target class is required


Ext.create/widget

Ext.create(‘Ext.grid.Panel’, {

... config ...

});

// or

Ext.widget(‘grid’, {

... config ...

});

4.0


Ext.create/widget

Ext.create(‘Ext.grid.Panel’, {

... config ...

});

// or

Ext.widget(‘grid’, {

... config ...

});

Ext.create({ xclass: ‘Ext.grid.Panel’,

... config ...});

// or

Ext.widget({ xtype: ‘grid’.,

... config ...});

4.0 4.1


Methods in configs - 4.0

items: [ { xtype: ‘foo’,

method: function (a) { return }}]

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


Methods in configs - 4.0


method: function (a) { return }}]

Messy if you need to call original method!

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


xhooks


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


Q & A

Don [email protected]@dongryphondongryphon (forum)

Date post:	15-May-2015
Category:	Technology
Upload:	sencha
View:	5,483 times
Download:	1 times

Ext JS 4.1: Layouts, Performance, and API updates

Technology