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

 

Comments (19)

  1. setiri says:

    Well looks like it's time to go download websharper 😉 Thanks for the quite interesting post.

  2. GameDaddy says:

    Websharper ,and the F#, download links broke my IE 8 browser when I went for the download. With my Java, Flash, and MS upgrade downloads current. It looks like the problem is located on your website there.

  3. bret says:

    The samples don't render for me.  I'm using IE8.  Must be heavy load.

  4. bret says:

    The samples don't render for me.  I'm using IE8.  Must be heavy load.

  5. 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

  6. Bill Woodruff says:

    Win Vista SP2. Development machine with all versions of the .NET FrameWork installed.

    Both the F# HTML5 demos crash the IE9 preview.

    thanks, Bill

  7. developer says:

    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.

  8. developer says:

    IE doesn't fully supports HTML5. you will need an HTML5 capable browser like Chrome or Safari.

  9. dd says:

    IE doesn't fully supports HTML5. you will need an HTML5 capable browser like Chrome or Safari.

  10. Chuck says:

    Bret and GameDaddy – it says you need a HTML5 compliant browser

  11. I been watching you tube videos through HTML5 instead of Flash from couple of months…seems pretty ..well..pretty :)….  http://www.youtube.com/html5

  12. toyvo says:

    We have done some improvements to the server, so hopefully now the load issue is solved. Also, you are welcome to use the HubFS forum to discuss WebSharper (so as not to abuse the blog and hospitality of Don further): cs.hubfs.net/…/ShowForum.aspx

  13. Sam says:

    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.

  14. Joe says:

    You're kidding about this right?

    I was looking at the ExtJs example…. it's difficult to see the difference between the F# code and the ExtJs javascript code, they look nearly identical. So how is this better than just writing the javascript? I don't see the benefit.. can someone explain (yes I read the various explanations on the site but did not find them satisfying).

    Also, I would work on cleaning this up and try to provide some full real world example applications for those who may be interested. That is paramount in my mind. It does not matter how succint and pretty the code is to create a YUI tab, it is much more important to see what it looks like when you have developed an entire real world application. Then we can 'see' what we will be getting into the deeper we dig.

    Performance and Composition:

    Y-Slow Performance: Overall performance score 47

    The page has a total of 105 components and a total weight of 1206.0K bytes

    89 components with a primed cache.

    Maybe you need to look into optimizing your resource handling, it sure needs some work. I think CastleLight has a product you should use. You should be able to get your css and js resources down to one handler for each…

  15. MarikAlexanderov says:

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

  16. Murugan says:

    Is this tied with Visual Studio 2010??

  17. Conrad says:

    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

  18. Roobs says:

    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? 😛