JavaScript Frameworks in Action

One of the problems with the host of good JavaScript Frameworks available is the  sheer richness of offerings . During the course of the Summer I have started to test some of the frameworks to determine a)which are robust enough for use with other JavaScript Frameworks+widgets and b)which offer any styling and development advantages. In order to do this I have shucked theOpenSourcery.com’s default template and have used a number of the Application Frameworks with their widgets in the course of doing various Web reviews.  The net result is that readers get two reviews for the price of one.

First there is the main topic review, for example, starting just below is a review of Jing, Techsmith’s free and very useful screen capture utility for Mac and Windows. But also you gets to see and use the EXTjs Frameworks Tab Widget and at the end of the tabs there are a few remarks about the EXTjs Tabs widget.

Here is the full list of reviews and widgets used:

Jing - Techsmiths very capable  and very free screen/video capture utility – EXTjs Tab Widget
Home page 1 – trial home page redesign – EXT.js Panel, Accordion, and Tab Widgets
Home page 2 – trial home page redesign 2 – jQuery widgets
Change/replace HTML – dynamic HTML content is the game here – Mootools Accordion  Widget
Change/replace CSS – dynamic CSS styling brings power – Adobe Spry Tabs Widget
JavaScript Resizing Text – mouseover, mouseout trigger text resizings – jQuery Accordion widget
JavaScript Expander/Collapser – dnamically expand collapse HTML Blocks – jQuery Tabs widget
Snagit 9 - Techsmith’s Pro screen capture utility – EXTjs Tabs widget
Xara Web Designer – easy to use Web page generator – EXTjs Accordion, Panel, Tabs widgets

More dual reviews will continue over the Fall and Winter. If you have a favorite Framework or widget you wanted tested – just email me.

Summary to date

So far the JavaScript frameworks have proved to be runtime robust but developing and loading fragile. At run time I have not encountered any problems using several different JavaScript codes and frameworks/widgets mixed together at the same time. But I have not subjected the Widgets/Frameworks to rigorous testing [nor cross browser testing yet]. I suspect when I have started using say Bindows or Backbase, which are very XML and namespace dependent, with some of the other frameworks  – problems may arise.

However, all of the frameworks are developer fragile. This means if you have any containing DIV [or sometimes any HTML tag] wrong/unbalanced then the frameworks can spout out some pretty bizarre error messages- often nowhere near the bug. Also one of the frameworks appears to work well and then not at all with Firebug, the Mozilla Firefox debugger extraordinaire.

By loading fragile, I mean that the load times for some of the more complex Web pages appears to take 8-15 seconds or more.  There appears to be a trade-off [see for example the Xara Web Designer review]. It appears that the more you condense a web page down to one screen in size  using sliding panels, tabs, and accordions, the slower the apparent load time. This is because many frameworks don’t fire up until DOMReady is signaled – which is after all of the page and resources are loaded. Second, on ordinary pages that require large amounts of scrolling, you often don’t see that some of the images and other resources are still loading 7-20 seconds after you have started to read the opening parts.

The good news is that once loaded, the pages are very fast in actual operation.  Finally, there are mixed capabilities among the frameworks to provide color/theme/styling of their widgets. So the whole trick in developing with JavaScript as part of the Web UI experience is to balance style, compactness of design  and runtime performance.  Hmm … sounds like UI design in general.

Leave a Reply