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 agnostic . 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 UI Frameworks will depend on the continued speed improvements archived in the browser vendors various versions of the JavaScript engine. Fortunately, the inter-browser competition is still very robust and has not seen much non-standard divergence of late. Knock on wood.