wiki:development/javascriptplatform/Research
Last modified 4 years ago

Home | Concepts | Research | Migration Path

Evaluation Criteria for Base Platform

We will evaluate jQuery and Prototype against the following criteria:

Feature Weighting jQuery Protoype/Scriptaculous?
Download size 8 94kb compressed (15 compressed) ( see) 277kb uncompressed (100kb minified)
Migration path for the CMS 6 Lots of work, but there's scope for introducing jQuery incrementally Better than jQuery
Unit testing 4 Scriptaculous ( link)
Client-side performance 6 Faster Selector slower than jQuery
I18N / L10N 6 Not built in
Behaviour / Content / Style separation 8 Good Doesn't prohibit unobtrusive coding style
Ease of customization (skinning, content, behaviour) 6 good layer on top of protype language construct
Developer enjoyment 6 ?
Support for architecture of larger apps 10 lowpro for jquery might be solution Uses full class-architecture with inheritance, solid event-model with custom events, proven with larger applications (e.g. Metroseeq)
Features
Drag & drop 8 similar to scriptaculous  link
Visual effects 8 yes, new effects due in 1.5 ( see) yes
Ajax 8 yes yes
Form validation 8 no, but  available as plugins no, but extensive 3rd party support ( link,  link)
Event handling 6 yes, with custom events and onDOMLoad
UI widgets available 8 yes, v1.5 of UI is due for release next week  link yes, but very scattered and sparse ( link)
Accessibility 6 not built in, but support for keyboard events/shortcuts
Mobile device support 6 comment: isn't this natural to unobtrusive scripting?
Non-technical
Maturity 8
How in-sync with our needs is their roadmap? 8 Good; seems focused on things to build cool UIs Seems more focused around esoteric language extensions, leaves UI up to you
Release frequency 6 8 releases since 1 Jun 07 2 prototype and 1 scriptaculous releases since 1 Jun 07
Developer community size/activity 8 Good community of UI widget developers Well supported but there's no central place for extensions
Documentation 8 Superbly organized and extensive, single definitive source, uses MediaWiki? ( link) Focused, dispersed across multiple sites. Good API docs ( link &  link)
Internal learning curve 8 Easy to learn if familiar with Prototype and closures People know Prototype already
Community adoption 6 Growing in popularity over the past 9 months People know Prototype already
Scoring 52 30

Option Summary

  • Ajax Communication Layer
    • Prototype
    • ExtJS-base
    • jQuery
  • Application Architecture
  • Widget Library
    • ExtJS
    • Dojo

External overview/comparisons

The Base Layer

The base layer is going to be responsible for handling:

  • Ajax
  • Basic visual effects
  • JavaScript? architecture - a class system and assignment of behaviour.

Contenders: This is a battle between Protoype/Scriptaculous? and jQuery.

Rejected:

  • ExtJS-base and Dojo lack the tools for unobtrusive javascript that are going to be mandatory when building more traditional web apps / websites. It might be useful for specific apps that we build, building them "fully in ExtJS".
  • Mootools is too lightweight to use across the board. It might be useful for very simple websites.
Prototype jQuery
Download footprint Large, with Scriptaculous (100kb minified with effects) Small (52kb minified)
Community support #1 in RoR community, but momentum appears to be slowing (5000 members on main mailinglist) 2-3 times that of Prototype and growing (6000 members on main mailinglist)

External Comparisons

Advantages/Disadvantages? Prototype

  • (+) Flexible class system, very close to the OOP developers are used to
  • (+) Awesome block iterators (Enumerable class, Hash class)
  • (+) Custom events
  • (+) Improved extension of DOM-elements in 1.6 ($('myID').update('bla'))
  • (-) Large Footprint

Advantages/Disadvantages? jQuery

  • (+) Namespaced, easy to use with other libraries
  • (+) Large widget library
  • (+) Cutting edge DOM selectors
  • (+) Method chaining
  • (o) DOM-focused behaviour binding (Ingo: Too restricting, Mark: Advantage)

Form Validation

Candidates

Prototype/Scriptaculous?

Advantages:

  • Powerful base framework
  • Lots of momentum / community uptake
  • We use it already (albeit an older version); migration path will be the lowest.
  • Good support for unobtrusive javascript.
  • Most lighter "website-widgets" (e.g. carousel, form validation) build on this combination

Disadvantages:

  • Small volunteer based team, and there is not commercial support for it
  • No consistent library of consistent user interface widget, though there is talk of people developing these -  http://www.prototype-ui.com/.
  • Doesn’t seem to have any support for thinks like Adobe Air or Google Gears.
  • Will 2.0 break backwards compatibility?

Conclusions:

  • Prototype/LowPro? would make a good "base layer" API for architecting JavaScript? code.
  • Scriptaculous adds core effects.
  • ExtJS will build on top of this with widgets.

Links:

ExtJS

Advantages:

Disadvantages:

  • The widget library will push us into building widget-based applications. The CMS is a good example of a widget-based application. However, ExtJS would be completely inappropriate for something like Metroseeq.
  • Doing unobtrusive javascript would be very hard, and involve a lot of custom development. (major disadvantage for website usage, not as important for cms. however, we want to decrease the split between cms & main site, not increase it!)
  • There's no clear migration path from the current CMS to ExtJS.
  • Download footprint: ca. 650kb minified with prototype and scripaculous
  • Very basic regex-based form validation

Conclusions:

  • Things like ComplexTableField could benefit from being built on top of ExtJS widgets.
  • It's unlikely to be the best "base layer".
  • It's unlikely to be a pivotal piece of our JavaScript? upgrade - some widgets may be of use in some projects, or incrementally rolled out to the CMS. However, the idea of "standardising on ExtJS" isn't going to work. The library doesn't have what we need out of the box because it's as unobtrusive as a Flash app or .NET website. :-P

Links:

Dojo

At first glance, this seems similar in structure to ExtJS but less well-polished.

Advantages:

  • Has full time developers.

Disadvantages:

YUI

Complex Example with Layout Manager, Dialogs, Tab Views, Calendar:  http://developer.yahoo.com/yui/examples/layout/adv_layout.html (

Advantages:

Disadvantages:

JQuery

Advantages:

  • Good easy to understand framework
  • Basic UI widgets.

Disadvantages:

  • It seems that it' difficult to extend this to support complex applications (by contrast Prototype is well respected in this regard).

Ingo: My personal preference for structuring clientside app goes towards Prototype classes with DOM-containers as attributes, rather than the DOM-node focused behaviour-attachement by jQuery - maybe thats just a leftover from too much actionscripting ;)

Links

Mootools

Advantages:

Disadvantages:

  • Perhaps too lightweight to act as the "platform" that we're looking for.