ERP/2.60/Projects/UI Technology/Analysis extjs dojo sc
Introduction
This page documents the analysis of the extjs and dojo ui libraries. This analysis is done as part of the process for selecting a new UI technology for Openbravo. The sections in this document reflect the topics covered during the analysis.
General analysis topics
The analysis is done by combining prototypes with information gathered from the documenation, internet and sample code.
Evaluation questions:
- how mature is the functionality in the library? Scale: not-mature, modestly-mature, mature, very complete
- how easy was/is it to get the function implemented? A scale from: very easy, easy, difficult and very difficult.
- what is the extend of customization/extension needed to get the library to the level required for building Openbravo applications. A scale: none, little, much, completely new component required
Topics
Multi-document interface
This topic covers building a ui with multiple independent tabs as well as hierarchical structures of tabs (tabs-within-a-tab).
Grid
The grid is the most important view for an application like Openbravo. This topic should cover all aspects of the future grid:
- sorting (multi-column)
- paging/scrolling
- search/filter per column
- selection of row with multi-select
- button for actions per row
Editable Grid
The editable grid is a grid with inline editing.
Some cases to check/test:
- inline editing with different types of widgets
- how to support adding new records to a grid, does the grid automatically create an empty row to edit?
- how to do field validation and error messages
Edit Form
This topic covers how an edit form is implemented using the technologies, topics to detect:
- interaction between form fields (change in one field disable/enable other fields, etc.)
- form layouting (both label-field as well as field grouping)
- client side validation
- formatting support
- focus support (field and actions/buttons)
Master-Detail
Master-detail is a combination of a grid/list with a form which is filled when clicking a specific record in the grid.
Reference Field
The reference field is one of the most important edit dialogs as it occurs often and special attention should be paid to efficient handling. A future implementation should probably be based on a suggestion box combined with a popup for more detailed search logic.
For this topic it needs to be studied how difficult is it to implement an advanced reference field. Specific attention needs to be paid to efficient back end integration.
Keyboard access
Keyboard handling is important for an efficient ui. As part of this topic it should be studied how keyboard access is defined and modeled.
Event system
The ui should be able to handle events which occur in the ui. The events should be translatable in both client/ui-side as well as server side actions.
Widget support
For this topic give an overview of the available widgets both layout, edit dialog, grid, etc.
Specifically check the implementation and capabilities of the button tool bar and menu tool bar widgets. How can they be integrated in forms/grids.
How to accomplish enabling/disabling of actions based on client-side (row click) or server-side events.
Performance client side
Performance is a concern as it is possible that complex dialogs with many grids/forms will not perform on a java-script browser environment. The analysis should be study current documentation, the internet but possibly also try a prototype with many widgets on one form.
Grid performance is not part of this analisys.
Skinnability
Study the customization of the look and feel
Documentation
Documentation has several aspects:
- information on manuals on the internet
- tutorials
- information available in forums
- books
Is information available for different experience levels.
Server-side integration
Describe how the framework proposes integrating with the backend server (the data and service provider). Is there a datastore concept, is json used as the data exchange format. Does the framework have explicit support for lazy loading of reference or other performance enhancing capabalities (data-caching).
Internationalization
As part of the topic the following should be supported:
- i18n of messages/labels: although this can probably be solved outside of the framework, consider if the framework has specific support for this
- ltr/rtl: does the framework support this out-of-the-box, what is needed to get this done
Testability
Does the UI framework have any specific tools/documentation on how to test application user interfaces developed using the library.
Testing environments
Dojo
There is an static prototype using dojotoolkit 1.3.2 at
https://code.openbravo.com/erp/devel/ui-dojo-prototype/
which tries to emulate Rob Goris prototype using plain dojo widgets (Dijit + DojoX)
In order to run it properly it you need to clone the repository and run it inside an application server (as Tomcat) and open index.html (http://yourserver:port/ui-dojo-prototype/)
Usage: Application Menu > Add new menu bar item Application Menu > Add new tab
Other menu items are useless
Extjs
The extjs examples are available as a module here:
https://code.openbravo.com/erp/mods/org.openbravo.userinterface.extjs/
After installing the module. You can visit the following web addresses:
- Examples: http://localhost:8080/openbravo/web/ext-3.0.0/examples/
- API docs: http://localhost:8080/openbravo/web/ext-3.0.0/docs/index.html
The sample for testing client-side performance with rendering many components can be found on this url:
http://localhost:8080/openbravo/web/ext-3.0.0/examples/ob/tabs-perf.html
Comparison
| Topic | Dojo (+ Dijit + DojoX) | Extjs | SmartClient |
| General notes | All widgets could be defined:
All widgets can be changed programmatically with events |
|
|
|---|---|---|---|
| Multi-document
interface | Dojo supports a multi-document interface through ContentPane with TabContainer.
Pros:
Cons:
Related urls and examples: |
Extjs supports a multi-document interface through the TabPanel. The TabPanel has been tested (see the performance example) and afaics there are no issues/obstacles in implementing a multi-document interface using extjs. Some examples: |
Smartclient supports a MDI interface through the Tabset. Afaics there are no obstacles in implementing a mdi interface with Smartclient. |
| Grid |
Dojo datastore is backed by dojo datastore. Dojo has an implementation of a live grid (scrolling grid) that works with the data store. Supported features
Afaics it is not possible to store the state of a grid (which columns are hidden etc.). It was/is difficult to find information on column based filtering or overall grid filtering. http://docs.dojocampus.org/dojox/grid http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_data_grid_large.html http://lib1.freeliberator.com/examples/thirdparty/dojo_grid/index.html | Extjs has several grid implementations: standard, http://extjs.com/deploy/dev/examples/grid/property-grid.html property grid] and an editable grid implementation. A grid has the following main parts:
Features supported out of the box:
Features supported through community efforts: Not supported:
Extjs has the concept of grid plugins which allows to extend the grid with custom code (such as expander, selection checkbox etc.). The extjs learning center contains a page with a lot of info and links to other info related to grids: see here. |
Smartclient has the following types of grid views:
Smartclient grids are bound to data sources. Supported features:
Some extra features available in Smartclient:
Extra feature in the short term future:
|
| Editable Grid |
Dojo supports cell editing, cell editing is simple to enable (just set the editable option in the column definition). Row editing does not seem to be supported. As this cell editing is fairly automatic it is unclear how easy it is to add our own widgets as cell editor (for example a picker field). There were no examples which showed how to add a new empty row to a grid which can then be edited as a whole, without row editing, adding new rows seems difficult. There is not much information on how an edit action interacts with the client-side datastore. Apparently the grid is directly connected to the datastore, so to save/persist a change of data to the server one needs to save the store, impacting other views on that same data store. |
Is supported out of the box, two modes are supported:
|
Is supported out of the box: Smartclient demoes also show some other behavior like auto-fit new rows or massupdate. The smartclient documentation contains a page specifically on editing in a grid, see here. Interesting topics covered there:
Cell editors can be defined globally (based on the type of the field) or on the grid itself. |
| Edit Form |
Dojo provides a lot of form elements (checkbox, radiobuttons, validation input text, date picker, ...). Pros:
Cons:
Related urls and examples: |
FAQ on forms in extjs, see here. |
|
| Master-Detail | Supported in dojo using a grid and a form which is loaded when a row selection event occurs in the grid.
Overall it seems very possible to build complexer form structures (grid in a form with tabs, etc.) using dojo. |
Same as dojo, see here for an example. |
Same as dojo, see here for an example. |
| Reference Field |
Dijit provides a quality combo box widget with multiple features. Pros:
Cons:
Related urls and examples:
| The Extjs combobox provides features like autocomplete, remote-loading and paging. List items can be displayed using a template.
A combobox is filled using a data store. Examples See this faq for more information on specifics of using a combobox with remote data stores. The Extjs combobox provides enough features for implementing a suggestion reference field. A separate selector popup is not provided by extjs and would be a custom development (the extjs TriggerField can be used as a base for this). |
Smartclient offers a select/combobox field which can be loaded from a data source with scrolling support. The select list can show multiple columns. For the rest the visualization of the select list seems limited. The filtering (while typing) is done through filtering on the datasource (on the client or server). In addition a select field can have a picker icon which can be used to implement a popup button. The nice thing of this picker icon feature is that it automatically follows the field in form layouting. Based on the forums and their quick start Smartclient identifies a picker component is a component which is often customized/created by Smartclient users. See here for an example. |
| Keyboard handling |
Dojo provides a way to define key actions based on events Pros:
Cons:
Related urls and examples:
|
Extjs provides a standard way to define key actions. Custom navigation key access (left, right, up, etc.) supported through the Ext.KeyNav object. The Ext.KeyNav object can be created to bind key strokes to specific function calls, components (like a grid) have a nav member which has the Ext.KeyNav object. The Ext.KeyMap allows you to bind a javascript function to any key. A KeyMap can be assigned to any element in the dom tree (the complete dom document, an invididual tab, etc.). Some links: |
Smartclient has key handling defined on the ui component, in a menu or globally. The ui component can get focus through the access key, a menu item can be clicked through a short cut and there is a global binding of a key to a function to call.
|
| Event System |
Dojo provides a complete event system. More information can be found here: |
All Extjs components inherit from the base type Observable, this is a type which supports publishing/firing of events and registration of listeners. Components fire many different events from UI-related (before rendering, after rendering), component specific (for example, valid, after validation), row click, header click. Most components have around 20 events which are fired and which can be caught and acted upon. The event system seems very complete and mature and is the basis for all kinds of dynamic behavior in the ui (disable button on row click for example). |
Smartclient's event system consists of generic event handlers at page level. Application code can register these generic event handlers. An event is first published to the page level event handlers (which can cancel them) and then to the widget involved in the event. Each widget has specific methods which are called when an event occurs. The event methods can be easily identified in the api documentation. Overall the Smartclient event system seems less generic than extjs's and is also mostly targeted at lower-level events (mouse clicks, etc.) |
| Widget Support |
Dojotoolkit is divided in three items:
An example is worth thousand words, so check this link to have a complete idea of all existing widgets |
Overview of Extjs Widgets:
|
|
| Buttonbar
Toolbar Menu | Dojo provides a simple Toolbar widget
Pros:
Cons:
Related urls and examples: | Supported out-of-the-box:
|
The toolbar is implemented with the Smartclient Menubar. It supports standard buttons, menus, etc. Also form fields are supported but they need to be wrapped in a DynamicForm. Smartclient supports hierarchical menus and actions on menu items. It looks similar to extjs but slightly less advanced/generic. Some examples: |
| Performance Client-Side | Client performance testing has been done by creating a page which made it possible to add new tabs to the page. The tab-ohttp://extjs.com/deploy/dev/examples/form/dynamic.htmlpen function created tabs with a form, an editable grid, a grid with 40 columns or a paging grid.
The test itself consisted of opening 40-50 different tabs and checking loading times and responsive. Different combinations of tab-types have been tried. The overall result was that even with >40 tabs open that responsiveness stays normal (the same as with 1 tab), opening new tabs was quick and did not take more time when many tabs where already open. Also the interaction with the grid/form/fields on one tab when 50 tabs were open did not show a delay. Switching tabs worked fine to. The example can be tried as follows:
The conclusion is that extjs on the client seems to work fine with many open grids/forms. Topic found on the extjs forum: A forum post on extjs complaints about performance. But when looking at the speed of loading the example it shows fine: example with around 10 tabs with 10-50 fields each |
The statement made by Smartclient is that performance (for the user) is not soo much (or not only) related to rendering performance but also related to the number of requests from the client to the server. See the adaptive filter demo for an example of what they mean. See here for a discussion about downloadsize of extjs versus Smartclient: | |
| Skinnability |
Dojo provides a skin infrastructure based on standard css Pros:
Cons:
Related urls and examples: |
Extjs has about 40 css files. Each main component (form, tab, panel, progress..) has two css files: one for the structure and for the colouring, font and images. This separation clearly facilitates changing the style without changing the layout/structure css styles. Changing the colour/styling is much more easy then the structure/positioning css styles. This because positioning css styles probably influence the layout manager and other layouting logic incorporated within extjs. By separating structure and visualization in different css files it is possible to change the colour/styling without accidentally changing the positioning. This separation of visualization and structure in different css files has been introduced in the 3.0 release. There are forum posts from before 3.0 which identify skinnability as an issue (lot of work). That's why most users just use the theme provided by extjs it seems. However, it is possible that customizing the style is now easier than before. |
Smartclient has paid attention on skinnability and talks about it specifically in their manual (see here). The default Smartclient skins do certainly not feel as sharp as the ones from extjs. On the other hand Smartclient is delivered with about 7 different skins. This shows (better than extjs) that skinnability is possible. |
| Documentation |
|
|
|
| Server-Side (data) Integration |
Dojo has the concept of a datastore, the data store is the data provider for dojo/djit components such as the grid. There are different data stores implementations. The most interesting one is the jsonrestdatastore. This datastore reads/writes data from a remote service by sending/receiving json data. The data in a dojo data store is a real object (so not a flat list of values), meaning that data objects can refer to eachother. It is even possible for a data object to refer to data retrieved from another data store. Some really nice features:
The datastores also have explicit concepts for paging and sorting. See also these links about the json rest datastore:
One missing feature in dojo data stores (mainly visible in a grid) is that it is not possible to automatically resolve dot path type of paths, for example: order.customer.name will not work in a grid with a json data store. See this issue. Overall the jsonrestdatastore concept seems mature and there are several tutorials and blogs covering this data store. The json rest data store is however not described/mentioned in the json book or the api doc. | The extjs data api section provides an overview of the main concepts involved in client-server integration.
The main data provider of a component in extjs (grid, field, combo, etc.) is a so-called Store. There are different Store implementations (xml, json for example). A Store combines a DataProxy, a DataReader and a DataWriter. A DataProxy defines the data source of the data (the url for example), it defines both read and write sources. A DataReader is used to convert the content from the DataProxy into extjs Record objects. A DataWriter is used to write data from the store to the DataProxy. There are different implementations for the proxy, reader and writer. Next to the data integration there is Ext.Direct which provides an extjs specific way of calling server side methods from an extjs client. Related links: |
The client-server integration is viewed by Smartclient as one of their main strong points. Smartclient supports a model-driven approach where ui behavior is as-much-as-possible derived from the information in the client side domain model (for example editors, validation, etc.). The central concept is the DataSource. A DataSource is data-provider-independent description of a set of objects that will be loaded, edited and saved within the user interface of an application. Implementations of datasources: json data source, xml data source, rest data source. DataSources are then bound to databinding-capable UI components (form, grid, etc). Each DataSource consists of a list of fields that make up a DataSource record, along with field types, validation rules, relationships to other DataSources, and other metadata. Some highlights (and differences with extjs):
http://www.smartclient.com/docs/7.0rc2/a/b/c/go.html#class..ResultSet http://www.smartclient.com/docs/7.0rc2/a/b/c/go.html#group..clientServerIntegration |
| Internationalization |
Dojo provides the most information (compared to the two others) on internationalization. See here. The dojo documentation discusses resource bundles, local, bi-directionality, encoding. Formatting is not explicitly discussed as this can be handled by formatters in widgets. |
|
|
| Testability |
Openbravo has experience in testing dojo widgets using selenium. In practice the same issues as with the other frameworks will be/are encountered. | Not much information on testing of extjs is available. A blog post from extjs about using selenium and extjs here but with critical recent remarks that there are many details which prevent thorough testing through selenium.
Here is an article describing how to work-around some extjs-selenium incompatibilities. Has a link to this article describing how someone accomplished testing of extjs using selenium. There is an older community effort around extjs and jsunit but this seems to have been quiet since 2007. So even though there is some information on testability of extjs it seems clear that this topic requires extra attention. |
Smartclient is open about the difficulties with using selenium and other auto-testing tools for testing their apps, see here. The way they describe it, implies that extjs and smartclient have the same issues with using the tools (namely that ria frameworks and auto-testing tools in general have a mismatch). |
| Extendability |
Dojo provides two ways to extend dojo widgets: extend and mixin. The dojo api documentation is not complete and does often not provide enough information, this makes it more difficult to extend/understand widgets and their behavior. | Extjs has a clean component hierarchy which afaics is easy to extend. Extjs provides a specific of extending the current components without changing the original code:
See also this post on Application Design and Structure. |
See here for a section in the Smartclient docs about extending Smartclient. Examples show extending current components but also adding new types to the type system. |
| Other Topics |
|
Non-LGPL features which maybe necessary: Interesting Non-LGPL features:
Extjs-smartclient comparison:
| |
| Questions |
|
Summary
- Dojo is one of the most known in the community (a lot of commercial books about it)
- Dojo has the best license for us
- Dojo is the fastest
- Dojo has the worst widgets (I think we would have to do our own widgets)
- Extjs has a much nicer default theme than Smartclient.
- Extjs demoes are snappier and faster than Smartclient, Extjs is smaller, seems to load faster than Smartclient.
- Extjs component architecture/class hierarchy structure seems more generic than Smartclient's. This is also seems to be visible with the flexibility of menu/toolbars, templating and expandable comboboxes (meaning that components can easily be embedded in eachother).
- Extjs seems very event based, the event system is implemented in the root of the system. The event system seems much better/more detailed/extensive than Smartclient's.
- Extjs seems to have a better traction when looking at number of forum posts, books
- Extjs api documentation is better visualized, easier to read.
- Smartclient seems to be more mature, there is more attention for detailed functionality in the documentation.
- Smartclient components are more feature-rich and and more complete.
- Smartclient documentation is better, next to api there is more descriptive texts and a good quick start guide. One mayor draw back for Smartclient is that there are no books available.
- Smartclient has a friendlier license.
- Smartclient has much better data model integration with using model information for visualization, on the client with support for references between objects on the client and update of ui after successfull server-side updates.
- Smartclient seems to have more attention for visualizing large datasets, just looking at their documentation, responses in the forum etc.
- Smartclient forum responses are more detailed and give more information than extjs.
- Smartclient has interesting additional features (non-lgpl) not delivered by extjs (analytics, performance module)
- Smartclient has at least some officially published support for lrt/rtl, text formatting seems less advanced though.
- Smartclient implement its own scroll (when needed) in all widgets, so there is no browser/SO dependency in this aspect