UI performance and better UI framework

8:09 pm in UI, javascript by Webdevelopment

0

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/
    Table 1. Empty and Full Cache Summary to load http://www.yahoo.com