Prototype, Dojo, Script.aculo.us (JavaScript Framework)

These three famous Javascript frameworks are certainly in the top list of every web developer. They are a proven help in developing dynamic and creative web portals. Without their birth, how in the earth “google” could produce a fanstatic portal such as “igoogle” ( hhmmmm have you thought of it? ).

Now, if you are just starting to explore the usage and advantages of either of these frameworks, let me give you a little hint of the best tool to use in your application (*wink).

Advantages …

1. AJAX Function

All of these frameworks enable you to deal with AJAX with ease and they are also cross-browser compliant. Besides simple requests, they also provide various ways to handle the response from the server, either through XML, JSON or plain text. My advise here, if you only need a way to use AJAX functions and customized UIs is not a concern, use the primitive framework – prototype. Prototype is the best tool to use as it is just a one file function compared to the other two customized, bulky in size frameworks, and if you are the type of developer who codes their way to customize, prototype is the most flexible.

Sample Code

new Ajax.Request('your_url’,
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || \"no response text\";
      alert(\"Success! \n\n\" + response);
    },
    onFailure: function(){ alert('Something went wrong...') }
  });

Expandable Code

new Ajax.Request('your_url’,
  {
    method:'get',
    onSuccess: transport,
    onFailure: doError
  });

Functions “transport” and “doError” must be declared somewhere in your code. This way, codes are more flexible and expandable. Do something like this

function transport (x) {
          loadXML( x.responseText );
         …
}

2. Widgets

Script.aculo.us and Dojo are add-on libraries to the Prototype framework primarily for visual effects and interface behaviors. Several widgets, DOM utilities, and animations can be found here. These are actually the highlights of the outset of prototype where group of individuals created and customized the prototype framework to produce dynamic and ready to use widgets.

You can find various component animations in Script.aculo.us such as different effect combination, draggable objects, movie effect and etc. Click here for more reference and see their DEMOs.

To date, DOJO seems to be most useful for corporate websites. It can cater large dataset to be turned into a displayable grid without performance penalty. It also has the most wanted charting utility for your reports. It is fully internationalized, DOJO comes with translations supporting over 100 languages, even scripts like Arabic and Hebrew.

The latest tools I have used in DOJO are the TAB enabled div, drag and drop, and the package loading. All these helped me developed the site I wanted. Here are some sample screenshots and codes.

The code

<div  dojoType=\"dijit.layout.TabContainer\" refreshOnShow=\"true\" style=\"height:450px;\">
<div dojoType=\"dijit.layout.ContentPane\" title=\"Equipment Registration\">…</div>
<div dojoType=\"dijit.layout.ContentPane\" title=\"Equipment Update\"> … </div>
<div dojoType=\"dijit.layout.ContentPane\" title=\"Configure\"> … </div>
</div>
 

Refer to the official DOJO site for more codes and demos.

I hope this post helped you somehow.