MarkUs Blog

MarkUs Developers Blog About Their Project

Javascript Frameworks

with 4 comments

The new annotation feature will rely heavily on Javascript. In order to ease the development and to be cross-browser, I considered using a specialized JS framework.

Frameworks comparison

I particularly studied 3 frameworks :

  • Prototype, as it is already bundled in RoR
  • jQuery, which is a toolkit, rather than a framework
  • Mootools, a lightweight but powerful framework

JQuery

JQuery - Logo


JQuery is a popular toolkit, mainly oriented towards fast and concise DOM manipulation. JQuery is easy to learn, and quick to be efficient with. It also has a big and active community, and many plugins.

JQuery is designed to be self-contained and does not “pollute” the global namespace. (JQuery is a Monad)

JQuery aims at “changing the way you write Javascript”, so sometimes its syntax does not feel consistent with vanilla Javascript, and can be tricky. JQuery’s API is designed to be faster at performing simple tasks, but sometimes severely lacks consistency.

Mootools

Mootools - Logo


Mootools is a fast and lightweight framework. It aims at enhancing Javascript as a language, and is best suited for people who already have a good knowledge of Javascript. Mootools takes advantage of the extension capabilities of Javascript to enhance the langage itself, rather than providing shortcuts to ease common tasks.

In particular, Mootools adds Inheritance to javascript, and allows every type to be extended in a clean and concise way.

Mootools can be a bit more difficult to learn, but its consistence is really a plus.

On the down side, MooTools modifies the native types. While providing readability, it can cause problems with third-party chunks of code.

Prototype

Prototype - Logo


Prototype and Mootools share the same approach of extending native types, that’s why it’s impossible to combine the two frameworks.

Prototype is a bit slower than Mootools, but provides more functionality through the use of scriptaculous.

In this case, the most relevant advantage is the fact that it’s already bundled in RoR.

Chosing a framework

The annotation feature needs good event handling, as new devices are leaving the mouse paradigm behind. The framework also needs to interact smoothly with the canvas element.

RoR already uses Prototype for all its JS stuff (mostly AJAX), and the cost of using several frameworks side-by-side is not acceptable. In addition to that, Mootools and Prototype can’t be used at the same time. So, chosing a framework for the annotation feature implies chosing it for all the application.

Due to its popularity, there is some documentation on jQuery integration with RoR, through a UJS (unobtrusive Javascript) driver. There is some work on Mootools too, but this project is less advanced.

So far, the best option is to use Prototype, as it does not require heavy changes, and its syntax is clear and consistent. I personally prefer Mootools, which shares the same design philosophy, but is smaller and faster.

Written by Benjamin Vialle

November 18th, 2010 at 2:11 pm

4 Responses to 'Javascript Frameworks'

Subscribe to comments with RSS or TrackBack to 'Javascript Frameworks'.

  1. Cool stuff, Benjamin. It’s always good to know our options 😉

    Keep in mind though, that we have made significant investment in sticking with prototype and its various plugins so far (e.g. Grader View). I think Mike would know best what it would mean to switch to something else.

    Having said that, to me it feels like a bad idea moving to something other than Prototype’ish things. Sorry, but this blog post doesn’t provide a good argument for switching to something else. Maybe there is something I’m missing.

    Severin

    18 Nov 10 at 7:33 pm

  2. It was just an overview of the existing (and most famous) frameworks.

    Prototype is the best option, there is no need for change, that’s what the blog post explains.

    Clément

    18 Nov 10 at 7:47 pm

  3. Ok, I see. It wasn’t apparent to me that you have no intention to change the JS framework. It would be good to make this more clear, just not to confuse folks. But I guess our comments should be enough (as long as people read them ;-)).

    Severin

    18 Nov 10 at 8:14 pm

  4. I’ve only ever used YUI or pure JS, so I don’t have an actual preference. But I agree that Prototype is probably the best option, since it’s built into RoR and we won’t have to pull our hair out trying to switch over to a different library.

    horatiu

    19 Nov 10 at 1:50 am

Leave a Reply