HTML5 Programming with F#

Today I spent the afternoon with Manuel Serrano, designer of Hop, a Scheme variation for cross-tier web programming, targeting JVM and Javascript.

 

This is highly related to WebSharper, which lets you program HTML/Javascript/Ajax with F#. I was very pleasantly surprised to see that WebSharper includes demos of HTML5 programming with F#. For example:

· HTML5 Canvas Sample

· HTML5 Canvas Animation

You’ll need a HTML5-enabled browser - these are web apps, so you won't need anything else. Most other samples work in all browsers.

If you want to develop web apps like these with F#, WebSharper Standard is now available as a free download, as recently announced by Adam Granicz. 

The F# code for these apps is impressively succinct and clear. (And typechecked! And you get to program both client and server in one great language!). The animated clock includes a lovely use of GUI-async programming. Many of the other WebSharper samples are also great examples of F# web programming. The F# code is executed as Javascript on the client side.

Now that WebSharper has been released and matured, it will be great to see it used more widely by F# users. Given the importance of both HTML5 and Silverlight, F# users interested in shipping visualization apps should really make sure they know how to use F# to program these, using the Silverlight SDK (for Silverlight) or tools such as WebSharper (for HTML5).

Here's a snippet for the animated clock:

[<JavaScript>]

let AnimatedCanvas draw width height caption =

    let canvas = new Canvas.Canvas(width, height)

    let ctx = canvas.Context

    let rec loop =

        async {

            do! Async.Sleep 1000

            do draw ctx

            do! loop

        }

    draw ctx

    Async.Start loop

Enjoy!

Don