다음을 통해 공유

Force-Directed Graph Layout in HTML5 with F# and WebSharper

  • 아티클

Do you want to write succinct, type-safe and correct HTML5 web code which is not full of bugs?  Writing Javascript-executing code with F# is appealing for these and other reasons I've gone into before, and the open source Pit and WebSharper frameworks give ways to use F# to write HTML5/Javascript code for web and mobile applications.

But what's it like to write this kind of F# code? What's it like to really write efficient, strongly-typed code that converts to Javascript?  On DeveloperFusion, Anton Tayanovskyy has written a step-by-step buide to writing a non-trivial HTML5 analytical visualization component using F# and the open source WebSharper framework.

The one thing I'd like Anton to add is how to access the layout logic in the F# component from Javascript (or CoffeeScript). Here I am assuming you may want to access this layout logic from a Javascript component (much as you often want to access an F# component from a C# GUI when writing .NET F# code). [ nb. this bit was edited to clarify, seee Adam's comment below ]

Enjoy!

don

 

Force-Directed Graph Layout in WebSharper

   In this tutorial I demonstrate how to build an interactive force-directed graph visualization running in the browser. Instead of coding directly in JavaScript and HTML5, I take advantage of F#, WebSharper, and Raphael. This technology combo makes it pleasantly simple to navigate the available API. It also reduces mistakes by checking types and units of measure, making the job both easy and fun. Dive in to learn how to make the most out of F# and WebSharper for portable interactive vector graphics in the browser.

....

Comments

  • Anonymous
    April 18, 2012
    "I'm assuming you want to implement parts of your code in F# and parts in other web programming tools." - why?   [ Don says: that was with reference to calling WebSharper F# code from Javascript - I think you'd mainly want to do this when some other parts of your app are implemented in Javascript, just as you tend to want to call F# code form C# when implementing a GUI in C#  ]