Ext JS 4.1: Layouts, Performance, and API updates
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Ext JS 4.1: Layouts, Performance, and API updates

on

  • 6,031 views

Improving layout and rendering performance is a major focus of Ext JS 4.1. This session will discuss some of these details and how they might impact your application, custom components and custom ...

Improving layout and rendering performance is a major focus of Ext JS 4.1. This session will discuss some of these details and how they might impact your application, custom components and custom layouts. Beyond these largely invisible features, Ext JS 4.1 has other exciting enhancements. We will also cover: improvements to Grid, Border layout, XTemplate, Data and the class system.

Statistics

Views

Total Views
6,031
Views on SlideShare
5,124
Embed Views
907

Actions

Likes
4
Downloads
170
Comments
0

4 Embeds 907

http://www.sencha.com 875
http://localhost 25
http://cdbrkpnt.com 6
http://sencha.site 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ext JS 4.1: Layouts, Performance, and API updates Presentation Transcript

  • 1. Wednesday, November 2, 2011
  • 2. EXT JS 4.1 What’s New Don GriffinWednesday, November 2, 2011
  • 3. Forum dongryphonWednesday, November 2, 2011
  • 4. Twitter @dongryphonWednesday, November 2, 2011
  • 5. email don@sencha.comWednesday, November 2, 2011
  • 6. Focus AreasWednesday, November 2, 2011
  • 7. Performance Grid API EnhancementsWednesday, November 2, 2011
  • 8. PerformanceWednesday, November 2, 2011
  • 9. Many AspectsWednesday, November 2, 2011
  • 10. load layout DOM Many Aspects DOM initialization rendering DOMWednesday, November 2, 2011
  • 11. DOM load layout DOM security database Many Aspects DOM ajax initialization rendering validation DOMWednesday, November 2, 2011
  • 12. Measurement RequiredWednesday, November 2, 2011
  • 13. Measurement Required Chrome: Profiler, Speed Tracer Firefox: dynaTrace, Firebug IE: dynaTrace, IE8+ Profiler Safari: Developer Tools ProfilerWednesday, November 2, 2011
  • 14. Themes Example - 4.0.7 (IE8)Wednesday, November 2, 2011
  • 15. Themes Example - 4.0.7 (IE8) 4.0.7Wednesday, November 2, 2011
  • 16. Themes Example - 4.0.7 (IE8) Load 300 6% 4.0.7Wednesday, November 2, 2011
  • 17. Themes Example - 4.0.7 (IE8) Load 300 6% 7% Initialize 320 4.0.7Wednesday, November 2, 2011
  • 18. Themes Example - 4.0.7 (IE8) Load 300 6% 7% Initialize 320 36% Rendering 1680 4.0.7Wednesday, 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.7Wednesday, November 2, 2011
  • 20. AnalysisWednesday, November 2, 2011
  • 21. Cost is spread across the Page Life CycleWednesday, November 2, 2011
  • 22. Cost is spread across the Page Life CycleWednesday, November 2, 2011
  • 23. Cost is spread across the Page Life Cycle Load Initialize Render LayoutWednesday, November 2, 2011
  • 24. LoadWednesday, November 2, 2011
  • 25. <script src=”ext.js”>Wednesday, November 2, 2011
  • 26. Class SystemWednesday, November 2, 2011
  • 27. DOM ReadyWednesday, November 2, 2011
  • 28. Load InitializeWednesday, November 2, 2011
  • 29. onReadyWednesday, November 2, 2011
  • 30. initComponentWednesday, November 2, 2011
  • 31. prepareItemsWednesday, November 2, 2011
  • 32. Themes - Ext JS 3.4Wednesday, November 2, 2011
  • 33. Themes - Ext JS 3.4 148 components in 50 containersWednesday, November 2, 2011
  • 34. Themes - Ext JS 4.xWednesday, November 2, 2011
  • 35. Themes - Ext JS 4.x 148 271 components in 50 97 containersWednesday, November 2, 2011
  • 36. More flexibilityWednesday, November 2, 2011
  • 37. Components & Containers have a costWednesday, November 2, 2011
  • 38. Observables listeners fireEventsWednesday, November 2, 2011
  • 39. Load Initialize RenderingWednesday, November 2, 2011
  • 40. Wednesday, November 2, 2011
  • 41. Components HTMLWednesday, November 2, 2011
  • 42. panel comp containerWednesday, November 2, 2011
  • 43. el panel render panel comp comp container containerWednesday, November 2, 2011
  • 44. Rendering in 4.0Wednesday, November 2, 2011
  • 45. Wednesday, November 2, 2011
  • 46. panel render comp onRender containerWednesday, November 2, 2011
  • 47. el panel render comp onRender createElement containerWednesday, November 2, 2011
  • 48. el panel render comp onRender createElement renderTpl containerWednesday, November 2, 2011
  • 49. el panel render comp onRender createElement renderTpl container renderSelectorsWednesday, November 2, 2011
  • 50. el panel render comp onRender createElement renderTpl container renderSelectors afterRenderWednesday, November 2, 2011
  • 51. el panel render comp onRender createElement renderTpl container renderSelectors afterRenderWednesday, November 2, 2011
  • 52. Rendering in 4.1Wednesday, November 2, 2011
  • 53. Wednesday, November 2, 2011
  • 54. panel render comp beforeRender renderTpl containerWednesday, November 2, 2011
  • 55. panel render comp beforeRender renderTpl containerWednesday, November 2, 2011
  • 56. el panel render comp beforeRender renderTpl innerHTML containerWednesday, November 2, 2011
  • 57. el panel render comp beforeRender renderTpl innerHTML container onRenderWednesday, November 2, 2011
  • 58. el panel render comp beforeRender renderTpl innerHTML container onRender renderSelectors afterRenderWednesday, November 2, 2011
  • 59. el panel render comp beforeRender renderTpl innerHTML container onRender renderSelectors afterRenderWednesday, November 2, 2011
  • 60. Load Initialize Render LayoutWednesday, November 2, 2011
  • 61. A Place For Everything and Everything In Its PlaceWednesday, November 2, 2011
  • 62. Layout ExampleWednesday, 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 fooWednesday, November 2, 2011
  • 66. Text fooWednesday, November 2, 2011
  • 67. Text fooWednesday, November 2, 2011
  • 68. Text ha foo waWednesday, November 2, 2011
  • 69. Text ha foo waWednesday, November 2, 2011
  • 70. wb = wa Text ha foo waWednesday, November 2, 2011
  • 71. wb = wa Text hb ha foo waWednesday, November 2, 2011
  • 72. wb = wa Text hb ha foo waWednesday, November 2, 2011
  • 73. wb = wa Text hb hc = ha+hb ha foo +fc wa wc = wa + fcWednesday, November 2, 2011
  • 74. First Rule of SpeedWednesday, November 2, 2011
  • 75. Wednesday, November 2, 2011
  • 76. C$$ Calculations Are ExpensiveWednesday, November 2, 2011
  • 77. Wednesday, November 2, 2011
  • 78. ... therefore ...Wednesday, November 2, 2011
  • 79. Wednesday, November 2, 2011
  • 80. Browsers Cache Results *Wednesday, November 2, 2011
  • 81. Browsers Cache Results * * - DOM Writes Invalidate The Cache !Wednesday, November 2, 2011
  • 82. Write + Read = ReflowWednesday, November 2, 2011
  • 83. Second Rule of SpeedWednesday, November 2, 2011
  • 84. Apps Have More Than One Panel!Wednesday, November 2, 2011
  • 85. el panel comp containerWednesday, November 2, 2011
  • 86. component (3.x) el panel comp containerWednesday, November 2, 2011
  • 87. container (4.0) component (3.x) el panel comp containerWednesday, November 2, 2011
  • 88. container (4.0) global (4.1) component (3.x) el layout panel context comp containerWednesday, 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 reflowsWednesday, 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 reflowsWednesday, 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 reflowsWednesday, November 2, 2011
  • 93. More OpportunitiesWednesday, November 2, 2011
  • 94. Leverage Layout Dependency DataWednesday, November 2, 2011
  • 95. Cache Layout ResultsWednesday, November 2, 2011
  • 96. Themes Example - 4.1 (IE8)Wednesday, November 2, 2011
  • 97. Themes Example - 4.1 (IE8) 4.0.7 4.1Wednesday, November 2, 2011
  • 98. Themes Example - 4.1 (IE8) 300 Load 200 8% 4.0.7 4.1Wednesday, November 2, 2011
  • 99. Themes Example - 4.1 (IE8) 300 Load 200 8% 10% Initialization 320 240 4.0.7 4.1Wednesday, 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 1035Wednesday, 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 1035Wednesday, November 2, 2011
  • 102. Significantly faster than 4.0 !Wednesday, November 2, 2011
  • 103. But not faster than 3.4...Wednesday, November 2, 2011
  • 104. But not faster than 3.4... YetWednesday, November 2, 2011
  • 105. Further InvestigationWednesday, November 2, 2011
  • 106. Further Investigation Convert Layouts into CSS... where possible Optimize Class Creation Optimize DOM Event BindingWednesday, November 2, 2011
  • 107. GridWednesday, November 2, 2011
  • 108. Native Scrolling!Wednesday, November 2, 2011
  • 109. momentum friction Native Scrolling! accelerationWednesday, November 2, 2011
  • 110. What Could Be Better?!?Wednesday, November 2, 2011
  • 111. Native Scrolling with Buffering!Wednesday, November 2, 2011
  • 112. Is There More?Wednesday, November 2, 2011
  • 113. Native Infinite Scrolling!Wednesday, November 2, 2011
  • 114. But Wait...Wednesday, November 2, 2011
  • 115. Optimized Column ReorderingWednesday, November 2, 2011
  • 116. Store metadataWednesday, November 2, 2011
  • 117. API EnhancementsWednesday, November 2, 2011
  • 118. Border LayoutWednesday, November 2, 2011
  • 119. Multiple regionsWednesday, November 2, 2011
  • 120. North W Multiple regions E e a s s t t SouthWednesday, 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 SouthWednesday, November 2, 2011
  • 122. Control Space PriorityWednesday, November 2, 2011
  • 123. W Control E e a s s t t Space PriorityWednesday, November 2, 2011
  • 124. North W Control E E e W a a s e s s t s t t t Space Priority SouthWednesday, November 2, 2011
  • 125. Regions can be added and removed dynamicallyWednesday, November 2, 2011
  • 126. XTemplateWednesday, November 2, 2011
  • 127. Foundational to Ext JSWednesday, November 2, 2011
  • 128. XTemplateWednesday, 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
  • 131. Compiles To A FunctionWednesday, 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
  • 134. Control StructuresWednesday, 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
  • 137. Code InjectionWednesday, 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
  • 140. applyOutWednesday, 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
  • 142. Class SystemWednesday, 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