Blog

New Ext JS Releases for Performance and IE9 Support: 4.0.2 and 3.4

June 09, 2011 | Ed Spencer

Today we’re releasing two new versions of our flagship JavaScript framework — Ext JS 3.4, which brings IE9 support to Ext JS 3.x; and Ext JS 4.0.2, which contains a raft of performance and bug fixes, as well as some feature enhancements.

Download Ext JS 4.0.2 View Examples View Release Notes

Download Ext JS 3.4.0 View Examples View Release Notes

Ext JS 4.0.2 — Gray Theme, Performance Tuning, Over 200 Enhancements, and Bug Fixes

Ext JS 4.0.2 covers three main topics — performance tuning, bug fixes and the return of the Gray Theme. The popular Gray Theme from Ext JS 3.x has made its return and is now bundled in the SDK and the Theme Viewer example. This theme has been polished for 4.0 and works out of the box with all of our components.

As a patch release though, the main updates surround performance and bug fixes. For this release we’ve taken both of these extremely seriously, making 4.0.2 as strong a build as possible — both in terms of performance and in terms of stability. We also released a preview build of 4.0.2 on the forums — a first for patch releases — to enable the community to give feedback on the build.

Feedback from the community on the preview build has been very positive so far. We’re hearing that performance now exceeds expectations in common customer setups like deeply nested layouts and large forms. In total, we are shipping over 200 performance and bug fixes in 4.0.2.

Grid Performance & Rendering

Almost half of the improvements in this release have centered around grid — making it faster and more robust across all browsers. A number of forum members have been especially helpful in providing their experiences, ideas and frustrations with the new grid and we’re extremely grateful for their help. We were able to isolate a number of sections of code and optimize instances of slow grid performance. Both our own testing and reports from the forums show grids performing where we expect them across the full range of uses.

We’ve also devoted great attention to the rendering of the grids on each operating system and browser. With the virtualized scrolling introduced with the new infinite grid functionality, coaxing all of the supported browser combinations into being both beautiful and lightning fast was a very tall order. With the help of the forums and the community we believe we’ve managed to strike the right balance across all browsers in 4.0.2.

Nested Layouts

One of the instances that had been causing people some problems before 4.0.2 was deeply nested layouts — especially when using the auto sizing layouts (which are the default). These are a brand new capability in Ext JS 4 and go to great lengths to automatically size and position your components based on their “natural” size.

For example, using a grid inside a panel with an automatic layout would work out the grid’s full size once its rows have been loaded, and then size itself accordingly. Whenever the grid is updated or reloaded, its size automatically changes to this “natural” size. Our problem was that nesting several of these layouts inside one another led to a significant performance penalty, sometimes several times slower, as the code paths were not properly optimized for this.

Once we optimized how these layouts communicate with one another we were able to dramatically improve layout time. In a couple of deeply nested examples posted on the forums layout is now meeting our performance expectations.

Rendering Performance

Ext JS 4 features a brand new rendering pipeline that is significantly more structured and extensible than the rendering process in Ext JS 3. All Components now render the same way, and are driven by XTemplates. They also follow a common hook point regime, enabling the framework and developers to extend or hook into the render process for each Component.

While the new rendering architecture is a big step forward, it did create slow performance in some cases. In 4.0.1 and before the order of operations in the rendering process was not as efficient as it could have been, resulting in many more DOM updates than are actually needed. In 4.0.2 we have corrected this behavior, yielding significant render speed improvements.

We have already identified further optimizations to the rendering pipeline that will be incorporated into Ext JS 4.0.3 and beyond. Performance is very important to all of us and making the framework as fast as we know it can be will remain a top priority for the team.

General Improvements

All of the improvements made to Ext JS 4.0.2 are detailed in the 4.0.2 release notes. You can also find a full hosted set of examples that show off the framework and its new speed boost. In addition to all of the code improvements we’ve also been working hard on our documentation, with updates to the API documentation, guides and even the API browser itself.

Ext JS 3.4 — Support for IE9

Today isn’t all about Ext JS 4 — we’re also releasing Ext JS 3.4, bringing full support for Internet Explorer 9. This update is recommended for all applications running on Ext JS 3.3 and is meant as a drop-in replacement for Ext JS 3.3.x. In addition to the brand new IE9 support, Ext JS 3.4 also brings a series of enhancements and bug fixes to your applications, as detailed in the 3.4.0 release notes.

Ext JS 4.0.x and Beyond

With 4.0.2 we feel confident that the performance and stability of Ext JS now meets the needs of even the more demanding uses. Thanks to our dedicated community, together we believe that we’ve ensured that Ext JS is optimized for real world applications. No software product is ever done and we plan to keep working on bug fixes and patches to Ext JS 4.0.x in the coming weeks and months. Those patch releases will be available to our support subscribers. Our next general release for non-support subscribers will be 4.1. There’s no hard date on 4.1 yet, but we’ll be discussing it more in the months leading up to SenchaCon 2011.