September 7, 2007

Quick AJAX Prototyping, with YUI and Protoscript

Ever looked at YUI's richness and had thoughts like "This looks really cool, but I just want to try something out." or "I wish there was a way to get something working fast." Enter Yahoo's own Bill Scott, with Protoscript. Protoscript quickly brings static pages to life, by connecting HTML elements to behaviors and events with a minimum of fuss.

From the author:

"The goal of Protoscript is not just to provide a library for prototyping rich interactions. The main purpose is to build simple yet rich tools on top of the library to make it easier for designers, product managers, business owners and all the non-techies to experiment with different interaction techniques--without coding."

The site is stuffed full of working examples--so far there are 31 flavors, with an open wiki for contributions--plus a handy bookmarklet that should allow you to try Protoscript on any site you can load into your browser.

Here's a sample from the Demos section. It waits for the user to click on the element identifed as avatar, fades it, and hides it from the browser:

$proto('#avatar', {
  Click: {
    onClick: {
      Fade: {
        opacity: {to: 0},
        onComplete: {Close : {} }
      }
    }
  }
});

The code itself is a JSON object, funneling user activity through event listeners and behavior wrappers. Anyone who's ever tried to write an event listener from scratch will testify that there's a lot going on here, but it's handled by the YUI, jQuery, and Protoscript libraries, saving much developer time and heartache.

Kent Brewster, Yahoo! Developer Network

Posted at September 7, 2007 10:04 AM

Comments

Posted by: unknown_shinoda at September 8, 2007 10:19 AM