UI performance and better UI framework
8:09 pm in UI, javascript by Webdevelopment

This is the discussion between our group members and excerpt of my view, Our development used:
- Java (CLI)
- jRuby (wrapper on java CLI)
- Ruby (API for jRuby wrapper)
-RoR (GUI)
-Jquery (view controls using selectors)
-YUI (Ajax data-manager, DataTables/Grids, DataPanels, Dialog box )
This discussion was heavily based on YUI library but here my point is to give the view what product can encounter when you have these issues:
- Lots of javascripts
- Too complex view which are heavily dependent on other logic models
- Lots of hacks to override different JavaScript frameworks functionality and css
- Single page interaction
- Many developers working and not using common files
- Back-end command line response is slow on top of one page GUI, which is heavy because of lot of javascript
- Using resizing hacks on datagrids and panels, which slows down a page least for 3 secs and calls different api’s least 3 times which calls other methods.
And here is our teams early investigation regarding choosing UI framework, which is not really concrete and some what misleading in some areas:
|
|
Merits |
Demerits |
|
GWT |
Pure Java (productivity) |
Lack of complete set of UI widget (needs Ext GWT or GWT Ext) |
|
|
Cross browser compatibility |
Exclusive (hard to integrate with other JavaScript) |
|
|
Step-by-step debug ajax app in Eclipse |
Layout may be difficult without Ext |
|
|
Junit |
|
|
|
Built-in i18n |
|
|
|
Deferred binding (download according to browser & lang) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
YUI |
Complete set of Rich UI widgets |
Complex (not easy to use or start with) |
|
|
Very comprehensive documentation/tutorial |
No OOP |
|
|
Big community behind |
No built-in i18n (may use some 3rd-party plugin) |
|
|
|
|
|
|
|
|
|
|
|
|
|
jQuery |
Very powerful DOM manipulation and query |
Lack of widget libraries. There is jQuery UI plugins but it’s far behind a rich widget library. Many free UI plugins written by 3rd-parties (mostly individuals). |
|
|
Easy to use/learn |
No OOP |
|
|
Big community |
No built-in i18n (may use some 3rd-party plugin) |
|
|
|
|
|
|
|
|
|
|
|
|
|
Dojo |
Rich UI widgets |
Hard to customize |
|
|
OOP |
Poor documentation |
|
|
|
Slow and big |
|
|
|
Buggy |
|
|
|
|
|
|
|
|
|
|
|
|
|
Ext JS |
Richest and most complete set of UI Widgets (Ext GWT and GWT Ext are built on top of it) |
Commercial license required |
|
|
|
Poor documentation |
|
|
|
|
What outcome we needed?
- Mature and robust
- Comprehensive set of components/controls/utilities. To name a few: DataTable with ajax data retrieval, server/client side pagination, sorting, filtering & polling; popup dialog, Connection Manager (Ajax), Layout Manager, dropdown/context menu, tree (ajax retrieval), auto-completion, charts, utilities like event handling, DOM manipulation, data source with cache, JSON, logging, etc.
- Active development.
- Detailed and large set of documentations/examples.
- Highly customizable and can be used in combination with other JS libs/customized code since YUI is pure JS as opposed to GWT.
- Free
- Large community behind
For above given information and after product completion, here are some outcomes which we like to focus in any Rich Internet Application
- We have been not using any CSS frameworks like Blueprint (Largely supported by rails community on github) or some built-in framework of your own for reset css like this http://meyerweb.com/eric/tools/css/reset/. Or http://elements.projectdesigns.org/
- By using YUI and over-written css on top of yui library is killing whole purpose of css and creating many problems for hacks especially when using overflow.
- If we are using jQuery then why not use jQuery UI? There are lots of plugins separately supported by large communities for data tables, tree and other stuff.
Here is example http://www.flexigrid.info/, very low weight library and highly customizable and used by many good open source softwares like SugarCRM, VtigerCRM, SimpleInvoices.
By doing this we can cut down the chances of collisions between two libraries and it can be more consistent and cohesive layer of framework code/css with application’s code/css. - When any application grows from smaller to medium size or larger then it has to be not overload with all libraries code which is not necessary. As compare to YUI is always loading every thing but when compares to jQuery UI or jQuery you can use them as plugin when needed.
- Any big application needs their UI to build with their own requirements rather than using other frameworks (which are more focused on many issues which is even not near to your requirement) and should use custom built plugins.
- I’ve seen custom built panels/interfaces with simple javascript and jQuery which are 70% faster than YUI.
- jQuery UI http://jqueryui.com/themeroller/ is highly customizable as compare to YUI because it is built on propose so user can customize rather then making hacks.
- There are time’ constraints to built custom build interfaces but in long run it equals the equation to redo, fix or hack every time.
- Google or Yahoo has trend of discontinuing large community based projects and it often raised concerns in open source community and fails to achieve long terms goals, examples are endless; like for google etherpad and many others.
- jQuery provides every thing which YUI can, AJAX , lazy load (plugin), customized trigger of methods not loaded on client side (pooling plugin).
- Mostly we are doing every thing with jQuery when comes to selectors and DOM manipulation so it is advisable that also manage UI’s with jQuery.
- Still the best documentation so far is YUI and nothing compares to any others and all things are slick when it comes to visual.
- In yahoo blog post; “Performance Research”, there is a detail explanation about Empty page cache and Full page cache which result in significant performance increase.Empty and Full Cache Summary to load http://www.yahoo.com
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
- Reduce number of page requests in one page or least main page
- Reducing requests should be well balanced against visual richness, some cases with rich applications needs quite number of request on one page or imagine app’ is just one page mostly then you need to consider consolidating Javascript files and use of CSS sprite but it should not ignore tuning of HTTP request pipeline.
Some useful links for that;
http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/
http://developer.yahoo.com/yslow/
http://37signals.com/svn/posts/1587-introducing-sprockets-javascript-dependency-management-and-concatenation
http://developer.yahoo.com/yui/compressor/ (Best among all)
http://github.com/mudge/asset_compressorhttp://getsprockets.org/



0 Responses to UI performance and better UI framework