Khoo Yit Phang

Collecting my ideas and musings about programming

Introducing Path Projection and Arrowlets (and me)

with 2 comments

I recently found a couple of blog posts writing my Arrowlets library. Also, I presented a poster at ICFP 2008, and it was quite exciting to meet with various researchers and bloggers who knew about my work. These events have inspired me to start blogging about Path Projection and Arrowlets, two of my research projects, and exchange ideas with fellow bloggers.

Path Projection

Path Projection Close-up ScreenshotPath Projection, my main research project, is a user interface for exploring program paths, such as call stacks or execution traces. It is designed to work with defect detection tools that typically produce paths as part of their error report; taking as input an XML file describing the path and the program source code, and automatically generating a visualization that makes it easier for programmers to understand the cause of the error. We have some promising results from a user study that showed users performing a bug triaging task 18% faster compared to a conventional source code viewer.

I developed Path Projection because I believe that, while there are many useful defect detection tools today, they are often very difficult to use. A good tool should consider the user interface to be just as important as the algorithm, because ultimately, a programmer has to understand the reported error to be able to fix it.

Arrowlets

You might be surprised to know that Path Projection is a web-browser based tool. It is written mainly in JavaScript with some offline preprocessing, but no server component. In developing Path Projection however, I found the standard way of writing responsive event-driven programs in JavaScript to be quite unmanageable, invariably leading to a complicated spaghetti mess of event handlers and callback plumbing.

And that’s the motivation for my Arrowlets library: it is a JavaScript library based on arrows that makes it easy to write event-driven programs. Arrowlets allows you to compose asynchronous event listeners, synchronous event handlers or any function using a uniform arrow combinator interface. My favorite example is drag-and-drop, which in Arrowlets, the entire control-flow can be composed as in the following snippet:

var dragOrDropA =
    (   (EventA("mousemove").next(dragA).next(Repeat))
     .or(EventA("mouseup").next(dropA).next(Done))
    ).repeat();

var dragDropOrCancelA =
       (EventA("mousemove").next(dragA).next(dragOrDropA))
    .or(EventA("mouseup").next(cancelA));

var dragAndDropA = /* drag-and-drop */
    EventA("mousedown").next(setupA).next(dragDropOrCancelA);
ElementA("dragtarget").next(dragAndDropA).run();

Arrowlets cleanly separates the actual event handling code from the callback plumbing, and also makes it much easier to write event-driven programs in a modular fashion (and quite elegantly too, if I may add).

(I should thank Chris Eidhof and Adam Turoff for blogging about Arrowlets.)

About Me

And lastly, let me introduce myself: I’m a graduate student at the University of Maryland and a member the PL group with Mike Hicks, Jeff Foster, and Vibha Sazawal as my advisors. My research interest lies in developing tools or libraries that make programming tasks easy, and make sophisticated program techniques accessible to programmers of various skill levels.

P.S. I write my name in Chinese order which tends to confuse people, so Khoo is my last name and Yit Phang my first name, and you can call me Yit.

About these ads

Written by Khoo Yit Phang

October 16, 2008 at 7:57 pm

2 Responses

Subscribe to comments with RSS.

  1. Awesome! A blog! Hopefully I’ll find some time somewhere soon where I can build some more stuff with Arrowlets. Have you seen John Resig’s latest blog post [1]? That code looks a lot like Arrowlets.

    [1] http://ejohn.org/blog/ultra-chaining-with-jquery/

    Chris Eidhof

    October 16, 2008 at 8:08 pm

  2. Hi Chris, yes, I did see John Resig’s post, and thought that I should really put up this blog now ;-) Hopefully, I’ll post an update to Arrowlets soon.

    Khoo Yit Phang

    October 16, 2008 at 9:49 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: