NOTE: This blog has been moved to http://www.looksgoodworkswell.com

Thursday, September 06, 2007

Announcing Protoscript



Wow. It has actually been 2 months since my last post. Nope. I have not fallen off the planet. This has been one of the craziest times I have experienced in a long time so while I have had a lot to chat about I have not had the time to blog coherently.

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

8 comments:

Sean Kane said...

Awesome Bill! I look forward to messing around with it.

Jonathan said...

Woot! Very very cool ... nice work man!

Marcin said...

Great! I am just thinking about making my portfolio and since I am not a developer it seems to be perfect for me. Thanks a lot!

Json said...

What is your role on this? Is this library sponsored by Yahoo? What is the license?
I would LOVE to learn more about this/

Ken said...

I, too, look forward to messing around with this lib. Way cool!

A couple issues:
1) Demo of ColorAnimate Behavior has text from close-click-blur.

2) All pages fail w3c validation

Bill Scott said...

@json
It is BSD license. Not Yahoo! sponsored. Use it anyway you like.

@ken
Thanks. on my list to address validation. was just in a hurry to get it out, but thanks for catching that.

Hmmm... not seeing the issue with ColorAnimate... could you check again?

Ken said...

Bill - I still see the issue with ColorAnimate. Can't give you a screenshot in this textbox, but here's copied text:

Demo of ColorAnimate Behavior
Animating Color

Click Me!

Here's an example that fades & closes the image on the left when the user clicks on it. (It's live, so go ahead and try it!). The protoscript below says: for an element with id set to avatar, fade it out when the user clicks on it and close it when the fade completes. You can click here to restart the example.
$proto('#box-target', {
Click: {
onClick: {
ColorAnimate: {
backgroundColor: { from:'#fff', to: '#FEF59B' },
borderTopColor: { from:'#2F6FAB', to: '#b3f' },
borderLeftColor: { from:'#2F6FAB', to: '#b3f' },
borderRightColor: { from:'#2F6FAB', to: '#b3f' },
borderBottomColor: { from:'#2F6FAB', to: '#b3f' },
duration: 0.5,
onStart: {
ColorAnimate: {
target: "#box-target p",
color: { from:'#000', to: '#888' }
},
Animate: {
target: "#box-target p",
fontSize: {to: 18, unit: 'px'}
}
}
}
}

Nolan Wright said...

Hi Bill,

Protoscript is very interesting - great work!

We have taken a very similar approach at Appcelerator with our Web Expression Language - it integrates DHTML and Ajax into one simple language. Our expressions take the following form:

on="[condition] then [action]"

There are two ways to use the language:

1) add an "on" attribute to any HTML element:

<div on="click then show and effect[Highlight]"> Click Me</div>

2) use Javascript to add behaviors to existing elements

$('myelement').on('click then show and effect[Highlight]');

If you want to add multiple expressions to an element you separate them with an "or". If you want compound actions, you separate them with an "and".

Our platform has several other capabilities, but I figured you would be most interested in how we enable rapid prototyping (btw, we reuse 100% of our prototype code in the final product, so there's no throwaway code).

Anyway, I would be interested in your thoughts on our approach.

We built a simple interactive tool for our Web Expression Language (using Appcelerator), you can play around with it at:

http://try.appcelerator.org

Hope all is well.

Nolan