[web-devel] Some Fun: Panther AJAX Library

Blake Rain blake.rain at gmail.com
Sat Jun 25 01:17:20 CEST 2011

Dear All,

Some history: About two or so  years ago, before I'd heard of Yesod, we
started  a  web  development  framework  for Haskell  which  we  called
Panther.  This  framework was  quite similar to  ASP.Net or  PHP: pages
were source  files and it  had a pre-processor which  generated Haskell

To cut  a long story short: I  never really finished off  Panther, as I
found out  about Michael's wonderful  Yesod.  I'm now  resurrecting the
project with  a different goal: hosting multiple  WAI applications over
clusters.  The  fun  part of  the  old  Panther  was  that it  used  an
evolutionary  rewiring   algorithm  to  distribute   applications  over
clusters of computers over multiple sites. As you can imagine, that was
a great joy to write :)

When the newer Panther actually stabilizes (or even works) I'll explain
various bits of it in more detail.

One of  the nice features that  Panther had was the  ability to specify
client-side operations on the server. For example, given the HTML:

>  <div id="myDiv">
>    <i>Some Text</i>
>  </div>
>  <input type="text" id="name" />
>  <button type="button" panther:onclick="changeMyDiv">
>    Change!
>  </button>

We could  replace the text in  the <div> with "Other  Text", change the
style of the <div> and print the contents of the input element with the
following Haskell code:

>  changeMyDiv :: (Monad m) => Element -> Ajax m ()
>  changeMyDiv button = do
>    [div, input] <- getElementsById ["myDiv", "name"]
>    setInnerHtml div "Other Text"
>    setStyle div ["font-weight" =: "bold", "color" =: "green"]
>    v <- getValue input
>    liftIO $ print v

(the  code was  actually a  little more  complex,  as 'getElementsById'
yielded a list of 'Maybe Element'. But you get the idea).

In earlier days  - before we adopted Yesod and  rewrote everything :) -
we found this  functionality to be quite useful.  We  mostly used it to
handle dynamic forms, progress reporting and so on.

I'd completely forgotten about  the panther-ajax package.  The past few
discussions on  web-devel regarding dynamic  forms made me  think about
how we  have solved  similar problems, and  what we  used to do  in the

Anyway, last week I decided to  port the package over to Yesod and make
some  improvements to  the API.   I've put  an experimental  version on
GitHub for those who are at all interested in this:


There is a simple example in the  repo. For those of you who don't want
to build the example, but would  still like see it working, the example
is currently running at:


It should still be running...

You can get an immediate idea for how it works by examining the network
activity in Chrome (or whatever your browser may be).

If any of you are interested -  or are idly curious and have some spare
time - I'd love to hear any  feedback. The library still needs a lot of
improvement. There is  still quite a bit of code to  port over, and the
optimizing assembler  needs some  tender loving care  before it  can be
used again.

Kind Regards,

Blake Rain
Massive Tactical

More information about the web-devel mailing list