Friday, September 7th, 2007

Protoscript: Prototype web apps with a JSON DSL

Category: JavaScript, Library

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. He will be speaking on this and more at the upcoming Ajax Experience show, so come to chat with him about it.

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.

javascript

  1. $proto('#avatar', {
  2.   Click: {
  3.     onClick: {
  4.       Fade: {
  5.         opacity: {to: 0},
  6.         onComplete: {Close : {} }
  7.       }
  8.     }
  9.   }
  10. });

b) Load in some content when the area is clicked

javascript

  1. $proto('#content-target', {
  2.   Click: {
  3.     onClick: {
  4.      FetchHtml: {
  5.         url:'getProtoTrips.php?query=Amsterdam&start=1&results=4'
  6.       }
  7.     }
  8.   }
  9. });

c) Use a Popup when clicking on an image, and fade in another image in that popup

javascript

  1. $proto('#avatar', {
  2.     Click: {
  3.         onClick: {
  4.             Popup: {
  5.                 id: 'about-bill',
  6.                 width: '510px',
  7.                 effect: {effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.2},
  8.                 hd: 'Bill Scott Yapping',
  9.                 bd: 'http://farm1.static.flickr.com/46/113016311_39e40803ec.jpg',
  10.                 ft: ''
  11.             }
  12.         }  
  13.     }
  14. });

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!)

Posted by Dion Almaer at 9:57 am
15 Comments

+++--
3.7 rating from 28 votes

15 Comments »

Comments feed TrackBack URI

OMG!
I have been looking for this! jsON is the new black (Ajax)

Anyone use it yet?

Comment by Ric Johnson — September 7, 2007

Prototype has had a behaviour object lying around since 2006 but hasn’t included it in their framework. They dont’ seem to accept most of the work submitted on their trac wich is kind of sad. It feels like the team behind the framework is not quite sure on the direction they want to go in, and is taking babysteps because of this. This seems like a great replacement for behaviour even adding some sugar on top of it, thanks.

Comment by Nick — September 7, 2007

Yay, yet another proprietary way to create a web app!

Comment by SchizoDuckie — September 7, 2007

This looks like a quick to prototype an interface, and SchizoDuckie, if you don’t like it, you don’t have to use it, or you can just program it in jQuery/Mootools/Ext/YUI/Dojo/whatever once you’re finished prototyping.

Comment by Christian Storgaard — September 7, 2007

@Nick
It feels like the team behind the framework is not quite sure on the direction they want to go in, and is taking babysteps because of this.

Nick, the team knows exactly where it goes and what it does. Yes, there are certain things that need to be thoroughly discussed before incorporating into source (therefore some changes might take time) but the idea is to keep things simple. There’s no point to bloat the core file with something that would fit perfectly as an extension.
I’m sure we’re all aware of the fact that many people complain about prototype’s 130 KB overhead…
I believe that the “taken steps” are those that are critical for everyday development tasks. Everything else could be easily added on top.

Cheers,
kangax

Comment by kangax — September 7, 2007

@Schizo
Just to clarify… I don’t intend this as another way to create a web app. I have been very careful to place this in the prototyping conceptual phase.

The goal is a GUI on top to make it easy for everyone to participate in creating/experimenting with alternate scenarios in the least expensive manner as possible.

The current plan is to create FF extension (most like a firebug extension) that adds prototyping capability to firebug.

The protoscript engine is a means to an end.

And yes one could generate code that would be production efficient… but I wanted to focus on making it simple for a wider audience.

Comment by Bill Scott — September 7, 2007

This looks like a much less flexible version of http://www.bennolan.com/behaviour/ . Not sure I’m impressed.

Comment by Jon Hartmann — September 7, 2007

Bill,
Are you focusing just on Firefox?
It looks like some of your examples do not work in IE:
Animate
I am a VERY inteseted in jsON, and would love to see a full domain specific lanaguage framework expanded in this way.
PLEASe do not forget us MS people!

Comment by Ric Johnson — September 7, 2007

your bookmarklet link is bad:

javascript:((function () {var d = document, i =

Comment by rickdog — September 7, 2007

@Ric
Yes it should have been working in IE– but see the problem. So there are a few rough edges I still need to iron out on IE. (But please report bugs to link below).

@rickdog
Hmmm… the bookmarklet just tried it again on FF, IE6, Safari, and Camino and it works fine (IE has a problem with the text area coming up the right size that I am going to look into).

For any bugs, issues, please report them to:
http://code.google.com/p/protoscript/issues/list

Thanks!
Bill

Comment by Bill Scott — September 7, 2007

I see how to make a GET request, but how would someone make a Ajax POST request in the scope of this toolkit?

Comment by phry — September 7, 2007

@phry
Sure. Behaviors can be added and they can do anything JS can do. If however you wanted to sprinkle ajax posts on another web site then no it would not work.

I am adding a FetchJson that uses script source hack, but again that is GET based.

You could also have a behavior that creates an iframe and does post with it… again it is ‘just javascript’ under the covers.

I welcome others to add behaviors (will be adding more thorough docs for behavior writing) and also folks to write behavior sets for dojo, mootools and so on.

You can see my presentation I gave this week at the RWE at:
http://billwscott.com/share/presentations/2007/rwe/ (it has examples of behavior writing.

Comment by Bill Scott — September 8, 2007

This looks lovely and all, but to someone beginning scripting and getting their feet wet in jQuery, I’m struggling to see how is this offers something particularly new, that isn’t offered already in a fairly easy to follow, abstracted syntax already by other frameworks.

I’m new to the whole ajax game, so I could be easily missing some of the subtleties that this new framework offers though.

What am I missing here?

Comment by Chris Adams — September 8, 2007

jQuery is a great framework and Protoscript does not seek to exceed it :-)

To answer the question of what *might* not be clear and why protoscript can be useful for prototyping, I have written a blog post of Why Protoscript?

http://looksgoodworkswell.blogspot.com/2007/09/why-protoscript.html

Comment by Bill Scott — September 9, 2007

Argh, JavaScript object literal syntax is *not* JSON (which is a text format) – muddling them up like this only serves to confuse newcomers to both of these concepts.

Comment by Jonathan Buchanan — September 9, 2007

Leave a comment

You must be logged in to post a comment.