Contenu connexe Similaire à Ext JS 4.1: Layouts, Performance, and API updates (20) Ext JS 4.1: Layouts, Performance, and API updates2. EXT JS 4.1
What’s New
Don Griffin
Wednesday, November 2, 2011
3. Forum
dongryphon
Wednesday, November 2, 2011
4. Twitter
@dongryphon
Wednesday, November 2, 2011
5. email
don@sencha.com
Wednesday, November 2, 2011
7. Performance
Grid
API Enhancements
Wednesday, November 2, 2011
10. load
layout
DOM
Many Aspects
DOM
initialization
rendering
DOM
Wednesday, November 2, 2011
11. DOM
load
layout
DOM
security
database
Many Aspects
DOM ajax
initialization
rendering
validation DOM
Wednesday, November 2, 2011
13. Measurement Required
Chrome: Profiler, Speed Tracer
Firefox: dynaTrace, Firebug
IE: dynaTrace, IE8+ Profiler
Safari: Developer Tools Profiler
Wednesday, November 2, 2011
17. Themes Example - 4.0.7 (IE8)
Load 300
6%
7% Initialize
320
4.0.7
Wednesday, November 2, 2011
18. Themes Example - 4.0.7 (IE8)
Load 300
6%
7% Initialize
320
36%
Rendering
1680
4.0.7
Wednesday, November 2, 2011
19. Themes Example - 4.0.7 (IE8)
Layout Load 300
2400 51%
6%
7% Initialize
320
4700
36%
Rendering
1680
4.0.7
Wednesday, November 2, 2011
21. Cost is spread across
the Page Life Cycle
Wednesday, November 2, 2011
22. Cost is spread across
the Page Life Cycle
Wednesday, November 2, 2011
23. Cost is spread across
the Page Life Cycle
Load Initialize Render Layout
Wednesday, November 2, 2011
28. Load
Initialize
Wednesday, November 2, 2011
33. Themes - Ext JS 3.4
148 components
in
50 containers
Wednesday, November 2, 2011
35. Themes - Ext JS 4.x
148 271 components
in
50 97 containers
Wednesday, November 2, 2011
37. Components
& Containers
have a cost
Wednesday, November 2, 2011
38. Observables
listeners
fireEvents
Wednesday, November 2, 2011
39. Load Initialize
Rendering
Wednesday, November 2, 2011
42. panel
comp
container
Wednesday, November 2, 2011
43. el
panel render panel
comp comp
container container
Wednesday, November 2, 2011
46. panel
render
comp onRender
container
Wednesday, November 2, 2011
47. el
panel
render
comp onRender
createElement
container
Wednesday, November 2, 2011
48. el
panel
render
comp onRender
createElement
renderTpl
container
Wednesday, November 2, 2011
49. el
panel
render
comp onRender
createElement
renderTpl
container
renderSelectors
Wednesday, November 2, 2011
50. el
panel
render
comp onRender
createElement
renderTpl
container
renderSelectors
afterRender
Wednesday, November 2, 2011
51. el
panel
render
comp onRender
createElement
renderTpl
container
renderSelectors
afterRender
Wednesday, November 2, 2011
54. panel
render
comp beforeRender
renderTpl
container
Wednesday, November 2, 2011
55. panel
render
comp beforeRender
renderTpl
container
Wednesday, November 2, 2011
56. el
panel
render
comp beforeRender
renderTpl
innerHTML
container
Wednesday, November 2, 2011
57. el
panel
render
comp beforeRender
renderTpl
innerHTML
container
onRender
Wednesday, November 2, 2011
58. el
panel
render
comp beforeRender
renderTpl
innerHTML
container
onRender
renderSelectors
afterRender
Wednesday, November 2, 2011
59. el
panel
render
comp beforeRender
renderTpl
innerHTML
container
onRender
renderSelectors
afterRender
Wednesday, November 2, 2011
60. Load Initialize Render
Layout
Wednesday, November 2, 2011
61. A Place For Everything
and
Everything In Its Place
Wednesday, November 2, 2011
63. Ext.widget({
xtype: ‘panel’,
layout: ‘fit’,
title: ‘Text’,
items: [{
xtype: ‘component’,
html: ‘foo’,
width: 100,
height: 100
}]
});
Wednesday, November 2, 2011
64. 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
}]
});
Wednesday, November 2, 2011
65. Text
foo
Wednesday, November 2, 2011
66. Text
foo
Wednesday, November 2, 2011
67. Text
foo
Wednesday, November 2, 2011
68. Text
ha
foo
wa
Wednesday, November 2, 2011
69. Text
ha
foo
wa
Wednesday, November 2, 2011
70. wb = wa
Text
ha
foo
wa
Wednesday, November 2, 2011
71. wb = wa
Text hb
ha
foo
wa
Wednesday, November 2, 2011
72. wb = wa
Text hb
ha
foo
wa
Wednesday, November 2, 2011
73. wb = wa
Text hb
hc
= ha+hb ha
foo
+fc
wa
wc = wa + fc
Wednesday, November 2, 2011
76. C$$
Calculations
Are
Expensive
Wednesday, November 2, 2011
85. el
panel
comp
container
Wednesday, November 2, 2011
87. container (4.0)
component (3.x)
el
panel
comp
container
Wednesday, November 2, 2011
88. container (4.0)
global (4.1) component (3.x)
el
layout
panel
context
comp
container
Wednesday, November 2, 2011
89. Minimizing Reflows
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);
}
Wednesday, November 2, 2011
90. Minimizing Reflows
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);
}
n+1 reflows
Wednesday, November 2, 2011
91. 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, }
elements[i].getHeight());
} for (i=0; i < n; ++i) {
maxHt = Math.max(maxHt,
for (i=0; i < n; ++i) { elements[i].getHeight());
elements[i].setHeight(maxHt); }
}
for (i=0; i < n; ++i) {
elements[i].setHeight(maxHt);
}
n+1 reflows
Wednesday, November 2, 2011
92. 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, }
elements[i].getHeight());
} for (i=0; i < n; ++i) {
maxHt = Math.max(maxHt,
for (i=0; i < n; ++i) { elements[i].getHeight());
elements[i].setHeight(maxHt); }
}
for (i=0; i < n; ++i) {
elements[i].setHeight(maxHt);
}
n+1 reflows 2 reflows
Wednesday, November 2, 2011
98. Themes Example - 4.1 (IE8)
300
Load 200
8%
4.0.7 4.1
Wednesday, November 2, 2011
99. Themes Example - 4.1 (IE8)
300
Load 200
8%
10%
Initialization
320
240
4.0.7 4.1
Wednesday, November 2, 2011
100. Themes Example - 4.1 (IE8)
300
Load 200
8%
10%
Initialization
320
43%
240
Rendering
4.0.7
1680
4.1
1035
Wednesday, November 2, 2011
101. Themes Example - 4.1 (IE8)
Layout 300
2400 39% Load 200
945 8%
10%
4700 Initialization
320
43%
240
2420
Rendering
4.0.7
1680
4.1
1035
Wednesday, November 2, 2011
106. Further Investigation
Convert Layouts into CSS... where possible
Optimize Class Creation
Optimize DOM Event Binding
Wednesday, November 2, 2011
108. Native
Scrolling!
Wednesday, November 2, 2011
109. momentum
friction
Native
Scrolling!
acceleration
Wednesday, November 2, 2011
110. What Could
Be Better?!?
Wednesday, November 2, 2011
111. Native
Scrolling
with
Buffering!
Wednesday, November 2, 2011
113. Native
Infinite
Scrolling!
Wednesday, November 2, 2011
115. Optimized
Column
Reordering
Wednesday, November 2, 2011
120. North
W
Multiple regions E
e a
s s
t t
South
Wednesday, November 2, 2011
121. North
W W
Multiple regions E E
e
s
e
s of a
s
a
s
t t t t
the same type
South
Wednesday, November 2, 2011
122. Control
Space Priority
Wednesday, November 2, 2011
123. W
Control E
e a
s s
t t
Space Priority
Wednesday, November 2, 2011
124. North
W
Control E E
e W a a
s e s s
t s t t
t
Space Priority
South
Wednesday, November 2, 2011
125. Regions can be
added and removed
dynamically
Wednesday, November 2, 2011
129. XTemplate
compiles faster...
runs faster...
is debuggable...
Wednesday, November 2, 2011
130. XTemplate
compiles faster...
runs faster...
is debuggable...
and more powerful!
Wednesday, November 2, 2011
132. <tpl>
<ul>
<tpl for=”x”>
<li>{fname}
<tpl if=”lname”>
{lname}
<tpl else>
(None)
</tpl>
</li>
</tpl>
</ul>
</tpl>
Wednesday, November 2, 2011
133. <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>’);
}
Wednesday, November 2, 2011
135. <tpl if="age == 3">
{x}
<tpl elseif=”age == 2”>
{y}
<tpl else>
{z}
</tpl>
Wednesday, November 2, 2011
136. <tpl switch="age">
<tpl case="3" case="4">
<p>{name} is 3 or 4</p>
<tpl case="2">
<p>{name} is two</p>
<tpl default>
<p>{name} is {age}!</p>
</tpl>
Wednesday, November 2, 2011
138. <tpl>
{% var i=0; %}
<tpl for=”x”>
{name}
{% if (++i==9) break; %}
</tpl>
</tpl>
Wednesday, November 2, 2011
139. <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> }
Wednesday, November 2, 2011
141. var tpl = new Ext.XTemplate(...);
// This:
var s = tpl.apply(data);
// is equivalent to:
var a = [];
tpl.applyOut(a, data);
s = a.join(‘’);
Wednesday, November 2, 2011
143. Overrides
Ext.define(‘My.patches.GridOverride’, {
override: ‘Ext.grid.Panel’,
initComponent: function () {
this.callParent();
}
});
-------------------
Ext.define(‘My.app.App’, {
requires: [ ‘My.patches.*’ ],
...
});
Wednesday, November 2, 2011
144. Overrides
Ext.define(‘My.patches.GridOverride’, {
Named and used
override: ‘Ext.grid.Panel’,
like a normal class
initComponent: function () {
this.callParent();
}
});
-------------------
Ext.define(‘My.app.App’, {
requires: [ ‘My.patches.*’ ],
...
});
Wednesday, November 2, 2011
145. Overrides
Ext.define(‘My.patches.GridOverride’, {
Named and used
override: ‘Ext.grid.Panel’,
like a normal class
initComponent: function () {
this.callParent();
}
});
Only added to the
-------------------
build if the target
Ext.define(‘My.app.App’, { class is required
requires: [ ‘My.patches.*’ ],
...
});
Wednesday, November 2, 2011
146. Ext.create/widget
4.0
Ext.create(‘Ext.grid.Panel’, {
... config ...
});
// or
Ext.widget(‘grid’, {
... config ...
});
Wednesday, November 2, 2011
147. 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 ...
}); });
Wednesday, November 2, 2011
148. Methods in configs - 4.0
items: [ {
xtype: ‘foo’,
method: function (a) {
return Ext.foo.Bar.prototype.method.call(this, a*2);
a*2;
}
}]
Wednesday, November 2, 2011
149. Methods in configs - 4.0
items: [ {
xtype: ‘foo’,
method: function (a) {
return Ext.foo.Bar.prototype.method.call(this, a*2);
a*2;
}
}]
Messy if you need to call original method!
Wednesday, November 2, 2011
150. xhooks
items: [ {
xtype: ‘foo’,
xhooks: {
method: function (a) {
return this.callParent([a * 2]);
}
}
}]
Wednesday, November 2, 2011
151. Q&A
Don Griffin
don@sencha.com
@dongryphon
dongryphon (forum)
Wednesday, November 2, 2011