Comments on: JavaScript Tabs: ExtCore vs jQuery UI http://blog.akawebdesign.com/index.php/2010/01/21/javascript-tabs-extcore-vs-jquery-ui/ ...how a nerd sees the world-wide-web. Fri, 23 Jul 2010 18:30:26 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Tommy Maintz http://blog.akawebdesign.com/index.php/2010/01/21/javascript-tabs-extcore-vs-jquery-ui/comment-page-1/#comment-801 Tommy Maintz Sat, 23 Jan 2010 01:28:57 +0000 http://blog.akawebdesign.com/?p=374#comment-801 Hi Arthur, Thanks for taking the time to do this extensive comparison! First, I just want to point out that, in order to make this comparison more fair, we shouldn't include all of jQuery UI — We just need jquery-1.3.2.js, ui.core.js and ui.tabs.js. Also for the css, we just need ui.core.css, ui.tabs.css and ui.theme.css. If we optimize by just using these files, the end code base is 205kb. The current tabs example was created  to demonstrate one way to solve the problem, but not a reusable tabs plugin (hence why the markup contained additional classes, etc). For a more "apples to apples" comparison, I've created a new sample which demonstrates how easy it is to create a Tab component that uses the same minimal markup as the jQuery plugin. This custom plugin is meant to be used with <a href="http://www.extjs.com/products/extcore/" rel="nofollow">Ext Core</a> and not as feature complete as our Ext JS tab panel. You'll also notice the method for creating the tabs is more in line with our (Ext's) philosophy of being object oriented but as concise as jQuery UI. The total size of the new <a href="http://www.extjs.com/products/extcore/" rel="nofollow">Ext Core</a> tabs example (including css, images and minified ext-core.js) is  131kb. I've gone ahead and uploaded the new <a href="http://www.extjs.com/playpen/ext-core-latest/tabs/" rel="nofollow">Ext Core tabs here</a>. Anyway, thanks again for the analysis and let me know if you have any other Ext related questions! Hi Arthur,

Thanks for taking the time to do this extensive comparison!

First, I just want to point out that, in order to make this comparison more fair, we shouldn’t include all of jQuery UI — We just need jquery-1.3.2.js, ui.core.js and ui.tabs.js. Also for the css, we just need ui.core.css, ui.tabs.css and ui.theme.css. If we optimize by just using these files, the end code base is 205kb.

The current tabs example was created  to demonstrate one way to solve the problem, but not a reusable tabs plugin (hence why the markup contained additional classes, etc).

For a more “apples to apples” comparison, I’ve created a new sample which demonstrates how easy it is to create a Tab component that uses the same minimal markup as the jQuery plugin. This custom plugin is meant to be used with Ext Core and not as feature complete as our Ext JS tab panel. You’ll also notice the method for creating the tabs is more in line with our (Ext’s) philosophy of being object oriented but as concise as jQuery UI.

The total size of the new Ext Core tabs example (including css, images and minified ext-core.js) is  131kb. I’ve gone ahead and uploaded the new Ext Core tabs here.

Anyway, thanks again for the analysis and let me know if you have any other Ext related questions!

]]> By: Jake Kronika http://blog.akawebdesign.com/index.php/2010/01/21/javascript-tabs-extcore-vs-jquery-ui/comment-page-1/#comment-792 Jake Kronika Fri, 22 Jan 2010 18:47:25 +0000 http://blog.akawebdesign.com/?p=374#comment-792 Though I haven't used ExtJS much, I can say that I definitely find the reduced markup and code required by jQuery to be extraordinarily useful when building out rich applications, particularly in terms of the minimization of overhead. As far as the number of background images provided by the jQuery theme you used, it is likely that some of them are intended for other browsers, particularly for backwards compatibility with IE6 and below. For instance, transparency in PNGs is not directly supported by those browsers, so while more modern versions can use them, the CSS may incorporate other styles that use different images on versions that can't. As such, you are only loading some of the images, resulting in file transfers that compete with or even beat the ExtCore method you mentioned. That doesn't take into account the additional reduction in transferred data due to more concise markup with jQuery. Though I haven’t used ExtJS much, I can say that I definitely find the reduced markup and code required by jQuery to be extraordinarily useful when building out rich applications, particularly in terms of the minimization of overhead. As far as the number of background images provided by the jQuery theme you used, it is likely that some of them are intended for other browsers, particularly for backwards compatibility with IE6 and below.

For instance, transparency in PNGs is not directly supported by those browsers, so while more modern versions can use them, the CSS may incorporate other styles that use different images on versions that can’t. As such, you are only loading some of the images, resulting in file transfers that compete with or even beat the ExtCore method you mentioned. That doesn’t take into account the additional reduction in transferred data due to more concise markup with jQuery.

]]>