Announcing Protoscript

One of the projects I have been working on is a way to make it easier for all of the non-techies (as well as techies) to be able to experiment with various interactions on a web page in lightweight manner.

By lightweight, I mean to say 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.

So back in July, I was slated to give a talk at the Ajax Experience. I promised a few months before that I would have 2 new talks. One on Anti-Patterns (yes I owe several blog posts on that one) and the other on prototyping.

The problem was exactly one week before both talks I had literally had not time to put those talks together. So I dropped out for a few days to create a very early version of what is now protoscript. The good news was that it was actually fully functioning and I gave a peek of it at the conference. <

I got a lot of good feedback from the talk and went back and rewrote it a couple of times, changed up some of my approach, moved to a plug-in style architecture, etc.

So, ok, 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.

The key abstraction that came out of my thinking was to express everything as objects (think HTML elements), behaviors (think patterns) and events (both events and callbacks).

In some ways it is similar to jQuery. And in fact I use jQuery for the selecting of elements. Protoscript, however, is a very stylized way to describe interactions. This makes it ideal as a building block.

For example, since the language is so simple (It is actually in JSON format) it makes it easier to extend to multiple toolkits (currently I use YUI, but I have built a simple example with Mootools), add new behaviors and events and even more importantly be able to build GUI tools on top of it.

As a first hack I created Protoscripter a bookmarklet that brings a GUI interface to any web page allowing you to play with protoscript (without any installation, other than the bookmarklet) and experiment with interactions.

I have been careful about pushing protoscript out because of this layering approach. Ideally I would have the whole stack. I would have a complete GUI as a FF extension allowing designers, product marketing or web devs to quickly sprinkle interactions onto their prototypes and quickly iterate to the best design. Well that is not reality. I have invested about 2-3 weeks of time so far and feel I have gotten it to the right level to release to the public.

There are 31 behaviors, 40+ live demos, a simple GUI tool (protoscripter). The scripting engine seems to be pretty solid (knock on wood). I have a full wiki with full documentation on all those behaviors. The code is over in Google Code in a repository ready for open source contribution.

So to kick it off I am giving a talk this morning at the Rich Web Experience here in San Jose. You can get a PDF version of my talk here: Prototype Presentation.

And most importantly start checking out prototoscript.com (right now the best experience is in Firefox).