|
Nov 21
2009
|
Comparison of major RIA user interface frameworksPosted by: Peep Küngas on Nov 21, 2009 Tagged in: RIA
|
According to ZapThink SOA architects see Rich Internet Applications (RIA) as the software for consuming services in the SOA context. Although the consumers in such cases do not necessarily have user interfaces, when they do, RIAs typically meet the needs of the business more than traditional browser interfaces or desktop applications.
"As a result, there is increasing demand for RIA capabilities in the enterprise, although people don’t identify the applications that leverage such capabilities as RIAs. Rather, RIA capabilities are features of those applications. This further serves to make indistinct a separately identifiable RIA market. However, this dissolution of the RIA market as a separate market is still several years away, as all indications are that the RIA environments market in particular will continue to experience healthy growth for years to come."
Given the preceding it is important to know the main characteristics of the major RIA technologies. In the following table initial steps towards summarising the characteristics and listing the technologies are taken. Feel free to propose extensions to it.
| Framework | GUI Scripting language | XML based | Widgets technology | SEO friendliness | Cross-browser custom widgets creation | Runtime |
| Dojo | Javascript | No | JavaScript / Ajax | Yes | JavaScript expertise | Different Web browsers |
| YUI | Javascript | No | JavaScript / Ajax | Yes | JavaScript expertise | Different Web browsers |
| GWT | Javascript | No | Yes | JavaScript expertise | Different Web browsers | |
| Zapatec | Javascript | No | JavaScript / Ajax | Yes | No | All web browsers, any server technology |
| Chiba | XForms | Yes | JavaScript / Ajax | Yes | No | Different Web browsers |
| XSLTForms | XForms | Yes | JavaScript / Ajax | Yes | No | Different Web browsers |
| formsPlayer | XForms | Yes | JavaScript / Ajax | Yes | Only commercial | Different Web browsers |
| Ubiquity-xforms | XForms | Yes | JavaScript / Ajax | Yes | No | Different Web browsers |
| EMC Xforms Engine | XForms | Yes | JavaScript / Ajax | Yes | No | Different Web browsers |
| Orbeon Forms | XForms | Yes | JavaScript / Ajax | Yes | No | Different Web browsers |
| XUL | XUL | Yes | JavaScript / Ajax | Yes | JavaScript expertise | Only Gecko-based browsers (Mozilla, Netscape 6) |
| OpenLazlo | XLZ, Javascript | Yes | Flash, DHTML | Yes with DHTML / no with Flash | Yes | Flash Player, Different Web browsers |
| Adobe Flex | MXML, Action Script | Yes | Flash | No | Yes | Only IE |
| Silverlight | XAML, .Net | Yes | Silverlight | Yes | Yes | Silverlight plugin |
| JavaFX | S3 | No | SWING | No | Yes | Java Virtual Machine |
Short descriptions of these technologies are given in the following.
JavaScript and Ajax
AJAX is an acronym for ‘Asynchronous JavaScript And XML’. It combines coding with HTML, JavaScript, and XML to allow interaction between the client and server to occur ‘asynchronously’. The ‘asynchronous’ part is important - it means that user interaction with the interface isn’t broken up by page refreshes every time the server has something to do. In essence, AJAX is a series of techniques and tricks to make traditional web pages more interactive.
JavaScript binds everything together and can be very complicated and powerful, but it’s an interpreted and weakly typed language, which can make development and maintenance difficult. Building, reusing, and maintaining large JavaScript code bases and AJAX components can be difficult and fragile.
There exist many JavaScript and Ajax based open source and commercial frameworks for creating RIA user interface web applications that provide ready to use and tested on different browsers components or let the user to construct user interface in some other, easier maintainable framework and then generate an Ajax based web form for a particular browser or platform. The main frameworks will be described in the following sections.
Dojo
Dojo is an open source DHTML toolkit written in JavaScript. The Dojo Toolkit provides a core set of libraries, and rich set of different package libraries, and each one provides specific functions. Dojo provides lower level APIs to write portable JavaScript and simplify complex scripts. It is easy and quick to prototype interactive widgets and animated transitions. It provides libraries for events system, I/O packages, and generic language enhancement. You can write scripts with Dojo, and can include as little or as much of the available APIs as you want to suit your needs.
Dojo also provides a set of widget libraries that you can use directly in any application. You can use some of the core widgets as UI controls, such as the menu widget, tabs set, tree widget, and more. Others are generic functions, such as layout widgets, date picker, SVG widget, and so on.
Dojo is built around a single markup language that extends HTML element properties and provides a simple way to declare and use response DHTML interface components.
Yahoo! User Interface Library (YUI)
The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX [10].
The library is currently divided into four sections; the library core files, a series of utilities, a set of controls, and CSS tools. The utilities provide programming logic and deal specifically with the behaviour and interactions between visitors and the different objects and elements on pages. The controls are a collection of pre-packaged objects that can be placed directly on the page as they are. CSS tools provide a framework for standardising the visual representation of elements on the page.
Component libraries should not necessary be included into the application but can be refrenced from Yahoo! server and the libraries exist in 3 versions: max - readable and documented, min - without whitespaces and documentation and the third version includes debugging information.
No CSS query or markup-driven widget construction system is available in YUI.
Google Web Toolkit
Google Web Toolkit (GWT), allows developers to build and maintain complex and highly performant JavaScript front-end applications in the Java programming language [11].
There many third party widget libraries that can be used in GWT. For example GWT-Ext [34]. is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree's with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and more. New components can be also created by composing the existing ones.
GWT removes JavaScript project maintainability issues. It shields all HTML, CSS, DHTML, JS and browser incompatibility issues from the developer.
With GWT you build not only your UI, but also your controller, your model, your entire app, and it all resides on the client. It has in addition to Javascript based GUI library a support for:
- server interoperation (HTTP, XML, JSON, GWT RPC)
- internationalization
- code obfuscation
- code optimization
- automatically cross browser (even the code you write)
- unit testing
- eclipse (or any Java IDE)
- modularization and java organization/OOP
- easy application versioning
- performance (image bundles, caching considerations)
- code generation
GWT applications are deployed on Java containers.
Zapatec AJAX Suite
Zapatec is a commercial framework that contains advanced cross-browser user interface components and utility libraries [12]. This suite has no markup-driven widget construction system.
Every component of the suite can be purchased independently. There is also a free licence when every page that used the component has a link to Zapatex.
The price range for the DataGrid component is for example from 90$ for single server license and to 1199$ for using the library code in own project.
Some components, including charting, use Adobe Flash for visualization.
XForms based implementations
XForms provides a platform-independent markup language for online interaction, is a standard specification from W3C and it is considered a successor to HTML forms.
XForms is independent of the presentation device. It can be delivered without any code changes to a traditional browser, PDA mobile phone, voice browser, and some other clients.
In XForms, the actual data (XML form definition) is separated from the presentation of the form. This device-independent XML form definition, called the XForms model, can work with a variety of standard or proprietary user interfaces. XForms model defines user interface component bindings, restrictions on the input data, events and actions of the form.
XForms does not provide user interface presentation components implementations. To actually present a form XForms should be integrated with XHTML, SVG, or any other language.
Currently, at the W3C, you can find 20 or more example implementations of XForms. Many vendors, including IBM, have already developed XForms. Mozilla has announced that XForms will be supported on all platforms on which Mozilla runs.
On the 4th June of 2009 the XForms working group requested the advancement of XForms 1.1 to W3C Proposed Recommendation.
The main shortcomings of xForms specification is the absence of custom components and no support for subforms or subcomponents. The inclusion of these features is only being considered. The feature 'reusable components' will allow the form author to create 'complex' components or sub-forms that may contain their own model and can be (re-)used in forms, possibly in different places in the form. An XForms implementer, or even a form author, can create libraries of components that can be used by form authors across all different XForms implementations. Examples of components are a map component, a Social Security Number component, an address component.
There is also planned an optional support of XPath 2.0 as an expression language.
Chiba
Chiba is a Toolkit that combines XForms, AJAX and the Dojo toolkit. It allows rapid web application building in a declarative way [1]. For page authors absolutely no knowledge of AJAX techniques is required. All the wiring is automatic. Chiba uses Direct Web Remoting (DWR) [35] to connect Javascript widgets and containers such as repeat, switch and group to the XForms engine.
By bundling the Dojo Toolkit it's possible to use the full set of Dojo controls to build application-like UIs with full AJAX and XForms support without needing to write a single line of script or Java code. Not only all Dojo controls might be used but additionally any JavaScript can be integrated and used under the package loading system of Dojo thereby getting the advantages of JavaScript compilation, compression and layering of scripts.
Both XForms and Dojo follow a declarative approach to page building. No manual scripting will be needed unless you like to write your own components.
Chiba supports the XForms Rest XQuery (XRX) paradigm. XQueries can directly be used as data and parameterized through your XForms. Chiba integrates with the popular Open Source XML database eXist.
XSLTForms
XSLTForms is an open source client-side XForms implementation, that works with all major browsers (Internet Explorer, FireFox, Opera, Safari, Chrome and more) [30]. Mark Logic, a leading provider of information access and delivery solutions, uses XSLTForms and is a contributor.
XSLTForms implements XForms 1.1 specification in 2 successive steps:
- 1. an XSLT 1.0 transformation performed by the browser;
- 2. an execution of the generated and optimized by the XSLT processor AJAX code.
formsPlayer
formsPlayer is a full-featured XForms processor that provides a complete implementation of the W3C's XForms specification, made available in today's browsers. formsPlayer is currently formsPlayer is currently available for Internet Explorer running on Windows. Versions for other browsers and operating systems are in development [19].
Commercial version of formsPlayer has an ability to render custom widgets based on the datatype of the data. The information from the document is displayed in ways that are specific to each piece of data.
ubiquity-xforms
The Ubiquity XForms processor (UXF) allows developers to use XForms markup to create interactive web applications [23]. The core philosophy of Ubiquity XForms is that developers should be able to hide their preferred Ajax library behind declarative mark-up. Ubiquity XForms adds new APIs to a number of popular Ajax libraries, making XForms processing available in standard browsers, without the need for a download. The technical goal of the project is to provide an XForms implementation for each of the popular web browsers without needing a plugin.
A key part of the design is that multiple objects - called mixins - can be added to an element in the document, independently of each other. Communication between mixins generally takes place via events, even if two mixins are attached to the same element. All of the Ubiquity libraries use DOM 2 Events as their preferred event standard.
Once UXF has control, its first task is to attach XForms functionality to the various XForms elements in the document, via the mixins. Once the functionality has been attached, the XForms processor takes over.
EMC XForms Engine
The EMC Documentum XForms Engine (codenamed Formula) is a pure client-side XForms implementation that runs entirely from within a web browser. It is capable of rendering flexible and dynamic forms without the need for a plugin or processing outside of the browser [37]. It has been built using Google Web Toolkit.
A complete event model is available, which enables definition of custom, dynamic behavior. Events can be triggered based on user actions, validation results or changes in data. When an event is caught, one or more user-defined actions can be executed, such as moving the focus in the user interface or modifying data.
Orbeon Forms
Orbeon Forms is an open source forms solution designed to handle complex forms typical of the enterprise or government [36]. It includes:
- A forms platform which implements W3C XForms.
- Form Builder, the web-based visual form designer.
- Form Runner, the runtime environment which delivers forms to your users.
At the core of Orbeon Forms lies an Ajax-based XForms engine. Orbeon Forms stores data in its embedded eXist XML database or can be persisted throw REST-based perstistence API. Orbeon uses XBL for binding components to event handlers.
On the client, Orbeon Forms requires a standard web browser (including Internet Explorer, Firefox, Safari and Opera) thanks to XForms and Ajax technology. There is no need for additional client-side software or plugins. On the server, Orbeon Forms runs on any operating system by deploying to a standard Java Servlet container such as Tomcat.
With Form Builder, any form can be designed in multiple languages, including labels, help and error messages. Form Builder has built-in Web Services editor. Form authers can provide their own XForms markup.
Orbeon has currently a dominant position in the XForms implementation field.
RIA platforms
XUL
XML user-interface language (XUL) is Mozilla's XML-based, cross-platform language that describes user interfaces of applications. It provides a rich library of ready-made components for use in a page. Currently, it works only on Gecko-based browsers such as Mozilla Firefox, or Netscape 6 or later.
XUL uses an XML-based markup language to describe the user interface controls. It provides all sorts of popular rich internet controls such as menus, tabs, trees, and pop-up menus. XUL uses a document object model (DOM) to store the tree of nodes. Once all XUL files are loaded, XUL parses and converts all tags in a hierarchical document structure of nodes. You can then use the DOM structure to examine and modify the data using its own method and additional methods provided by XUL functions. You can always access and manipulate DOM from JavaScript, making it easy to handle it like a typical HTML control. Each control and each node have several attributes that define their appearance and structure.
A browser handles XUL files similarly to HTML or other browser content when accessed from a remote location. However, when they are installed locally in a browser in its Chrome system as an extension, they receive special privileges to access local systems and bookmarks. In this case, it can perform additional privileged operations.
The Mozilla browser itself is also a set of packages containing XUL files, JavaScript, and stylesheets, although it is a much larger and much sophisticated extension.
XUL uses the eXtensible Bindings Language (XBL) for binding. Each control can be bound using Mozilla's XBL. XUL uses the RDF format, which can be used to store resources. You can use data in other formats and create RDF data from it, which will be bound to XUL elements.
Because XUL is represented with XML files, you can use any text editor or XML editor for the IDE. Since the same underlying code handles all the XUL files, HTML, and SVG, you can use CSS properties to style XUL files. It has built-in support for localization, as all text content is kept separately in a browser.
Skins, made up of CSS files in Mozilla, define the user interface of the browser. You can modify and create skins for different looks without changing the code.
OpenLazlo
OpenLaszlo is an open source platform for the development and delivery of rich Internet applications. LZX is an XML and JavaScript description language similar in spirit to XUL, MXML, and XAML. LZX enables a declarative, text-based development process that supports rapid prototyping and software development best practices. It is designed to be familiar to traditional web application developers who are familiar with HTML and Javascript [11].
OpenLaszlo is designed to support deployment of Ajax applications across multiple runtimes and devices. OpenLaszlo can deploy applications running Flash 8, Flash 9, or DHTML.
It provides language features such as animation, layout, drawing, data binding, and server communication (persistent connections, SOAP, XML-RPC and XMLHttpRequest).
OpenLaszlo gives developers the option to run applications using Flash or DHTML, an open standard built into most browsers.
The downside of this approach is that OpenLaszlo can only use those features that are supported in both technologies: Flash and DHTML and can not use the most advanced features of the technologies to be able to be deployed on both platforms.
Adobe Flex
Adobe Flex is a software development kit released by Adobe Systems for the development and deployment of cross-platform rich Internet applications based on the Adobe Flash platform. Flex applications can be written using Adobe Flex Builder or by using the freely available Flex compiler from Adobe [8].
MXML, an XML-based markup language, offers a way to build and lay out graphic user interfaces.
An ECMA scripting language (ActionScript 3) is embedded in MXML to handle user events, system events, or to construct complex data models. This is an object-oriented language, similar to JavaScript and ECME script. Like XForms, Flex also keeps data model, data presentation, data validators, and data services separate (similar to the MVC style).
All requests that come to MXML are processed through the Flex compiler, which compiles MXML and generates SWF, and caches until it is modified and finally delivered to the browser.
Any XML editor can be used for scripting of MXML, but Macromedia also provides a special IDE called Flex Builder for Flex application development.
It also provides components that allow connecting to the server, doing normal HTTP calls, connecting to remote Java™ objects, and interacting with Web services from the browser itself. It can be integrated with existing J2EE and .NET and PHP application models.
Flex has integrated support for ECMAScript for XML (E4X). It is a programming language extension that adds native XML support to ECMAScript (which includes Action Script, DMDScript, JavaScript, JScript). The goal is to provide an alternative to DOM interfaces that uses a simpler syntax for accessing XML documents. It also offers a new way of making XML visible. Before the release of E4X, XML was always accessed at an object level. E4X instead treats XML as a primitive (like characters, integers, and booleans). This implies faster access, better support, and acceptance as a building block (data structure) of a program [7].
Flex supports a compact binary object serialization protocol, called AMF3, which is extremely fast. There are numerous Open Source implementations using various back-end technologies for AMF3, as well as a commercial / supported Adobe product, called Flex Data Services. Working with unformatted binary data has significant advantages: the speed of communication across the wire is much faster, it needs less memory from the client computer, and it reduces processing time over HTTPService or WebService.
The look and feel of Flex forms and components can be defined in standart CSS file.
In combination with Adobe Air Flex web applications can be run as desktop applications.
Silverlight
Microsoft Silverlight is a web application framework with a scope similar to Adobe Flash. Silverlight integrates multimedia, graphics, animations and interactivity into a single runtime environment. In Silverlight applications, user interfaces are declared in XML-based XAML markup language and programmed using a subset of the .NET Framework. XAML can be used for marking up the vector graphics and animations. Textual content created with Silverlight is searchable and indexable by search engines as it is not compiled, but represented as text (XAML) [9].
JavaFX
JavaFX is a software platform for creating and delivering rich Internet applications that can run across wide variety of connected devices. The current release (JavaFX 1.2, June 2009) enables building applications for desktop, browser and mobile phones. It supports SWING user interface components.
JavaFX is not yet a widely used RIA technology.

