A Haskell FFI calling convention for Javascript

Haskell’s Foreign Function Interface (FFI) predefined calling conventions do not match well with Javascript’s object oriented features. In particular selecting a field of an object using dot notation (like o.f) and using an object as an array using brackets (like o[i]) do not have a natural counterpart in Haskell or the default calling conventions supported by the FFI interface. So, here are some examples of how Javascript is accessed in UHC via its jscript calling convention:

data Document
foreign import jscript "document"   document      :: IO Document
foreign import jscript "%1.write()" documentWrite :: Document -> JSString -> IO ()
foreign import jscript alert :: JSString -> IO ()

From within a browser the document representation can be accessed via the global variable document, the foreign entity "document" translates to a reference to this variable. The type of the document is defined as an opaque type, it can thus only manipulated via Javascript. Writing a string to the document is done by invoking the method write on a document. The foreign entity "%1.write()" specifies that from all arguments the first one is used as the receiver of the method write. The parenthesis () specify that a call has to be made, passing all arguments except those referred to explicitly by means of %<nr>, where <nr> >= 1 refers to argument <nr>. If an entity is omitted as in alert it defaults to "<functionname>()" where <functionname> is the name of the foreign function being defined.

Function documentWrite does not accept a String but a JSString instead, defined to be the platform dependent representation of Strings, converted to and from String with corresponding conversion functions.

type JSString = PackedString
stringToJSString :: String -> JSString
jsStringToString :: JSString -> String

stringToJSString forces its argument to be fully evaluated and then converts it to a Javascript String.

There is choice whether to put document in the IO monad or not, depending whether this global object itself will ever be assigned a new value or not. Not being a Javascript DOM wizard wrapping in IO seems to be the safest bet.

Given these functions a minimal Hello World web program thus is:

main = alert $ stringToJSString "Hi there!"

As this would pop up an alert box, an alternative Hi is the following program which writes to the document instead:

main = do d <- document
          documentWrite d $ stringToJSString "Hi there!"

Actually, the usual Hello would have worked as well because it is implemented as writing to the document:

main = putStr "Hi there!"

To show the usefulness of array like access as part of we do a bit of rudimentary DOM programming:

foreign import jscript "%1.getElementsByName()" documentGetElementsByName :: Document -> JSString -> IO (NodeList Node)

data NodeList x

foreign import jscript "%1.length" nodeListLength :: NodeList Node -> Int
foreign import jscript "%1[%2]"    nodeListItem   :: NodeList Node -> Int -> IO Node

data Node

foreign import jscript "%1.innerHTML" elementInnerHTML :: Node -> JSString
foreign import jscript "%1.tagName"   elementTagName   :: Node -> JSString

A NodeList is not an array, but behaves like an array: we can ask for its length and retrieve an element by index. It is not an array itself, so modelling it as such in Haskell would be incorrect. However, by allowing import entities to use Javascript array notation we circumvent this limitation and the Javascript array interface can still be used easily.

Finally, this minimal interface to DOM can be used to retrieve and print info about an element in an html document:

main = do d <- document
          nl <- documentGetElementsByName d (stringToJSString "myHeader")
          print (nodeListLength nl)
          n <- nodeListItem nl 0
          print $ jsStringToString $ elementTagName n
          print $ jsStringToString $ elementInnerHTML n

Given the presence of

Head says hello!

with the name "myHeader" in the document where the program is run, it will produce the following as part of the document:

1 "H1" "Head says hello!"


5 Responses to A Haskell FFI calling convention for Javascript

  1. Sjoerd Visscher says:


    On thing: NodeList is a live list, so I’d say that nodeListLength needs to be in IO as well.

  2. Jason Dusek says:

    DOM programming would seem to be modelled by STM. JavaScript interpreters in browsers (and many outside them) are single-threaded; so there is never any danger of concurrent update of a structure during the “check” phase right before a transaction to the DOM is committed.

    • Alexander says:

      That’s wrong – Chrome and Opera JS engines are multithreaded, although they lock DOM accesses to ensure compatibility with the legacy JS code.

  3. So, it boils down to putting everything in the IO monad, as all fields of an object (except the readonly ones) can then be modified by another thread, no way around it. Which is somewhat of a pity as it does not improve readability.

  4. Jamey says:

    You post very interesting posts here. Your website deserves much more visitors.

    It can go viral if you give it initial boost, i know useful tool that can help you, just search
    in google: svetsern traffic tips

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 )

Facebook photo

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

Connecting to %s

%d bloggers like this: