F# web applications using WebSharper conference by Adam Granicz

What is?

It's a framework. A library for creating scripted and self-hosted client-server applications in F#

What offers?

F# to JS compiler + Web abstractions

• Pagelets: F# code running on the client. Content inserted into the DOM with some JS functionality.
• Sitelets: Server side content.
• Formlets and flowlets: UI abstractions
• Piglets: Plugable interactive GUI-lets. Parts of interface you can share with more developers.
• UI.Next

Extesions

~50 extensions to various JavaScript libraries

• Core: JQuery, EcmaScript, WebGL
• Visualization: Google Visualizaion, D3, Raphael
• Charting: highcharts, Chart.js
• GIS: Google maps, Bing maps, leaflet.js
• Mobile: jQuery Mobile, Sencha Touch, Kendo Mobile

New extensions

You can implement your own extensions:

• Manually (via JS inlines)
• Using WIG (WebSharper Interface Generator): probably the easiest way to create your own interfaces. It's built on top of WebSharper. http://websharper.com/docs/wig
• Importing TypeScript decorations

Warp is a set of shorthands to get started more easily with WebSharper. You won't need IIS thanks to Warp (port 9000)

Tutorials

Hello world example

Create a new console application in Visual F# and run the following command to bring WebSharper into your new solution:

Install-Package WebSharper.Warp

Copy the following within the Script1.fsx (add this script file into your solution):

#load "packages/WebSharper.Warp.3.2.17.20/tools/reference-nover.fsx"

Now, paste the following code within your Program.fs file:

Single-Page applications

In the following example you will be building a single page application (CreateSPA) with an H1 tag

Multi-Page Applications

In the following example we are offering a web page with two entry points. Home would be the root path (localhost:9000) and About would be accessible by localhost:9000/about

Type Providers

Generally, a URL is passed into the type provider and it can be used to bring pieces of those webpages. If you have a < in your code that will be recognized as a type provider invocation in your code.

Install-Package fsharp.data

This type provider is able to figure out which are the differents part building a particular site passed as a variable when the object is created. See the following example within we take a wikipedia page and extracts the information from a table of animals.

Client server integration

Here we define some lines of code that we want to run in the client side. In this example we define an asynchronous function in the server to reverse an string.  We define a client function using JS which onclick, a button calls the server function sending the content of a textbox where the user can provides any text.

This is where the magic happens Div [ClientSide <@ Client.Main() @>], ClientSide allow us to plug client content within our web pages.

References

http://websharper.com/downloads
http://websharper.com/samples