Great JavaScript UI Frameworks

For many developers, the decision on choosinga a JavaScript framework is tough. There are many good ones from Dojo thru DHTMLx to jQuery and MooTools among the  many UI based JS frameworks plus  backbone.js and qooxdoo on the MVC side. So to filter the large set of choices,  the following  criteria are proposed:
1)support for a “good set” of widgets [this is a multipage post not ready for prime time yet] ;
2)support for multi-touchscreen operations uniformly  across both desktop and  mobile OS;
3)support for all five major browsers and 5 major OS – Linux, Mac OS/X, Windows thru 8, Android, and iOS;
4)support of model+datastore, viewer, controller classes; and
5) availability of of a drag and drop Visual Designer to layout UI components and wire to MVC datastores and controllers.
The latter JavaScript UI Builder is something that Adobe Dreamweaver has been promising for more than a decade and really has not yet delivered[ as the Widget Browser and 5.5 sort of get close].

Here are the JS frameworks that have percolated out so far.

DHTMLx

The Visual Designer is available online for free and works remarkably well to  setup the overall architecture of a DHTMLx design. One has Design and Code Views [the code is read-only].  You add  new widgets or objects in the upper right inspector panel either as sibling or child component. Then add properties to the component in the properties panel. Events for the component can be coded in the designer as well. In sum, the Visual Designer is simple, fast and helpful in outlining your DHTMLx code. One annoying aspect – when you click on a component on the design window, the focus does NOT shift to that component in the Inspect or Properties panels.
DHTMLX supports all 5 major browsers. DHTMLX  Touch supports only WebKit  browsers.
DHTMLx supports multi-touchscreen operations but only for mobile apps. Those apps have a subset of the the desktop components available to them.
DHTMLx support MVC classes and nice DataStore options linked well with Grid, Tree and other components.
DHTMLx supports a wealth of rich components including Grid, Trees, Scheduler and other Ajax-powered components.


Qt

Qt is a C++/QML/javaScript crossplatform development system used to create applications for desktop, mobile and server usage across the broadest of OS platforms from Blackberry, Linux, and OS/2; through Maemo/Meego, Mac OS/x, and  Open Solaris; to Symbian, webOs, Windows, and Windows CE/Mobile. Qt also has a very broad set of integrations. Finally, Qt is dual licensed LGPlv2.1 and a commercial license from Nokia.
Qt-Creator supports complete touchscreen gestures and operations for desktop and  mobile apps.
Qt-Creator supports through QML /JavaScript MVC classes available for both desktop EXTjs 4.x and Touch 2 apps.
Qt-Creator supports a wealth of rich components through Qt-Quick. The Qt-project is fast at work delivering Qt-5.0 which will make QML and JavaScript first class development languages along with C++ for cross platform development. The Qt-5.0 alpha has already appeared in early April. Full Qt-5.0 is expected in the early  Fall. Qt-project leads the development of Qt independent of Nokia the owner of the commercial versions of the product; Qt-project operates with LGP-Open Source licensing.


Sencha

Sencha System Architect costs $399  and creates two types of designs. Sencha  Ext 4.x desktop applications and Sencha Touch applications for use with Android, Apple, and Blackberry mobile apps. This is similar to DHTMLx split.. Sencha System Architet has Design and Code Views [again the code is read-only].  You add  new widgets or objects in the upper right inspector panel  and directly to the the UI Canvas. Then change or add properties to the component in the Properties panel at the lower right.  Events for the component can be coded in the designer as well. In sum, the Sencha Architect has a rigorous model, viewer, control documentation and robust onboard and online documentation.
Sencha System Architect supports all 5 major browsers for EXTjs 4.0 desktop apps but only Webkit Browser apps for complete Sencha Touch 2 capabilities. One of those is very fast response time.
Sencha System Architect supports complete touchscreen operations but only for mobile apps. Those apps have a subset of the the desktop components available to them.
Sencha System Architect supports solid set of MVC classes avaiable for both desktop EXTjs 4.x and Touch 2 apps.
Sencha System Architect also supports a wealth of rich components; but the Touch coomponents are different from the EXTjs 4.x desktop in more than name – they work slightly differently, have more touch operation enablement, fewer components but with some unique Touch-only variants.


Wakanda

Wakanda is aServer+Client Sie JavaScript development system which has its own NoSQL database server. These ar tied togther in a the Wakanda Studio for data model building, UI creation, testing and deployment.
Wakanda Studio supports 4 of the 5 major browsers [not Opera] and the three major desktop OS – Linux, Mac OS/X, with Android and iOS upcoming in beta and development versions.
Wakanda Studio support some touch events and operations for desktop and  mobile apps in its 2.0 beta version.
Wakanda Studio supports throughNoSQL MVC classes available for both desktop EXTjs 4.x and Touch 2 apps.
Wakanda Studio supports a wealth of rich components and widgets for desktop[ and mobile development in beta]. Here is the Wakanda features roadmap. I will be interested in seeing how Wakanda solves the existing SQL databases to NoSQL problem.

Summary of Chosen JS Frameworks

There are a number of JS tools on the line. And being in our qualified list is certainly no guarantee of  performance because we have yet to do testing on a)speed and perfromance, b)reliability of the code produced, and c)adaptability of the code to change requirements – the calling card for MVC implementations. Nonetheless, in the weeks ahead, we hope to report on just such testings as we profile each of the JS frameworks in use on real projects.

In the meantime here is a brief summary whysome of the JS frameworks considered did not pass our “qualification criteria”.
Cappucino does not make the list because because it uses Objective J, a superset of JavaScript, has only emerging Touch support, and no drag and drop UI builder.

Dojo does not make the list despite having solid docs, a good widget set,  emerging Touch and MVC support, but no drag and drop UI builder
Glow – BBC’s JavaScript Widget library lacks strong touch and UI builder
Google WebToolkit – like Isomorphic Smart GWT uses Java to build HTML+JavaScript UI.
Kendo UI – has widgets, jQuery Mobile base, cross platform support; but no UI builder.
knockout.js – has some widgets, MVC, and cross platform features but lacks a UI builder and overall completeness.
Mootools
does not make the list for lack of touch support, a full array of components,  plus no drag and drop UI builder.
Rialto – remarkably compact, robust framework but no multi-touch or complete UI builder
Sproutcore does not make the list for a nascent but not complete Touch functionality and only Handlebars templating system.
Wijmo, a jQuery fork,  does not make the list for lack of touch support[promised] and no drag and drop UI builder.
YUILibrary – certainly has the widgets, browser support, and basic MVC elements but no UI builder, weak multi-touch.

Some Gems Found Along the Way

In the process of perusing the literature on JavaScript Frameworks, there were a number of open source JS libraries that  clearly made no attempt to meet our criteria primarily because they either had chosen some subset of the task  requirements. Nonetheless these JS Frameworks deserve mention for innovation  or other excellence in their design/approach. Finally, there was a third group like Raphael and Typeface that solve a very specific problem, often not related to UI or MVC design, but still of great value – hence their inclusion.

Other JavaScript  tools, discovered along the way,  worthy of consideration:
accDC and AmpleSDK are specialty JS frameworks for accessibility and SVG/SMIL/XUL operations respectively.
Agility – another MVC controller script like Angular below with links to jQuery UI
AmpleSDK – extends jQuery with its alternative to jQueryUI framework with SVG support.
Amplify.js – has some solid client side local storage and inter process communication capabilities.
Activejs – provides local and RESTful data modeling  with back button and history support. Integrates well with jQuery, etc.
Angular.js – HTML modifying JS Framework, Google supported.
backbone.js – backend web application developer that works well with UI JS frameworks like jQuery, mootools,and Sizzle.
Draw2D – create Visio like drawings in this JavaScript Library.
Foobar.js – allows creation of dynamic and interactive Web Pages.
JavaScriptMVC – jQuery extensions that enhance building in MVC mode, functional testing and embedded live documentation.
jsPHP — a JavaScript library providing the PHP API
JuiceUI – is another jQueryUI based webforms creation tool linked to Wijmo
livelykernel – JavaScript driven module creation, last of Sun software innovations.
localStorageDB – a simple, tiny database layer for localStorage
Mochikit and Plotkit work together to produce graphics and charting using Canvas+SVG.
Processing.js – like Raphael is to SVG, this is  graphics art output routine for the Processing language.
Pure – json driven report writer with templating.
pureMVC – is derived from ActionScript code for MVC design and has Mootools, Extjs, and prototype versions.
Quipos.js – is a clone of core jQuery with some novel variants.
qooxdoo – covers JavaScript website, desktop, mobile, and server [node.js and Rhino interfaces] worlds.
Raphael.js – this is a gem of an open source implementation of SVG+VML for display on Web Pages.
Sammy.js – tiny, fast, RESTful.
Sizzle.js – a CSS selector engine similar to jQuery and other JS libraries here.
Spinejs – is another strong MVC based framework which mixes well with jQuery and other UI frameworks.
TaffyDB – is the JavaScript databse which has attractions for offline operations; but Sqlite also serves there.
typeface.js – is a specialty JS  library to deliver any font and styling you want thru JS
underscore – a good combo with backbone.js  as Controller and jQuery or Mootools as UI

Some General Observations

First, the influence of client server computing and even recent products like Ruby on Rails and Flash/Flex was notable among a number of the JS frameworks considered. Second, there is a somewhat artificial line developing between mobile versus desktop apps. This line sees mobile apps as being necessary to reject  Old UI Barnacle-free  by means of a growing cloud of multi-touch operations which are menu, iconbar, and toolbar free . These multi-touch rhapsodic gestures perform  rather a delicate dance between processing states and changes to objects of interest to the client. Then there is the old school with desktop UI Barnacles such as 3 deep menus, elaborate CTL+key mappings, and a half  dozen context-driven iconbars [I am describing the AutoDesk AutoCAD orAdobe  Dreamweaver UIs]. The idea is that the latter UI barnacles are all POST-PC and will be replaced in a short while by the multi-touch rhapsodies. And never shall the twain meet.

Part of this is deliberate as Apple has refused to bring multi-touch screen operations to Mac OS/X except through the confines of a touchpad. Microsoft has obliged by a)being late to bring multi-touch screen operations to Windows and has been distinctly opaque as to what multi-touch gestures will be available on the desktop versus the pure Metro mobile set of UI operations. Google has also obliged confining all its UI efforts to a Cloud-based enterprise with little support of multi-touch in the desktop space.

Yet this observer is of the opinion that a tremendous UI opportunity is being offered to some software vendors who reject the artificial separation of mobile multi-touch UI from desktop menu single touch + icon Barnacles, and rather offer a blend of multi-touch gestures + iconized-landing zones for a more intuitive, better remembered UI interaction. Look for a Samsung-like Touch Wiz extension to what the OS vendors currently offer by some clever vendors in the near future. Of the JS Frameworks examined so far, it appears that Nokia’s Qt is closest to being able to offer that  capability. Proviso – one can see that being considered by other JS vendors.

Last observation – JS Frameworks have shown steady improvements in speed with minification, internal optimization of code flows, and clever caching. But ultimately, JS frameworks will depend on the continued speed improvements acchived in the browser vendors various versions of the JavaScript engine. Fortunately, the inter-browser competition is still very robust and has not seen muchnon-standard divergence. Knock on wood.

About warkworth1

Web Designer and Developer that uses WordPress primarily but also Bootstrap, Foundation Zurb, Ink, and even Magento etc. Love teaching full stack developer tricks with HTML/CSS/JavaScript/PHP/SQL at WordCamps and on my blogs
This entry was posted in coding. Bookmark the permalink.

10 Responses to Great JavaScript UI Frameworks

  1. I used DHTML for Developement My Web Site.

  2. A new JavaScript UI library Webix is also worth adding into your article (http://webix.com/). The library delivers over 40 fully customizable components, provides JQuery integration and can work with any server-side platform: PHP, .NET, Java, etc.

  3. vclteam says:

    We just released

    VCL.JS free open source typescript framework for building an enterprise web application.

    Includes everything out of the box.

    Rich visual Component Library, routing,spa ,mvvm, AMD, Simple database query execution, data
    binding and twitter bootstrap look and feel.

    Can we get your comments?

  4. Veronika says:

    One more great JavaScript UI framework is Webix (http://webix.com/).
    Firstly, it delivers a wide range of UI components beginning from a complex datagrid and ending with a simple combo or popup.
    Webix is a JavaScript tool for developing mobile and desktop web apps that process all touch events without a hitch. Webix runs across all modern browsers and major OS. The components of library support drag-and-drop operations, filtering, sorting, editing and many others.
    Webix can be easily integrated with popular MVC framework Backbone.js. It means that there’s no need to tie data to the DOM.
    Webix is worth adding to your list of js libraries.

  5. Any Suggestion says:

    What about morfik.com?
    Seems to me a great competitor, but I do not really have the experience; I am on search for the best and easy visual Framework with database Connection.

  6. Danny B says:

    Released few months ago, classyUI, you can check it out at http://www.classyui.com

  7. Cyril says:

    It was a smooth sailing since our onboarding software had all details on company policy and even basic training packages to help new employees become productive quickly.
    You don’t have to brag about your experience and skills, but do share your competence.
    Performance management is a complex task in today’s organizations.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s