Java Script Framework

APPLICATION AREAS
Home Interface Conception & Design User Interface Evaluation Interface Development
PROJECTS
Pattern Library Publication Management Digitization Lifecycle Research- and Metadata Handling Usability Report Corporate & Interface Design (under Rework) Page Index
edit

Introduction[edit]

In the following we list criteria to take into account when choosing a JavaScript Framework for a web application project and evaluate several frameworks according to these criteria.

It must be noted though, that the choice of a JavaScript framework must be even more project specific than the choice of a web development framework. In addition, the choice of a web framework may already determine the JavaScript framework (e.g. because one comes bundled). For these reasons, we also give some general considerations:

Will the application make use of other JavaScript libraries - e.g. googlemaps, etc.? If so, care must be taken to choose a framework that plays well with others.
Is a heavy-weight framework acceptable, or will light-weight options do?
Is security an issue? When sensitive data and ajax are to be used together, the framework should support secure XmlHttpRequests.
Is accessibility an issue?
How much and what kind of performance is needed? DOM traversals in large pages? Many event handlers attached to DOM nodes?
Do we want to host the JavaScript framework/library on our servers or include from a hosting service (or even a content delivery network)?

It is also quite common to switch JavaScript frameworks/libraries in the course of a project, because either special functionality (e.g. make tables sortable) is no longer sufficient or a framework which was used for faster prototyping becomes a performance bottleneck and is replaced with custom code. Since this approach is common, specialized JavaScript libraries providing just a single functionality should also be taken into consideration.

Method[edit]

The criteria are sorted by order of relevance in 3 categories:

A -> Must
B -> Should
C -> Nice to

Cat. A - Must[edit]

Opensource
Big community/support/Documentation
Cross Browser compatibility (which browsers?)

Cat. B - Should[edit]

Sufficient functionalities available
Sophisticated functionalities (for scientific use)
Fits to other JS Frameworks
Unique coding style
Supports CSS1-3
Easy to learn/adopt
Easy to reuse, to customize and maintain
Subversion or CVS version repository

Cat. C - Nice to[edit]

Plugins
Knowledge base (in house)

List of Frameworks[edit]

This list is not exhaustive, but it lists the most common frameworks.

See more framework listings/comparisons here and here, in Wikipedia or just google.

The Matrix[edit]

Criteria	Framework
	Yahoo! UIL \|	JQuery \|	ExJS \|	Prototype \|	Scriptaculous \|	Dojo \|	MooTools \|
Cat. A
Opensource	+	+	+	+	+	+	+
Modularization	+	++	?	?	+	?	?
Library footprint size	-	++	+	++	+(+)	-	++
Performance	?	+	?	+	+	?	+
Big community/support/Documentation	++	+	+	+	+	+	+
Internationalization	+	+	+	+	+	+	+
Browser compatibility	+	+	+	+	+	+	+
Cat. B
Number of patterns	++	++	++	+	+	+	+
Sophisticated patterns	+	+	+	+	+	-	+
Fits to other JS Frameworks	?	+	+	?	?	?	?
Unique coding style	?	++	+	++	+	+	+
Supports CSS1-3	+	+	+	+	+	+	+
Easy to learn/adopt	-	++	+	++	++	+	+
Easy to reuse, to customize and maintain	+	++	+	++	++	+	+
Subversion or CVS version repository	-	+	-	-	-	-	-
	?	?	?	?	?	?	?
	?	?	?	?	?	?	?
	?	?	?	?	?	?	?
	?	?	?	?	?	?	?
Cat. C
Plugins	+	++	?	+	+	?	+
Generfal Information
Actual version	2.5.2	1.2.6	2.1	1.6	1.8.1	1.1.1	1.2
License	BSD	MIT/GPL	Comm/GPL	MIT	MIT	BSD/AFL	MIT

Requirements collected from "eSciDoc Components/Behaviour"[edit]

Lists

Instant grid filter
Layer for input field/filter
Draggable corners (if cells contain more than they can display)
Client side sorting
Resizable columns

Input

Layers (open + close areas)
Auto Suggests

Menus

Highlighting

There is a need to indicate exactly where the mouse is pointing. The user must be kept from pointing to the wrong menu entry when clicking. Especially when the response will not be immediate, click targets are small or little contrast is given. The highlight can also indicate/enlarge a click target. A change in background colour or any another property is invoked (e.g. via CSS Pseudo-Classes). Usually the background of the element changes from dark to bright or vice versa. The highlight should not make the contrast worse or appear animated. It is also common to make the highlighted text underlined to indicate clickable targets.

Transition of Submenus

There are a lot of menu options and it has to be made clear where the submenu derives from. When a submenu is opened, it stretches from the main menu option to its final size, position or opacity. The movement must indicate from which direction the submenu arrives without imposing a noticeable delay to the user. The time should be less than 300ms.

> TBD some values should be provided concerning response time

Links[edit]