Partager via

HTML5 Programming with F#

  • Article

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

Comments

  • Anonymous
    July 06, 2010
    Well looks like it's time to go download websharper ;) Thanks for the quite interesting post.

  • Anonymous
    July 06, 2010
    The comment has been removed

  • Anonymous
    July 06, 2010
    The samples don't render for me.  I'm using IE8.  Must be heavy load.

  • Anonymous
    July 06, 2010
    The samples don't render for me.  I'm using IE8.  Must be heavy load.

  • Anonymous
    July 06, 2010
    Very nice lads,   The HTML 5 Canvas example was excellent, I had not read much on html 5 & have avoided F# , now I am interested

  • Anonymous
    July 06, 2010
    gtgt

  • Anonymous
    July 06, 2010
    Win Vista SP2. Development machine with all versions of the .NET FrameWork installed. Both the F# HTML5 demos crash the IE9 preview. thanks, Bill

  • Anonymous
    July 06, 2010
    As the post says, "...You’ll need a HTML5-enabled browser..." IE is not HTML5 fully compatible. You will either need to use Chrome, Safari, Opera or the Firefox 4 beta.

  • Anonymous
    July 06, 2010
    IE doesn't fully supports HTML5. you will need an HTML5 capable browser like Chrome or Safari.

  • Anonymous
    July 06, 2010
    IE doesn't fully supports HTML5. you will need an HTML5 capable browser like Chrome or Safari.

  • Anonymous
    July 07, 2010
    Bret and GameDaddy - it says you need a HTML5 compliant browser

  • Anonymous
    July 07, 2010
    The comment has been removed

  • Anonymous
    July 07, 2010
    The comment has been removed

  • Anonymous
    July 08, 2010
    The big question here is why (oh why) is IE9 not HTML 5 compliant. Does anyone (anyone!) at Microsoft realize how Don-Quixotic it is to drive adoption of new tools (and IE9 is also one of those) when they don't work well with standards other browsers support for some time now? Browser is, with distance, THE most important tool (and application) today and IE9 is still lagging in support for HTML5.

  • Anonymous
    July 08, 2010
    The comment has been removed

  • Anonymous
    July 10, 2010
    Looks pretty cool as code goes, Microsoft tools are always great.  One small problem, IE8 crashes when I try to use the code.

  • Anonymous
    July 13, 2010
    Is this tied with Visual Studio 2010??

  • Anonymous
    August 14, 2010
    Nice to look at introduction to new coding. Thanks. yep I'll wait for IE with HTML5 though, while I spend more time on current technologies that I can use with my customers

  • Anonymous
    October 02, 2010
    Actually, IE9 (Beta) now does support HTML5.  The support is much better than any IE before, although it is still not up to par with any other mainstream browser (such as Chrome). Well, now I just have to actually learn F# and I am all set for WebSharper... Any possibility of C# becoming the client language? :P