Why we use prototype.js with scriptaculous.js ... Whats the main reason ?

Question

Why would we want to use prototype.js with scriptaculous.js? What's the main reason? When should we require that both libraries be include and when shouldn't we?

Answer 1

The scriptaculous.js file is a helper file which includes the remaining scripts using document.write calls.

As you can see from the code written in the scriptaculous.js file, its including the builder, effects, etc. libraries by calling the require function.

var Scriptaculous = {
  Version: '1.8.2',
  require: function(libraryName) {
    // inserting via DOM fails in Safari 2.0, so brute force approach
    document.write('<script type="text/javascript" src="'+libraryName+'"><\/script>');
  },
  REQUIRED_PROTOTYPE: '1.6.0.3',
  load: function() {
    function convertVersionString(versionString) {
      var v = versionString.replace(/_.*|\./g, '');
      v = parseInt(v + '0'.times(4-v.length));
      return versionString.indexOf('_') > -1 ? v-1 : v;
    }

    if((typeof Prototype=='undefined') ||
       (typeof Element == 'undefined') ||
       (typeof Element.Methods=='undefined') ||
       (convertVersionString(Prototype.Version) <
        convertVersionString(Scriptaculous.REQUIRED_PROTOTYPE)))
       throw("script.aculo.us requires the Prototype JavaScript framework >= " +
        Scriptaculous.REQUIRED_PROTOTYPE);

    var js = /scriptaculous\.js(\?.*)?$/ig;
    $$('head script[src]').findAll(function(s) {
      return s.src.match(js);
    }).each(function(s) {
      var path = s.src.replace(js, ''),
      includes = s.src.match(/\?.*load=([a-z,]*)/);
      (includes ? includes[1] : 'builder,effects,drag-drop,controls,slider,sound').split(',').each(
       function(include) { Scriptaculous.require(path+include+'.js') });
    });
  }
};

Scriptaculous.load();

And, we include the prototype library because scriptaculous is a kind of add-on based on the prototype library. You can't use scriptaculous without prototype as it calls methods available in the prototype library.

Answer 2

Scriptaculous uses Prototype, so if you're using any Scriptaculous effects on a page, then you need to include it.

If you can't see any obvious uses of Scriptaculous, its possible you've got other javascript using Prototype, which provides a sort of cross-platform utility layer for writing concise and effective code. A quick way to check for that is to look for javascript including calls to $()

Answer 3

Scriptaculous uses Prototype internally. If you use Scriptaculous, you need Prototype.

Answer 4

I've used prototype for quite some time, and scriptaculous with it ; I now use jQuery on some projects, Mootools on others, and prototype on others...

WHy do I use a JS Framework ?
Well, three main reasons :

• They provide lots of stuff I do not want to re-developp by myself
• They are well-tested ; more than my own code would be
• They provide a layer of cross-browser-compatibility (And I prefer having a framework that deals with that, instead of having to fight this war by myself ! )

After, which JS Framework qould you use is another question -- entirely up to you ^^

About when including prototype.js and/or scriptaculous.js :

• prototype.js : on any page that needs some JS stuff (every pages of the sites, generally)
• scriptaculous.js : at least on pages that require effects like drag'n drop, autocompleter, ...

Same thing with other JS frameworks too, btw...