Prototype and Script.aculo.us

 
avatar

I wanted to put up a post about Script.aculo.us a while ago, but for some reason have not yet. For those that are not familiar with the Script.aculo.us JavaScript libraries, I would recommend checking them out if you are a web developer. Built on the Prototype framework, these add-on scripts provide a ton of useful functionality for creating user interfaces and other "Web 2.0" effects such as animations, drag-and-drop capabilities, Ajax controls, and more.

Without getting too technical about what Prototype and Script.aculo.us can help you with, they are a set of JavaScript classes and functions that make adding such effects very easy, and make it so that developers can spend their time creating effects and fine-tuning interfaces, rather than tediously coding out the scripts that they need to make their effects happen. This saves time, which when dealing with designers inevitably means that it saves money as well.

For those out there using Rails for their development, you are probably already using Prototype and Script.aculo.us all the time, whether you know it or not. Current versions of Rails have these JavaScript libraries very smoothly integrated, and when you use a Rails helper such as:

link_to_remote @object, :url => {:action => 'targetaction'}, :update => 'some-div'

What happens is that Rails uses the Prototype libraries to create the correct JavaScript required to make an Ajax link. There are a ton more, and the Script.aculo.us effects are just as simple to use. To explain, the code above will create a link that will generate an Ajax call to the target_action, which presumably does something and then fires some feedback at the browser when it is finished. We've told the script that when the response from the server comes it should update the DIV element on our page with the ID of some-div.

Additionally, which I won't go into detail about here, Rails developers can use what are called .rjs templates to generate responses that are purely JavaScript. Rather than always returning updated snippets of HTML code, RJS templates make it easy to send your response as JSON (JavaScript Object Notation) which can then be used by JavaScript to update a page or create an animation.

Using Script.aculo.us and Prototype directly is also very easy, and I recommend that anyone doing any type of front-end web design, particularly interface designers, get familiar with these techniques. I, for one, am refreshed by some of the interfaces that I have seen lately, considering that for the most part websites are kind of difficult to use. Unless I am the only one annoyed by repetitive page loads for no apparent reason...

Category: Developers' Corner | Tags: JavaScript, javascript, Development, prototype, Video

0 Comments

Rss-sm

Sign-up to receive EcommerceNotes, our acclaimed email newsletter.

View A Sample | Privacy

Connect with us

Bloggers Wanted

We’re looking for merchants and other ecommerce professionals to share their experiences with our readers. If this interests you, we invite you to contact us.

Help

Featured Tags | All A-Z

 

Inside Practical eCommerce