Ext JS 5 簡介， 對比Ext JS 4的改進

原文連接：http://www.bryntum.com/blog/a-first-look-at-ext-js-5/

    隨着最近初版Ext JS 5 Beta的發佈，咱們認爲它擁有者很是cool的新東西，因此咱們來記錄下一位不時之需。自從咱們成爲了一個很是成熟的Ext JS團隊以後，咱們對於隱藏在表面之下的更新和技術詳情很是感興趣。咱們將對比一下新舊版本間在內存佔用，性能，差異的API的不一樣。同時---自從咱們嚴重地依賴Grid控件後，咱們也很是好奇它的變化，和它的性能基準。

第一眼

    咱們注意到的第一件事是ext-all-debug.js文件看起來很是的小。而且它不是真正的ext-all-debug.js文件，你不能引入它來驅動你的應用。若是你的應用使用其中一個ext-all-XXX.js文件，你須要更新你的引入路徑指向/build/ext-all-XXX.js。一樣的全部的CSS文件，ext-all.css如今在路徑 /packages/ext-theme-classic/build/resources/ext-theme-classic-all-debug.css中。如今咱們知道如何去找到相關文件的位置後，讓咱們建立一個簡單的例子和研究它的內存使用。

內存佔用

在一個html頁面中引入 ext-all.js 並用運行在MacBook Pro上的chrome中進行內存佔用跟蹤。

Ext JS 5.0.0.736

1 2	// Memory footprint console . memory . usedJSHeapSize      // 27600000

Ext JS 4.2.2

1 2	// Memory footprint console . memory . usedJSHeapSize      // 13400000

包含整個Ext JS類庫的內存佔用翻了一番。注意，這不像那些由Sencha Cmd幫助下能夠由你自定義建立你的應用所需的最精簡內存佔用的的類庫。

Grid 性能

    咱們繼續看grid的性能和調整其中一個locking grid的例子並在一個新的chrome中從新打開它。你能夠看到在這個Sencha Fiddle的測試用例中，咱們增長了1000條記錄到store中來測量渲染時間。在渲染以後咱們會檢查當渲染這樣一個大的grid時的元素建立的個數。Ext 5 Grid如今爲每一行使用一個table，來消除佈局和更新一個大的table時給瀏覽器的壓力。這些‘開銷’一般須要更多的DOM元素在下面的比較中。

Ext JS 5.0.0.736

1 2 3 4 5

// Initial render time console . timeEnd ( 'render' ) // 620ms   // Checking total number of DOM elements Ext . select ( '*' ) . getCount ( )        // 18101

Ext JS 4.2.2

1 2 3 4 5

// Initial render time console . timeEnd ( 'render' ) // 650ms   // Checking total number of DOM elements Ext . select ( '*' ) . getCount ( )        // 14113

    在這些元素的數目之上，渲染的時間有了輕微的提高。相對於在Ext JS 4.2.2中，新的grid控件渲染1000行同時緩衝渲染關閉的確是至關的快。爲了快速的渲染，當使用deferInitialRefresh : true (default)時，彷佛有一些前置處理在進行（在Ext JS或者是在瀏覽器佈局時），這時grid不會在一到兩秒內響應滾動。當設置這個標誌爲false時，grid會當即在渲染後響應。

    另外一個重要的方面是grid在數據變化後的響應。咱們增長一個按鈕到咱們的例子中，點擊它會產生200條記錄的更新。

buttons : [
    {
        text    : 'updates',
        handler : function () {
            console.time('update')
            for (var i = 0; i < 200; i++) {
                store.getAt(i).set('company', 'foo');
            };
            console.timeEnd('update')
        }
    }
]

    Ext JS 4.2.2花費了126秒來完成這個任務。在這期間瀏覽器徹底被卡主並失去響應。當使用Ext JS 5時，這個更新花費了13秒。這個場景產生了10倍的速度提高。這固然是一個極限的場景，你不該該在DOM中渲染這麼多行，而是使用Ext JS中的緩衝渲染（buffered rendering ）。

向後兼容性

    另外一個咱們特別感興趣的是在一個大版本升級下的向後兼容性。記得Ext JS 3 to 4升級時的麻煩，咱們但願此次的升級能夠乾淨和簡單些。再一次，自從咱們知道咱們有一些重載的private 方法和使用了一些private 的屬性後咱們認識到咱們須要跨界一些不兼容的障礙。爲了更好的準備咱們的升級，咱們決定編寫一個簡單的差別對比工具來對比兩個版本的Ext JS和高亮刪除的類和屬性。這使給咱們產生一些有意思的信息變成了一個至關容易的任務，你能夠在這裏看到結果。

由於後面的對我不是特別重要，因此我就暫時留着不翻譯了，大體就是說，一些不兼容的api，致使老版本會不能正常運行，待我有興趣再補上吧···

The tool inspects all Ext JS JavaScript symbols, classes and prototypes to see what has changed. It makes no distinction between private and public properties, so most of the information it shows will be irrelevant to you. It will be interesting however, if you rely on some private Ext JS methods or properties, and such properties are removed or changed in Ext 5. This should not be considered a breaking change, Sencha refactoring private code is expected and your application code should naturally rely as little as possible on undocumented parts of the framework. The output from this tool should not be considered as the full truth, and may contain errors or missing changes. If you want to try it out yourself, you can find this tool on GitHub and hopefully it can help you find vulnerable parts in your code base before you start your upgrade process.

Breaking Changes In Ext JS 5

We have mainly looked at issues we found when trying our own upgrade. Mainly we have inspected the GridPanel class, its related classes and the data package so far, so this list is most likely incomplete. Here are a few things to look out for if you want to try to upgrade to the Ext JS 5.0.0.736 build.

Ext.data.Model – fields. This property has changed from being a MixedCollection and is now a native Array.

Ext.data.Model – modified. This property has changed its default value, from being {}and is now undefined. If you check this modified object in your codebase, you now first need to check for its existence.

Ext.grid.View – itemSelector. Grid rows used to be rendered as a simple TR node, this property is now 「.x-grid-item」 and if you have CSS styling relying on this selector you need to update your CSS.

Ext.fly(el).on. In Ext 5, you cannot use a FlyWeight element to attach event listeners. You now need to use Ext.get instead.

Unique Model Names. In Ext 5, you cannot currently have two models in different namespaces with the same suffix. Example: Defining Foo.bar.Model and laterFoo.other.Model will throw an exception in the current Ext JS 5 beta. This has been reported here.

Ext.util.Observable – addEvent. addEvents has been deprecated and will lead to an exception if called. Calls to addEvents can be safely removed (even in Ext 4.x).

Conclusion

Overall, the Ext JS 5 package looks solid. New great looking themes, new features and only a few glitches detected so far. We were actually able to get the Scheduler component rendered and working within a few hours which is very promising – screenshot below.

We’ll continue to monitor the coming Ext 5 betas and update our tool to show the latest changes in the framework. If you have any feedback of how we can improve the diff tool or if you have found any other breaking change we should know about, please post in our comments or forums.