Difference between revisions of "Java Script Framework"

From MPDLMediaWiki
Jump to navigation Jump to search
 
(41 intermediate revisions by 7 users not shown)
Line 1: Line 1:
<accesscontrol>eSciDoc</accesscontrol>  
{{Template:TemplateUIE_Activities}}
<div style="float:left; width:70%; margin-bottom:3em;">


== Introduction ==
== Introduction ==
Line 6: Line 7:
and evaluate several frameworks according to these criteria.
and evaluate several frameworks according to these criteria.


It must be noted though, that the choice of JavaScript framework must be even more project specific than the choice of a web development framework. In addition, the choice of web framework may already determine the JavaScript framework. For this reason, we also give some general considerations:
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.
* 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 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 security an issue? When sensitive data and ajax are to be used together, the framework should support secure XmlHttpRequests.
* If accessibility an issue?
* 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?
* 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 ==
== Method ==
Line 23: Line 27:
==  Cat. A - Must ==
==  Cat. A - Must ==


* Opensource
* [http://www.opensource.org/ Opensource]
* Performance http://mootools.net/slickspeed/
* Big community/support/Documentation
* Big community/support/Documentation
* Browser compatibility
* Cross Browser compatibility ([http://developer.yahoo.com/yui/articles/gbs/ which browsers?])


== Cat. B - Should ==
== Cat. B - Should ==


* Sufficient number of patterns available
* Sufficient functionalities available
* Sophisticated patterns (for scientific use)
* Sophisticated functionalities (for scientific use)
* Fits to other JS Frameworks
* Fits to other JS Frameworks
* Unique coding style
* Unique coding style
* Supports CSS1-3
* Supports CSS1-3
* Chainability (?)
* Easy to learn/adopt
* Easy to learn/adopt
* Easy to reuse, to customize and maintain
* Easy to reuse, to customize and maintain
Line 44: Line 46:
* Knowledge base (in house)
* Knowledge base (in house)


== Further criteria ==
== List of Frameworks ==
These criteria will be relevant in a second step, after the preceding criteria have been taken into account.
 
* Cost to introduce
* Commercial License available
* Fast to deliver
 
== List of Framework ==
This list is not exhaustive, but it lists the most common frameworks.
This list is not exhaustive, but it lists the most common frameworks.
* [http://developer.yahoo.com/yui/ Yahoo! User Interface Library]
* [http://developer.yahoo.com/yui/ Yahoo! User Interface Library]
Line 62: Line 57:
* [http://www.mochikit.com/ MochiKit]
* [http://www.mochikit.com/ MochiKit]


See more framework listings/comparisons [http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/ here] and [http://ajaxpatterns.org/Javascript_Multipurpose_Frameworks here] or just [http://www.google.com/search?q=javascript+frameworks google].
See more framework listings/comparisons [http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/ here] and [http://ajaxpatterns.org/Javascript_Multipurpose_Frameworks here], [http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks in Wikipedia] or just [http://www.google.com/search?q=javascript+frameworks google].
 


== The Matrix ==
== The Matrix ==
Line 87: Line 83:
<tr>
<tr>
<td>Opensource</td>
<td>Opensource</td>
<td align="center">+</td>
<td align="center">+</td>
<td align="center">+</td>
<td align="center">+</td>
                <td align="center">+</td>
<td align="center">+</td>
                <td align="center">+</td>
</tr>
<tr>
<td>Modularization</td>
<td align="center">+</td>
<td align="center">++</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">?</td>
                 <td align="center">+</td>
<td align="center">?</td>
                 <td align="center">?</td>
<td align="center">?</td>
<td align="center">?</td>
                 <td align="center">?</td>
                 <td align="center">?</td>
</tr>
</tr>
<tr>
        <tr>
<td>Library footprint size</td>
<td align="center">-</td>
<td align="center">++</td>
<td align="center">+</td>
<td align="center">++</td>
                <td align="center">+(+)</td>
<td align="center">-</td>
                <td align="center">++</td>
</tr>
        <tr>
<td>Performance</td>
<td>Performance</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">+</td>
                <td align="center">+</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">?</td>
                 <td align="center">+</td>
                <td align="center">?</td>
<td align="center">?</td>
                 <td align="center">?</td>
</tr>
</tr>
<tr>
<tr>
<td>Big community/support/Documentation</td>
<td>Big community/support/Documentation</td>
<td align="center">?</td>
<td align="center">++</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
</tr>
</tr>
<tr>
<tr>
<td>Internationalization</td>
<td>Internationalization</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
</tr>
</tr>
<tr>
<tr>
<td>Browser compatibility</td>
<td>Browser compatibility</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
</tr>
</tr>
Line 141: Line 157:
<tr>
<tr>
<td>Number of patterns</td>
<td>Number of patterns</td>
<td align="center">?</td>
<td align="center">++</td>
<td align="center">?</td>
<td align="center">++</td>
<td align="center">?</td>
<td align="center">++</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
</tr>
</tr>
<tr>
<tr>
<td>Sophisticated patterns</td>
<td>Sophisticated patterns</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
<td align="center">?</td>
<td align="center">-</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
</tr>
</tr>
<tr>
<tr>
<td>Fits to other JS Frameworks</td>
<td>Fits to other JS Frameworks</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">?</td>
                 <td align="center">?</td>
                 <td align="center">?</td>
Line 172: Line 188:
<td>Unique coding style</td>
<td>Unique coding style</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">++</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">++</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
</tr>
</tr>
<tr>
<tr>
<td>Supports CSS1-3</td>
<td>Supports CSS1-3</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
</tr>
<tr>
<td>Chainability (?)</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">?</td>
                <td align="center">?</td>
<td align="center">?</td>
                <td align="center">?</td>
</tr>
</tr>
<tr>
<tr>
<td>Easy to learn/adopt</td>
<td>Easy to learn/adopt</td>
<td align="center">?</td>
<td align="center">-</td>
<td align="center">?</td>
<td align="center">++</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">++</td>
                 <td align="center">?</td>
                 <td align="center">++</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
</tr>
</tr>
<tr>
<tr>
<td>Easy to reuse, to customize and maintain</td>
<td>Easy to reuse, to customize and maintain</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">++</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">++</td>
                 <td align="center">?</td>
                 <td align="center">++</td>
<td align="center">?</td>
<td align="center">+</td>
                 <td align="center">?</td>
                 <td align="center">+</td>
</tr>
</tr>
<tr>
<tr>
<td>Subversion or CVS version repository</td>
<td>Subversion or CVS version repository</td>
<td align="center">?</td>
<td align="center">-</td>
<td align="center">?</td>
<td align="center">+</td>
<td align="center">?</td>
<td align="center">-</td>
<td align="center">?</td>
<td align="center">-</td>
                 <td align="center">?</td>
                 <td align="center">-</td>
<td align="center">?</td>
<td align="center">-</td>
                 <td align="center">?</td>
                 <td align="center">-</td>
</tr>
</tr>
<tr>
<tr>
Line 274: Line 280:
<tr>
<tr>
<td>Plugins</td>
<td>Plugins</td>
<td align="center">+</td>
<td align="center">++</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">+</td>
                <td align="center">+</td>
<td align="center">?</td>
<td align="center">?</td>
<td align="center">?</td>
                 <td align="center">+</td>
<td align="center">?</td>
                <td align="center">?</td>
<td align="center">?</td>
                 <td align="center">?</td>
</tr>
</tr>
<tr>
<tr>
Line 287: Line 293:
<tr>
<tr>
<td>Actual version</td>
<td>Actual version</td>
<td align="center">?</td>
<td align="center">2.5.2</td>
<td align="center">?</td>
<td align="center">1.2.6</td>
<td align="center">?</td>
<td align="center">2.1</td>
<td align="center">?</td>
<td align="center">1.6</td>
                 <td align="center">?</td>
                 <td align="center">1.8.1</td>
<td align="center">?</td>
<td align="center">1.1.1</td>
                 <td align="center">?</td>
                 <td align="center">1.2</td>
</tr>
</tr>
<tr>
<tr>
<td>Licence</td>
<td>License</td>
<td align="center">?</td>
<td align="center">BSD</td>
<td align="center">?</td>
<td align="center">MIT/GPL</td>
<td align="center">?</td>
<td align="center">Comm/GPL</td>
<td align="center">?</td>
<td align="center">MIT</td>
                 <td align="center">?</td>
                 <td align="center">MIT</td>
<td align="center">?</td>
<td align="center">BSD/AFL</td>
                 <td align="center">?</td>
                 <td align="center">MIT</td>
</tr>
</tr>
</table>
</table>
==Requirements collected from "eSciDoc Components/Behaviour"==
'''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 ==
== Links ==


* http://mootools.net/slickspeed/
* http://mootools.net/slickspeed/
* [http://wiki.freaks-unidos.net/javascript-libraries a useful comparison]
* [[File:jquery.roundabout.min.txt]]
</div>
[[Category: User Interface Engineering]]

Latest revision as of 09:45, 1 August 2013

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]

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]