Protoscript: Prototype web apps with a JSON DSL
Written by on September 7th, 2007 in Ajax News.
Bill Scott of Yahoo! showed us an early version of Protoscript at The Ajax Experience. He got some good feedback, and has just announced the first version.
What is Protoscript?
Protoscript is a simplified scripting language for creating Ajax style prototypes for the Web. With Protoscript it’s easy to bring interface elements to life. Simply connect them to behaviors and events to create complex interactions.
It is a way to take an existing web page or a prototype of a web page and “sprinkle” rich behaviors to play with concepts. Ideally you should be able to express an interaction in a declarative manner without having to write JavaScript directly (but not kept from it if you need to). And even more ideally you should be able to build up the “legos” of interaction in simple GUI tool embedded in the browser so that you are not encumbered with even a simple syntax to type in.
Note, this has nothing to do with Prototype the library, or prototype the OO system that JavaScript uses. Gotta love overloading of terms!
The heart of this all is a JSON based DSL for declaring behaviour.
Let’s take a look at some examples:
a) Define behaviour on an id=”avatar” image to make it fade and close out.
-
-
$proto(’#avatar’, {
-
Click: {
-
onClick: {
-
Fade: {
-
opacity: {to: 0},
-
onComplete: {Close : {} }
-
}
-
}
-
}
-
});
-
b) Load in some content when the area is clicked
-
-
$proto(’#content-target’, {
-
Click: {
-
onClick: {
-
FetchHtml: {
-
url:’getProtoTrips.php?query=Amsterdam&start=1&results=4′
-
}
-
}
-
}
-
});
-
c) Use a Popup when clicking on an image, and fade in another image in that popup
-
-
$proto(’#avatar’, {
-
Click: {
-
onClick: {
-
Popup: {
-
id: ‘about-bill’,
-
width: ‘510px’,
-
effect: {effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.2},
-
hd: ‘Bill Scott Yapping’,
-
bd: ‘http://farm1.static.flickr.com/46/113016311_39e40803ec.jpg’,
-
ft: ”
-
}
-
}
-
}
-
});
-
Bill has done a great job in thoroughly documenting the tool, and providing simple demos to get across how it works.
Since the DSL is so simple, it is ripe for plugging in any JavaScript framework (currently YUI is used, with jQuery for CSS selection), and for tools, such as the bookmarklet that lets you “boot up” Protoscript in any page.
And of course, here is a little walkthrough (see if you can see the error in the docs!)
Source: Ajaxian
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/153472771/protoscript-prototype-web-apps-with-a-json-dsl